/* Shared feature page visuals */

/* Light section surface (waves + .fp-section-light stay in sync) */
:root {
  --fp-section-light-bg: #f5f7fb;
}

/* ==========================================================================
   Luminary — clean parallax background (alternative to cosmos).
   A static composition of three atmospheric glow zones on deep navy,
   with a barely-there dot grid for tactile depth. No animation.
   Parallax comes from position:fixed on ::before — page content scrolls
   over the pinned background, creating natural depth without iOS jank.
   ========================================================================== */

main.fp-luminary-main {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: clip;
  /* Base navy on the element itself — immune to Turbo navigation timing gaps.
     Transparent sections (like the CTA's .gloss-overlay) always see this color
     even before ::before is fully painted on a freshly-swapped page. */
  background: linear-gradient(158deg, #0f2040 0%, #132855 52%, #173060 100%);
}

main.fp-luminary-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Glow overlays only — base navy lives on the element itself */
  background:
    /* Top-left bloom — Bootstrap primary blue */
    radial-gradient(
      ellipse 110% 90% at 8% 12%,
      rgba(13, 110, 253, 0.22) 0%,
      rgba(13, 110, 253, 0.14) 30%,
      rgba(13, 110, 253, 0.05) 65%,
      transparent 85%
    ),
    /* Right-center blue halo */
    radial-gradient(
        ellipse 100% 85% at 92% 42%,
        rgba(59, 130, 246, 0.2) 0%,
        rgba(59, 130, 246, 0.12) 32%,
        rgba(59, 130, 246, 0.04) 65%,
        transparent 82%
      ),
    /* Lower-center deeper blue — grounds the composition */
    radial-gradient(
        ellipse 120% 70% at 46% 100%,
        rgba(30, 64, 175, 0.22) 0%,
        rgba(30, 64, 175, 0.13) 35%,
        rgba(30, 64, 175, 0.04) 65%,
        transparent 82%
      );
}

/* Dot grid rendered by luminary-grid Stimulus controller (canvas) */

/* ==========================================================================
   Dark section — secondary sections background (sits on fp-luminary-main bg)
   Light section — card surface
   ========================================================================== */

.fp-section-light {
  background: var(--fp-section-light-bg);
}


/* ==========================================================================
   Small glass card (lightweight, for benefit / feature grids on dark bg)
   ========================================================================== */

.fp-card-glass-sm {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease;
}

.fp-card-glass-sm:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(13, 110, 253, 0.4) !important;
  transform: translateY(1%) scale(1.02);
  transition: all 0.2s ease !important;
}

/* Pricing cards — override generic glass hover to match fp-pricing-pro lift */
#pricing .fp-card-glass-sm:hover {
  transform: translateY(-1%) scale(0.94);
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   Light card variant (for use on fp-section-light backgrounds)
   ========================================================================== */

.fp-card-light {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease;
}

.rg-row-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  cursor: default;
}
.rg-row-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.fp-card-light:hover {
  border-color: rgba(13, 110, 253, 0.25) !important;
  box-shadow:
    0 6px 24px rgba(13, 110, 253, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-3px);
  transition: all 0.2s ease !important;
}

/* Dark card variant (for use on dark/gradient backgrounds) */
.fp-card-dark {
  transition: all 0.2s ease;
}

/* ==========================================================================
   Testimonial tabs (homepage social proof section)
   Card-style triggers instead of Bootstrap's default underline tabs.
   Palette matches .fp-card-light above.
   ========================================================================== */

.fp-testimonials .nav-tabs {
  border-bottom: 0;
}

.fp-testimonials .nav-tabs .nav-link {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.07);
  color: #6c757d;
  text-align: left;
  transition: all 0.2s ease;
}

.fp-testimonials .nav-tabs .nav-link:hover {
  border-color: rgba(13, 110, 253, 0.25);
}

.fp-testimonials .nav-tabs .nav-link.active {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  color: #0d1117;
}

/* Quote pane typography — this Bootstrap build has no fs-* utilities, so size
   explicitly (same approach as the landing-page testimonials). */
.fp-testimonials .tab-content h4 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.fp-testimonials .tab-content p {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

.fp-card-dark:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-3px);
  background-color: rgba(255, 255, 255, 0.18) !important;
  transition: all 0.2s ease !important;
}

/* ==========================================================================
   Icon circles for dark backgrounds
   ========================================================================== */

.fp-icon-circle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.fp-icon-circle i,
.fp-icon-circle-light i {
  line-height: 1;
  display: block;
}

/* ==========================================================================
   Feature highlight visual placeholder (dark bg, for the icon display area)
   ========================================================================== */

.fp-highlight-visual {
  background: rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(13, 110, 253, 0.18);
}

/* ==========================================================================
   Spacing utilities (py-lg-6 missing from Bootstrap defaults)
   ========================================================================== */

@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

/* ==========================================================================
   Gloss overlay — white glass tint matching fp-card-glass-sm, with a subtle
   top-edge sheen baked into the gradient (no ::before, avoids conflicts with
   sections that have their own pseudo-elements like fp-cta-aurora).
   ========================================================================== */

.gloss-overlay {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(13, 110, 253, 0.05) 0%,
    rgba(13, 110, 253, 0.03) 30%,
    rgba(13, 110, 253, 0.03) 100%
  );
  border-top: 1px solid rgba(13, 110, 253, 0.12);
  border-bottom: 1px solid rgba(13, 110, 253, 0.06);
}

/* ==========================================================================
   Sticky header — applies when marketing CSS is bundled (public pages only).

   NOTE: backdrop-filter intentionally omitted — it creates a new containing
   block for fixed-position children, which breaks the mobile offcanvas drawer.
   ========================================================================== */

header.header.navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(8, 20, 40, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* On large screens the offcanvas becomes inline — its bg-dark child would
   otherwise show a different shade from the header background. */
@media (min-width: 992px) {
  header.header.navbar .offcanvas-body {
    background-color: transparent !important;
  }
}

/* ==========================================================================
   Pricing card variants for dark pages
   ========================================================================== */

.fp-pricing-popular {
  background: rgba(13, 110, 253, 0.12);
  border: 1px solid rgba(13, 110, 253, 0.45) !important;
  box-shadow:
    0 0 40px rgba(13, 110, 253, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.fp-pricing-popular:hover {
  background: rgba(13, 110, 253, 0.18) !important;
  border-color: rgba(13, 110, 253, 0.65) !important;
  box-shadow:
    0 0 52px rgba(13, 110, 253, 0.28),
    0 12px 36px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px);
  transition: all 0.2s ease !important;
}

.fp-pricing-pro {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2416 100%);
  border: 1px solid rgba(255, 193, 7, 0.45) !important;
  box-shadow:
    0 0 40px rgba(255, 193, 7, 0.18),
    0 8px 32px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.fp-pricing-pro:hover {
  background: linear-gradient(
    135deg,
    #0d0b00 0%,
    #1f1a00 50%,
    #2d2416 100%
  ) !important;
  border-color: rgba(255, 193, 7, 0.85) !important;
  box-shadow:
    0 0 0 4px rgba(255, 193, 7, 0.12),
    0 0 40px 8px rgba(255, 193, 7, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(-1%) scale(0.94);
  transition: all 0.2s ease !important;
}

@media (min-width: 992px) {
  .fp-card-md-small {
    transform: scale(0.94);
  }
}

/* ==========================================================================
   Home hero — light-to-dark gradient with offset image stack.
   ========================================================================== */

.fp-hero-home {
  position: relative;
  z-index: 2;
  /* Devices may extend past the inner container */
  overflow: visible;
  /* Overall hero band height — cosmos shows through; wave sits on the bottom edge */
  min-height: 700px;
}

/* Above .fp-wave-overlay (z-index: 2) so copy + device mockups sit over the curved divider */
.fp-hero-home-inner {
  position: relative;
  z-index: 3;
}

/* Mobile: pad enough to keep content above the wave overlay (wave is 34px tall on mobile) */
@media (max-width: 991.98px) {
  .fp-hero-home-inner {
    padding-bottom: 3rem;
  }
}

/* Content row min-height: desktop aligns copy + device stack; mobile uses natural height */
@media (min-width: 992px) {
  .fp-hero-home-row {
    min-height: 560px;
  }
}

/* below lg: height follows content */
@media (max-width: 991.98px) {
  .fp-hero-home {
    min-height: 0;
  }
}

.fp-hero-home::after,
.fp-hero-bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 250px 250px;
}

/* Home hero — device stack (iPad behind, iPhone in front on lg+) */
.fp-hero-device-col {
  overflow: visible;
}


.fp-hero-device-stack {
  position: relative;
  min-height: 300px;
  padding: 8px 0 28px;
}

/* Hero "Calculate Savings" button — frosted glass to match the section vibe,
   white text so it stays easy to read, with a periodic shimmer sweep that
   draws a little attention to the calculator without being distracting. */
.fp-hero-calc-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.fp-hero-calc-btn {
  --bs-btn-active-color: #fff;
  --bs-btn-hover-color: #fff;
}

.fp-hero-calc-btn:hover,
.fp-hero-calc-btn:focus,
.fp-hero-calc-btn:focus-visible,
.fp-hero-calc-btn:active {
  color: #fff !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 24px rgba(13, 110, 253, 0.25);
}

/* Diagonal light sweep — glints across once, then rests, on a slow loop */
.fp-hero-calc-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: fp-hero-calc-shimmer 5s ease-in-out infinite;
}

@keyframes fp-hero-calc-shimmer {
  0%   { left: -150%; }
  55%  { left: 150%; }
  100% { left: 150%; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-hero-calc-btn::after {
    animation: none;
  }
}


@media (min-width: 992px) {
  .fp-hero-device-col {
    /* Let mockups extend past the column / container gutter */
    padding-right: 0;
  }

  .fp-hero-device-stack {
    position: relative;
    min-height: 520px;
    padding: 32px 0 56px;
    /* Widen and offset so art can bleed without staying inside the col box */
    width: calc(100% + min(18vw, 10rem));
    max-width: none;
    margin-left: min(-3rem, -4vw);
    margin-right: min(-4rem, -6vw);
  }
}

/* iPad: back layer, desktop only — left-aligned so the full UI stays readable */
.fp-hero-device-ipad {
  position: absolute;
  left: 0;
  top: 50%;
  width: 86%;
  max-width: 560px;
  z-index: 3;
  object-fit: contain;
  object-position: left center;
  transform: translateY(-50%);
}

@media (min-width: 992px) {
  .fp-hero-device-ipad {
    left: -10%;
    width: 125%;
    max-width: 860px;
    transform: translateY(-48%);
  }
}

/* iPhone: front layer — mobile: centered, stacked under copy */
.fp-hero-device-iphone {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}

/* Part of the handset sits below the wave; #features gets padding to clear it */
@media (max-width: 991.98px) {
  .fp-hero-device-iphone {
    /* Slightly smaller than desktop cap; stack is width: fit-content so the col hugs the bitmap */
    max-width: min(304px, 82vw);
    width: auto;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    /*
      No transform or negative margin-top here — those caused the image to overlap the
      CTA buttons above. Instead, negative margin-bottom on .fp-hero-device-stack bleeds
      the bottom of the phone into the features section below, which already has extra
      padding-top to clear it.
    */
  }
}

@media (min-width: 992px) {
  /* iPhone: larger, anchored bottom-right with offset past the stack edge */
  .fp-hero-device-iphone {
    position: absolute;
    right: -22%;
    bottom: 5%;
    left: auto;
    top: auto;
    width: 42%;
    max-width: 320px;
    margin: 0;
    object-position: right bottom;
  }
}

.fp-hero-bloom {
  position: relative; /* needed for ::after noise texture */
}

/* ==========================================================================
   Home hero — real photo with directional dark overlay.
   background-image set via inline style in template (requires asset_path helper).
   ========================================================================== */

.fp-hero-photo {
  background-color: #060f22; /* fallback while image loads */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   Glossy CTA — frosted-glass panel with shimmer border lines.
   ========================================================================== */

/* Inner content container for CTA aurora sections */
.fp-cta-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 660px;
  margin: 0 auto;
}

/* ==========================================================================
   Light icon circle — tonal primary surface for use on white backgrounds
   ========================================================================== */

.fp-icon-circle-light {
  background: rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(13, 110, 253, 0.12);
}



/* ==========================================================================
   Hero wave — bottom curve from hero into the first light section only.
   Mid-page transitions are flat. Path fill uses --fp-wave-to (light surface).
   ========================================================================== */

.fp-wave {
  --fp-wave-from: transparent;
  --fp-wave-to: var(--fp-section-light-bg);
  display: block;
  line-height: 0;
  overflow: hidden;
  margin-top: -1px; /* prevent hairline sub-pixel gap */
  background: var(--fp-wave-from);
}

.fp-wave svg {
  display: block;
  width: 100%;
  height: 60px;
}

.fp-wave path {
  fill: var(--fp-wave-to);
}

/* Attach a wave directly to a hero so it inherits the hero bg naturally. */
.fp-wave-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  margin-top: 0;
  background: transparent;
  pointer-events: none;
}

.fp-wave-overlay svg {
  height: 110px;
}

@media (max-width: 767.98px) {
  .fp-wave svg {
    height: 28px;
  }

  .fp-wave-overlay svg {
    height: 34px;
  }
}

/* ==========================================================================
   Light-section social proof logo strip
   ========================================================================== */

.fp-logo-strip-light .fp-card-glass-sm {
  background: #f4f7ff !important;
  border: 1px solid rgba(13, 110, 253, 0.08) !important;
}

.fp-logo-strip-light .fp-card-glass-sm:hover {
  border-color: rgba(13, 110, 253, 0.2) !important;
  background: #edf2ff !important;
}

/* Dark card: strip uses !important light styles — raise specificity so Bootstrap bg-dark applies */
.fp-logo-strip-light .fp-card-glass-sm.bg-dark {
  background-color: var(--bs-dark) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.fp-logo-strip-light .fp-card-glass-sm.bg-dark:hover {
  background-color: var(--bs-gray-900) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   Star Ratings Booster — hero + flow diagram
   ========================================================================== */

/* Split hero background: full blue, white clipped to left with angled edge */
.srb-hero-section {
  background: #ffffff;
}

@media (max-width: 991.98px) {
  .srb-copy-col {
    border-bottom: 1px solid rgba(13, 110, 253, 0.15);
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 992px) {
  /* Full section is blue; white pseudo-element covers the left with a diagonal cut */
  .srb-hero-section {
    background: #e2eeff;
  }

  .srb-hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(50vw - 120px);
    background: #ffffff;
    z-index: 0;
  }
}

/* Hero badge pill */
.srb-hero-badge {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  border: 1px solid rgba(13, 110, 253, 0.25);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 1em;
}

/* Flow node cards (top two) — blue tint matching branch pill style */
.srb-flow-node-primary {
  background: #ffffff;
  border: 1.5px solid #bfdbfe;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.srb-flow-node-icon {
  color: #1d4ed8;
}

.srb-flow-node-text {
  color: #1e3a8a;
}

.srb-flow-node-subtext {
  color: #3b82f6;
}

/* Arrow icons between cards */
.srb-flow-arrow-icon {
  color: #0d1117;
  font-size: 1.4rem;
}

.srb-branch-row {
  gap: 0;
}

.srb-branch-label {
  flex: 1;
}

/* Secondary palette for recovery path (1-4 stars) */
.srb-branch-low {
  background: #fef0ec;
  border: 1.5px solid #f9bba8;
}

/* Emerald palette for success path (5 stars) */
.srb-branch-high {
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
}

.srb-outcome-card {
  flex: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.srb-outcome-low {
  background: #fef0ec;
  border: 1.5px solid #f9bba8;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.srb-outcome-high {
  background: #ecfdf5;
  border: 1.5px solid #6ee7b7;
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08);
}

/* Icon circles inside outcome cards */
.srb-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.srb-icon-circle-low {
  background: rgba(233, 81, 41, 0.12);
}
.srb-icon-circle-high {
  background: rgba(16, 185, 129, 0.12);
}
.srb-icon-circle-blue {
  background: rgba(13, 110, 253, 0.12);
}

/* Review platform logos */
.srb-review-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease;
}
.srb-review-logo:hover {
  transform: scale(1.12);
}

@keyframes srb-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.srb-animate {
  animation: srb-fade-up 0.8s ease both;
}

/* ==========================================================================
   Feature page hero — single screenshot offset layout (SEO page)
   ========================================================================== */

.fp-hero-seo-col {
  overflow: visible;
}

.fp-hero-seo-frame {
  position: relative;
  padding: 1.5rem 0;
}

.fp-hero-seo-screenshot {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  .fp-hero-seo-col {
    padding-top: 1.5rem;
    padding-bottom: 0;
    align-self: flex-end;
    width: 100%;
  }

  .fp-hero-seo-frame {
    padding: 1rem 0 0;
  }
}

@media (min-width: 992px) {
  .fp-hero-seo-col {
    padding-right: 0;
  }

  .fp-hero-seo-frame {
    min-height: 480px;
    width: calc(100% + min(16vw, 9rem));
    max-width: none;
    margin-left: min(-2rem, -3vw);
    margin-right: min(-4rem, -6vw);
  }

  .fp-hero-seo-screenshot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    transform: translateY(-40%);
  }
}

/* ── Bento grid ──────────────────────────────────────────────────── */
.rg-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.rg-tile--lead {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  border-radius: 14px !important;
}
/* Lead tile with full-width CTA row: match vertical rhythm to side padding (no extra row gap). */
.rg-tile--lead.rg-tile--lead--footer-cta {
  column-gap: 40px;
  row-gap: 0;
}
.rg-tile--half {
  grid-column: span 6;
  display: grid;
  grid-template-rows: 600px auto;
  gap: 0;
  border-radius: 14px !important;
}
/* Priority Queue tile only: its mock is shorter than the other half-tiles,
   so its canvas row can be tighter without leaving empty bg space. */
.rg-tile--half-compact {
  grid-template-rows: 420px auto;
}
.rg-tile--wide {
  grid-column: span 12;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  border-radius: 14px !important;
}
.rg-tile--dark {
  background: #0d1117 !important;
  border-color: #0d1117 !important;
}
.rg-tile--dark .rg-stage-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  mask-image:
    linear-gradient(to right, transparent, black 8%, black 92%, transparent),
    linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 8%, black 92%, transparent),
    linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  -webkit-mask-composite: source-in;
}
.rg-tile--dark .rg-stage-glow {
  opacity: 0.55;
  background: radial-gradient(
    ellipse 80% 70% at 50% 40%,
    var(--glow, rgba(110, 160, 255, 0.3)),
    transparent 70%
  );
}

/* ── Feature Hero Variants ────────────────────────────────────────── */
.rg-hero-bloom--gift {
  background: linear-gradient(165deg, #e8eef8 0%, #e2eaf5 48%, #dee6f2 100%) !important;
}

.rg-hero-container--gift {
  padding-bottom: 2.75rem;
}

@media (min-width: 768px) {
  .rg-hero-container--gift {
    padding-bottom: 7.5rem;
  }
}

.rg-hero-bloom--seo {
  background: linear-gradient(165deg, #e6eff9 0%, #dce9f6 48%, #d6e5f4 100%) !important;
}

.rg-hero-container--seo {
  padding-bottom: 2.75rem;
}

@media (min-width: 768px) {
  .rg-hero-container--seo {
    padding-bottom: 7.5rem;
  }
}

.rg-tile--hero-clean {
  grid-column: span 12;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: flex-start;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 981px) {
  .rg-tile--hero-clean {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important;
    gap: 60px !important;
    align-items: center !important;
  }
  .rg-tile--hero-clean--reversed {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
  }
  .rg-tile--hero-clean--reversed > *:first-child { order: 2; }
  .rg-tile--hero-clean--reversed > *:last-child  { order: 1; }
  .rg-tile--hero-clean--canvas-first {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
  }
}

.rg-tile--hero-clean--canvas-first {
  gap: 24px;
}

.rg-tile-canvas--primary-blue {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.rg-stage--primary-blue {
  background: #bfdbfe !important; /* Opaque Blue 200 */
  --glow: #3b82f6; /* Blue 500/600 */
}

/* Ensure children components (grid/glow) adopt dark colors on the light blue background */
.rg-tile-canvas--primary-blue .rg-stage-grid {
  background-image:
    linear-gradient(to right, rgba(13, 17, 23, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 17, 23, 0.09) 1px, transparent 1px) !important;
  mask-image:
    linear-gradient(to right, transparent, black 8%, black 92%, transparent),
    linear-gradient(to bottom, transparent, black 8%, black 92%, transparent) !important;
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 8%, black 92%, transparent),
    linear-gradient(to bottom, transparent, black 8%, black 92%, transparent) !important;
  -webkit-mask-composite: source-in;
}

.rg-tile-canvas--primary-blue .rg-stage-glow {
  opacity: 0.7 !important;
  background: radial-gradient(
    ellipse 80% 70% at 50% 40%,
    var(--glow),
    transparent 70%
  ) !important;
}

.rg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #2f6fed;
  margin-bottom: 0;
}
.rg-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: currentColor;
  animation: rg-eyebrow-pulse 2.4s ease-in-out infinite;
}
@keyframes rg-eyebrow-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.rg-eyebrow--refund {
  color: #ea580c;
}
.rg-eyebrow--invoice {
  color: #e11d48;
}
.rg-eyebrow--overrides {
  color: #2563eb;
}
.rg-eyebrow--green {
  color: #16a34a;
}
.rg-eyebrow--blue-light {
  color: #6ea0ff;
}

/* ── Image stage ─────────────────────────────────────────────────── */
.rg-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  isolation: isolate;
  background: var(--stage, #eef2ff);
  min-height: 280px;
}
.rg-tile--half .rg-stage {
  min-height: unset;
  height: 100%;
}

.rg-tile--hero-clean .rg-stage {
  min-height: unset;
}
.rg-stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(13, 17, 23, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 17, 23, 0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image:
    linear-gradient(to right, transparent, black 8%, black 92%, transparent),
    linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black 8%, black 92%, transparent),
    linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  -webkit-mask-composite: source-in;
  z-index: 0;
}
.rg-stage-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 30%,
    var(--glow, #c7d2fe),
    transparent 70%
  );
  opacity: 0.7;
  z-index: 0;
}
.rg-stage img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  border-radius: 8px;
  filter: drop-shadow(0 18px 30px rgba(13, 17, 23, 0.18))
    drop-shadow(0 4px 10px rgba(13, 17, 23, 0.08));
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.35s ease;
  will-change: transform;
}
.rg-stage:hover img {
  transform: perspective(900px) rotateY(-5deg) rotateX(3deg) scale(1.02);
  filter: drop-shadow(0 22px 34px rgba(13, 17, 23, 0.22))
    drop-shadow(0 5px 12px rgba(13, 17, 23, 0.1));
}

/* ==========================================================================
   Feature-page hero — screenshot absolutely positioned, left bleed + wave overlap
   ========================================================================== */

/* Mobile: static, centered below the text/buttons */
.fp-hero-feat-img-abs {
  display: block;
  text-align: center;
  line-height: 0;
}

/* Desktop: absolutely positioned, right bleed + wave overlap */
@media (min-width: 992px) {
  .fp-hero-feat-img-abs {
    position: absolute;
    padding: 0;
    text-align: left;
    /* Below ~1736px: bleed 6vw past the right edge for a lively crop.
       Above ~1736px: track the container so the image stays ~20px from the
       text column rather than drifting further right as the viewport grows. */
    right: max(-6vw, calc(50% - 972px));
    /* Vertically: from ~8% of section height down to 55px past section bottom
       (wave overlay is 110px tall — this lands roughly mid-wave) */
    top: 6%;
    bottom: -55px;
    /* Wide enough to fill the right ~55% of the viewport; capped so it never walks into the text column on ultra-wide screens */
    width: 62vw;
    max-width: 1050px;
    /* Higher than fp-hero-home-inner (z-index: 3) so the full image receives pointer events */
    z-index: 4;
    pointer-events: auto;
  }
}

.fp-hero-feat-img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 24px 48px rgba(13, 17, 23, 0.36))
    drop-shadow(0 6px 16px rgba(13, 17, 23, 0.18));
}

@media (min-width: 992px) {
  .fp-hero-feat-img {
    display: block;
    width: 100%;
    max-width: 1056px;
  }
}


@media (max-width: 980px) {
  .rg-bento {
    grid-template-columns: 1fr;
  }
  .rg-tile--lead,
  .rg-tile--half,
  .rg-tile--wide {
    grid-column: 1 / -1;
  }
  .rg-tile--lead,
  .rg-tile--wide {
    grid-template-columns: 1fr;
  }
  .rg-tile--half {
    grid-template-rows: auto auto;
  }
  .rg-tile--half .rg-stage {
    min-height: 260px;
    height: auto;
  }
}

/* ==========================================================================
   Comparison Section — Side-by-Side Competitor Comparison
   ========================================================================== */

.comparison {
  background-color: rgba(8, 20, 40, 0.96) !important;
  color: #fff;
}

.comparison .section-title {
  color: #fff;
}

/* Boolean cell icons (rendered as premium modern badges) */
.comparison__yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(40, 200, 64, 0.12);
  color: #28c840;
  font-size: 1.15rem;
  border: 1px solid rgba(40, 200, 64, 0.35);
}

.comparison__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.35);
  font-size: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.comparison__partial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(254, 188, 46, 0.12);
  color: #febc2e;
  font-size: 1.15rem;
  border: 1px solid rgba(254, 188, 46, 0.35);
}

/* --- Desktop table ------------------------------------------------------ */
.comparison__table {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.comparison__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.comparison__grid th,
.comparison__grid td {
  padding: 1.25rem 1.75rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease;
}

.comparison__grid thead th {
  font-weight: 600;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.comparison__grid tbody tr:hover td:not(.comparison__cell--us),
.comparison__grid tbody tr:hover th:not(.comparison__rowhead) {
  background: rgba(255, 255, 255, 0.02);
}

.comparison__grid tbody tr:last-child th,
.comparison__grid tbody tr:last-child td {
  border-bottom: none;
}

.comparison__rowhead {
  text-align: left !important;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  width: 32%;
}

.comparison__rowhead-note {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  font-style: italic;
}

.comparison__col {
  width: 17%;
}

/* The highlighted "Us" column — a brand-tinted panel running down the table */
.comparison__col--us {
  color: #fff !important;
  font-weight: 700 !important;
}

.comparison__cell--us,
.comparison__grid thead .comparison__col--us {
  background: rgba(13, 110, 253, 0.12) !important;
  color: #fff;
  font-weight: 700;
}

.comparison__grid thead .comparison__col--us {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  box-shadow: inset 1px 1px 0 rgba(13, 110, 253, 0.5),
              inset -1px 0 0 rgba(13, 110, 253, 0.5);
  border-bottom: 1px solid rgba(13, 110, 253, 0.2) !important;
}

.comparison__grid tbody tr:last-child .comparison__cell--us {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.comparison__cell--us {
  border-bottom-color: rgba(13, 110, 253, 0.2) !important;
  box-shadow: inset 1px 0 0 rgba(13, 110, 253, 0.5),
              inset -1px 0 0 rgba(13, 110, 253, 0.5);
}

.comparison__grid tbody tr:last-child .comparison__cell--us {
  box-shadow: inset 1px 0 0 rgba(13, 110, 253, 0.5),
              inset -1px 0 0 rgba(13, 110, 253, 0.5),
              inset 0 -1px 0 rgba(13, 110, 253, 0.5);
}

/* --- Mobile stacked cards ----------------------------------------------- */
.comparison__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comparison__card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 1.25rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.comparison__card-feature {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.comparison__card-rows {
  margin: 0;
}

.comparison__card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.comparison__card-row dt {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.comparison__card-row dd {
  margin: 0;
  font-weight: 600;
}

.comparison__card-row--us dt {
  color: #fff;
  font-weight: 600;
}

.comparison__card-row--us dd {
  color: #fff;
  font-weight: 600;
}

/* --- Economics table: emphasize the dollar figures ---------------------- */
.comparison__table--economics .comparison__cell {
  font-size: 1.15rem;
  font-weight: 600;
}

/* Info icon on economics column headers — popover reveals the fee math */
.comparison__col-info {
  margin-left: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.45);
  vertical-align: middle;
  transition: color 0.2s ease;
}

.comparison__col-info:hover,
.comparison__col-info:focus {
  color: rgba(255, 255, 255, 0.85);
}

/* Inline fee-math note under each platform name in the mobile economics cards */
.comparison__card-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Comparison auto-rotating tabs (see auto_tabs_controller.js)
   ========================================================================== */

/* Tab nav — full-width underline-style tab bar */
.comparison-tabs__nav {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-tabs__tab {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.comparison-tabs__tab:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}

.comparison-tabs__tab:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.7);
  outline-offset: -2px;
}

.comparison-tabs__tab.is-active {
  color: #fff;
}

/* Progress bar doubles as the active underline indicator */
.comparison-tabs__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #0d6efd, #5b9dff);
  border-radius: 0;
}

.comparison-tabs__tab.is-active .comparison-tabs__progress {
  animation: comparison-progress var(--auto-tabs-interval, 8s) linear forwards;
}

.comparison-rotator.is-paused .comparison-tabs__tab.is-active .comparison-tabs__progress {
  animation-play-state: paused;
}

/* Once the user clicks a tab, show a solid underline on the active tab */
.comparison-rotator.is-stopped .comparison-tabs__tab.is-active .comparison-tabs__progress {
  animation: none;
  width: 100%;
}

.comparison-rotator.is-stopped .comparison-tabs__tab:not(.is-active) .comparison-tabs__progress {
  animation: none;
  width: 0;
}

@keyframes comparison-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* Panels — only the active one is visible; container height eases between
   the differently sized tables. */
.comparison-tabs__panels {
  position: relative;
  transition: height 0.45s ease;
}

.comparison-tabs__panel {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.comparison-tabs__panel.is-active {
  position: relative;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .comparison-tabs__panels { transition: none; }
  .comparison-tabs__panel {
    transform: none;
    transition: none;
  }
  .comparison-tabs__tab.is-active .comparison-tabs__progress {
    animation: none;
  }
}

/* "Your Savings" results tab — hidden until the inline calculator runs */
.comparison-tabs__tab.is-hidden {
  display: none;
}

.comparison-tabs__panel--savings {
  padding: 0.25rem 0 0.5rem;
}

/* Loader / results sub-views inside the savings panel toggle via .is-active.
   Capped + centered so the cost cards don't stretch to the full table width. */
.fee-calc-savings__loader,
.fee-calc-savings__results {
  display: none;
  max-width: 640px;
  margin: 0 auto;
}

.fee-calc-savings__loader.is-active,
.fee-calc-savings__results.is-active {
  display: block;
}

/* The reused modal loader is sized for a full modal; shrink it inline so the
   panel grows convincingly from loader to results. */
.comparison-tabs__panel--savings .fee-calc-modal__loader {
  min-height: 240px;
}

/* ==========================================================================
   Gem divider — glowing line + rotated diamond gem.
   Reused on both the dark comparison section and between light sections.
   ========================================================================== */

.gem-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0;
}

.gem-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(13, 110, 253, 0.15) 15%,
    rgba(13, 110, 253, 0.55) 40%,
    rgba(59, 130, 246, 0.75) 50%,
    rgba(13, 110, 253, 0.55) 60%,
    rgba(13, 110, 253, 0.15) 85%,
    transparent 100%
  );
}

.gem-divider__gem {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #5b9dff 0%, #0d6efd 100%);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow:
    0 0 0 4px rgba(13, 110, 253, 0.1),
    0 0 18px rgba(13, 110, 253, 0.65),
    0 0 36px rgba(13, 110, 253, 0.2);
}

/* ==========================================================================
   Homepage Features Compact Grid
   ========================================================================== */

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.fp-feature-card-compact {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease-in-out;
}

.fp-feature-card-compact:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(13, 110, 253, 0.06);
  border-color: rgba(13, 110, 253, 0.25) !important;
}

a.fp-feature-card-compact--linked {
  color: inherit;
}

a.fp-feature-card-compact--linked:hover {
  color: inherit;
}

.fp-feature-card-compact:not(.fp-feature-card-compact--linked) {
  cursor: default;
}

.fp-feature-card-compact__cta {
  align-self: flex-start;
}

@media (max-width: 767.98px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .fp-feature-card-compact--linked .fp-feature-card-compact__body {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .fp-feature-card-compact--linked .fp-feature-card-compact__header {
    justify-content: flex-start;
    margin-bottom: 0.25rem !important;
    gap: 0.4rem;
  }

  .fp-feature-card-compact--linked .fp-feature-card-compact__title {
    font-size: 0.8125rem;
    text-align: left;
    line-height: 1.25;
  }

  .fp-feature-card-compact--linked .fp-icon-circle-light-compact {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }

  .fp-feature-card-compact--linked .fp-feature-card-compact__cta {
    align-self: center;
    margin-top: 0 !important;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .fp-feature-card-compact--linked:hover {
    transform: none;
  }
}

@media (min-width: 768px) {
  .fp-feature-card-compact__body {
    text-align: left;
  }
}

.fp-icon-circle-light-compact {
  width: 40px;
  height: 40px;
  background: rgba(13, 110, 253, 0.06);
  font-size: 1.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ==========================================================================
   Fee Calculator Inline Form — under comparison tables
   ========================================================================== */

.fee-calc-inline {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.fee-calc-inline__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.fee-calc-inline__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.fee-calc-inline__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.fee-calc-inline__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.fee-calc-inline__input-prefix {
  position: absolute;
  left: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  pointer-events: none;
  font-size: 0.95rem;
}

.fee-calc-inline__input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -moz-appearance: textfield;
}

.fee-calc-inline__input::-webkit-inner-spin-button,
.fee-calc-inline__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fee-calc-inline__input--currency {
  padding-left: 1.75rem;
}

.fee-calc-inline__input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
}

.fee-calc-inline__input:focus {
  border-color: rgba(13, 110, 253, 0.6);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.fee-calc-inline__revenue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.65rem 1rem;
  background: rgba(13, 110, 253, 0.12);
  border: 1px solid rgba(13, 110, 253, 0.5);
  border-radius: 0.5rem;
  white-space: nowrap;
}

.fee-calc-inline__revenue-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}

.fee-calc-inline__revenue-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.fee-calc-inline__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(13, 110, 253, 0.35);
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.12);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  animation: fee-calc-trigger-glow 3s ease-in-out infinite;
}

.fee-calc-inline__btn:hover:not(:disabled) {
  background: rgba(13, 110, 253, 0.22);
  border-color: rgba(13, 110, 253, 0.6);
  box-shadow: 0 0 24px rgba(13, 110, 253, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  animation: none;
}

.fee-calc-inline__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  animation: none;
}

.fee-calc-inline__revenue {
  flex-direction: row;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
}

.fee-calc-inline__btn {
  width: 100%;
  padding: 0.85rem 1.5rem;
}

@media (min-width: 768px) {
  /* Desktop: the three inputs share one row, then the revenue readout and
     the Calculate button stack full-width beneath them. */
  .fee-calc-inline__form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 0.85rem;
  }

  .fee-calc-inline__revenue,
  .fee-calc-inline__btn {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Fee Calculator Modal — Custom savings calculator (dark glassmorphism)
   ========================================================================== */

/* ── Trigger button ──────────────────────────────────────────────────── */

.fee-calc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 2rem;
  border: 1px solid rgba(13, 110, 253, 0.35);
  border-radius: 999px;
  background: rgba(13, 110, 253, 0.08);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
  animation: fee-calc-trigger-glow 3s ease-in-out infinite;
}

.fee-calc-trigger:hover {
  background: rgba(13, 110, 253, 0.18);
  border-color: rgba(13, 110, 253, 0.6);
  box-shadow: 0 0 24px rgba(13, 110, 253, 0.25), 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  animation: none;
}

.fee-calc-trigger:active {
  transform: translateY(0);
}

.fee-calc-trigger i:last-child {
  transition: transform 0.2s ease;
}

.fee-calc-trigger:hover i:last-child {
  transform: translateX(3px);
}

@keyframes fee-calc-trigger-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(13, 110, 253, 0); }
  50%      { box-shadow: 0 0 20px rgba(13, 110, 253, 0.2); }
}

/* ── Modal overlay ───────────────────────────────────────────────────── */

.fee-calc-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.fee-calc-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

.fee-calc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Panel ────────────────────────────────────────────────────────────── */

.fee-calc-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: linear-gradient(160deg, rgba(22, 30, 52, 0.96), rgba(10, 15, 28, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5),
              0 0 60px rgba(13, 110, 253, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fee-calc-modal.is-open .fee-calc-modal__panel {
  transform: scale(1);
}

.fee-calc-modal__panel::-webkit-scrollbar {
  display: none;
}

/* ── Close button ─────────────────────────────────────────────────────── */

.fee-calc-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fee-calc-modal__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Views (state containers) ─────────────────────────────────────────── */

.fee-calc-modal__view {
  display: none;
  padding: 2.5rem;
}

.fee-calc-modal__view.is-active {
  display: block;
  animation: fee-calc-fade-in 0.35s ease both;
}

@keyframes fee-calc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Header ───────────────────────────────────────────────────────────── */

.fee-calc-modal__header {
  text-align: center;
  margin-bottom: 1.25rem;
}

.fee-calc-modal__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
}

.fee-calc-modal__subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Input form ───────────────────────────────────────────────────────── */

.fee-calc-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.fee-calc-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.fee-calc-modal__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

.fee-calc-modal__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.fee-calc-modal__input-prefix {
  position: absolute;
  left: 1rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  pointer-events: none;
  font-size: 1rem;
}

.fee-calc-modal__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  -moz-appearance: textfield;
}

.fee-calc-modal__input::-webkit-inner-spin-button,
.fee-calc-modal__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fee-calc-modal__input--currency {
  padding-left: 2rem;
}

.fee-calc-modal__input::placeholder {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 400;
}

.fee-calc-modal__input:focus {
  border-color: rgba(13, 110, 253, 0.6);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

/* Revenue live counter */

.fee-calc-modal__revenue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
  background: rgba(13, 110, 253, 0.06);
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 0.625rem;
}

.fee-calc-modal__revenue-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.fee-calc-modal__revenue-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Calculate button */

.fee-calc-modal__btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 0.625rem;
  background: #0d6efd;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fee-calc-modal__btn-primary:hover:not(:disabled) {
  background: #0b5ed7;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.35);
  transform: translateY(-1px);
}

.fee-calc-modal__btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Loader ────────────────────────────────────────────────────────────── */

.fee-calc-modal__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 545px;
  gap: 2rem;
  padding: 2rem 0;
}

.fee-calc-modal__loader-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 64px;
}

.fee-calc-modal__loader-bar {
  width: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, #0d6efd, #5b9dff);
  animation: fee-calc-bar-pulse 1s ease-in-out infinite;
}

.fee-calc-modal__loader-bar:nth-child(1) { height: 28px; animation-delay: 0s; }
.fee-calc-modal__loader-bar:nth-child(2) { height: 44px; animation-delay: 0.15s; }
.fee-calc-modal__loader-bar:nth-child(3) { height: 60px; animation-delay: 0.3s; }
.fee-calc-modal__loader-bar:nth-child(4) { height: 36px; animation-delay: 0.45s; }
.fee-calc-modal__loader-bar:nth-child(5) { height: 50px; animation-delay: 0.6s; }

@keyframes fee-calc-bar-pulse {
  0%, 100% { transform: scaleY(0.5); opacity: 0.4; }
  50%      { transform: scaleY(1); opacity: 1; }
}

.fee-calc-modal__loader-text {
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
}

/* ── Results ───────────────────────────────────────────────────────────── */

.fee-calc-modal__results-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  margin-top: 0.5rem;
  background: rgba(13, 110, 253, 0.1);
  border: 1px solid rgba(13, 110, 253, 0.25);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b9dff;
}

.fee-calc-modal__cost-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fee-calc-modal__cost-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.625rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
  animation: fee-calc-card-in 0.4s ease both;
}

.fee-calc-modal__cost-card:nth-child(1) { animation-delay: 0.05s; }
.fee-calc-modal__cost-card:nth-child(2) { animation-delay: 0.15s; }
.fee-calc-modal__cost-card:nth-child(3) { animation-delay: 0.25s; }
.fee-calc-modal__cost-card:nth-child(4) { animation-delay: 0.35s; }

@keyframes fee-calc-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fee-calc-modal__cost-card:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
}

.fee-calc-modal__cost-card--us {
  background: linear-gradient(160deg, rgba(13, 110, 253, 0.16), rgba(13, 110, 253, 0.08));
  border-color: rgba(13, 110, 253, 0.3);
}

.fee-calc-modal__cost-card--us:hover {
  background: linear-gradient(160deg, rgba(13, 110, 253, 0.2), rgba(13, 110, 253, 0.1));
}

.fee-calc-modal__cost-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.fee-calc-modal__cost-card-note {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 1px;
}

.fee-calc-modal__cost-card-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.fee-calc-modal__cost-card-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.fee-calc-modal__cost-card--us .fee-calc-modal__cost-card-amount {
  color: #5b9dff;
}

.fee-calc-modal__savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  background: rgba(40, 200, 64, 0.1);
  border: 1px solid rgba(40, 200, 64, 0.25);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #28c840;
  white-space: nowrap;
}

.fee-calc-modal__savings-badge--negative {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.25);
  color: #ef4444;
}

/* ── Results actions ──────────────────────────────────────────────────── */

.fee-calc-modal__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.fee-calc-modal__btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.625rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}

.fee-calc-modal__btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.fee-calc-modal__btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1.5;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 0.625rem;
  background: #0d6efd;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  text-align: center;
}

.fee-calc-modal__btn-cta:hover {
  background: #0b5ed7;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.35);
  transform: translateY(-1px);
  color: #fff;
}

/* ── Mobile: bottom-sheet pattern ─────────────────────────────────────── */

@media (max-width: 575.98px) {
  .fee-calc-modal {
    align-items: flex-end;
    padding: 0;
  }

  .fee-calc-modal__panel {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 1.25rem 1.25rem 0 0;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fee-calc-modal.is-open .fee-calc-modal__panel {
    transform: translateY(0);
  }

  .fee-calc-modal__view {
    padding: 1.5rem 1.25rem;
  }

  .fee-calc-modal__header {
    margin-bottom: 1rem;
    text-align: center;
  }

  .fee-calc-modal__title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .fee-calc-modal__subtitle {
    font-size: 0.88rem;
    padding: 0 0.5rem;
  }

  .fee-calc-modal__results-badge,
  .fee-calc-modal__savings-badge {
    padding: 0 0.75rem;
    font-size: 0.75rem;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }

  .fee-calc-modal__results-badge {
    margin-top: 0;
  }

  .fee-calc-modal__cost-cards {
    gap: 0.6rem;
  }

  .fee-calc-modal__cost-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    gap: 0.75rem;
    border-radius: 0.75rem;
  }

  .fee-calc-modal__cost-card-name {
    font-size: 0.95rem;
  }

  .fee-calc-modal__cost-card-note {
    font-size: 0.72rem;
  }

  .fee-calc-modal__cost-card-right {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
  }

  .fee-calc-modal__cost-card-amount {
    font-size: 1.15rem;
  }

  .fee-calc-modal__actions {
    margin-top: 1.5rem;
    gap: 0.6rem;
  }

  .fee-calc-modal__actions {
    /* Removed flex-direction: column to keep buttons in one row */
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fee-calc-modal,
  .fee-calc-modal__panel,
  .fee-calc-modal__view.is-active,
  .fee-calc-modal__cost-card,
  .fee-calc-trigger {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Private Charters feature page — animated HTML mocks (pc-*)
   Mocks live inside .rg-stage; animations fire when the `reveal` Stimulus
   controller adds .is-visible to a revealed ancestor on scroll-in.
   transform/opacity only — cheap to composite alongside the luminary canvas.
   ========================================================================== */

@property --pc-total-n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --pc-guests {
  syntax: "<integer>";
  initial-value: 8;
  inherits: false;
}

/* Shared mock chrome ----------------------------------------------------- */
.pc-window,
.pc-widget,
.pc-queue,
.pc-invoice,
.pc-ops {
  position: relative;
  z-index: 1;
  font-family: inherit;
}

.pc-window {
  width: 100%;
  max-width: 480px;
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}
/* Hero mock now lives in a stage like the bento mocks (no browser chrome).
   The stage itself stays transparent so the hero photo shows through behind
   it; only the card gets a frosted-glass surface for readability. */
.pc-hero-stage {
  width: 100%;
  max-width: 540px;
  --stage: transparent;
  min-height: 500px;
  padding: 12px 26px;
  background: transparent;
}
.pc-hero-window {
  position: relative;
  background: #fff;
  border: 1px solid rgba(13, 17, 23, 0.06);
  box-shadow: 0 24px 48px rgba(13, 17, 23, 0.22), 0 6px 16px rgba(13, 17, 23, 0.1);
}
.is-visible .pc-window {
  animation: pc-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.pc-window-body {
  position: relative;
  padding: 20px;
}

/* Hero mock: shows one charter's full lifecycle already resolved — status,
   payment, crew, and itinerary all in place — so the feature reads at a
   glance instead of building up from an empty card. */
.pc-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pc-charter-title {
  font-size: 19px;
  font-weight: 700;
  color: #0d1117;
  letter-spacing: -0.01em;
}
.pc-charter-sub {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(13, 17, 23, 0.55);
}
.pc-charter-status {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  min-width: 112px;
  height: 23px;
}
.pc-status-step {
  position: absolute;
  inset: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(3px) scale(0.95);
}
.pc-status-step--pending { color: #d97706; background: rgba(217, 119, 6, 0.14); border: 1px solid rgba(217, 119, 6, 0.3); }
.pc-status-step--confirmed { color: #2563eb; background: rgba(37, 99, 235, 0.14); border: 1px solid rgba(37, 99, 235, 0.3); }
.pc-status-step--deposit { color: #7c3aed; background: rgba(124, 58, 237, 0.14); border: 1px solid rgba(124, 58, 237, 0.3); }
.pc-status-step--balance { color: #0891b2; background: rgba(8, 145, 178, 0.14); border: 1px solid rgba(8, 145, 178, 0.3); }
.pc-status-step--done { color: #16a34a; background: rgba(22, 163, 74, 0.14); border: 1px solid rgba(22, 163, 74, 0.3); }
/* Badge tells the story in order, then holds on "Completed" before resetting. */
.is-visible .pc-status-step--pending { animation: pc-hbadge-1 14s ease infinite; }
.is-visible .pc-status-step--confirmed { animation: pc-hbadge-2 14s ease infinite; }
.is-visible .pc-status-step--deposit { animation: pc-hbadge-3 14s ease infinite; }
.is-visible .pc-status-step--balance { animation: pc-hbadge-4 14s ease infinite; }
.is-visible .pc-status-step--done { animation: pc-hbadge-5 14s ease infinite; }
.pc-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 17, 23, 0.08);
}
.pc-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(13, 17, 23, 0.7);
}
.pc-hero-meta i { color: #2563eb; }
.pc-hero-paid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #34d399 !important;
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.34);
  opacity: 0;
  transform: scale(0.85);
}
.pc-hero-paid i { color: #34d399 !important; }
.is-visible .pc-hero-paid { animation: pc-hero-paid 14s ease infinite; }
.pc-feed {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}
/* Rows 2-6 collapse to zero height until their beat in the story loop, then
   grow open + fade in. The card itself shortens/grows with them — no dead
   white space reserved up front — while the stage around it stays a fixed
   size so nothing outside the card shifts. */
.pc-feed-row {
  --lit: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: calc(var(--lit) * 8px);
  max-height: calc(var(--lit) * 45px);
  padding: calc(var(--lit) * 9px) 11px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, rgba(37, 99, 235, 0.1) calc(var(--lit) * 100%), rgba(13, 17, 23, 0.035));
  border: 1px solid color-mix(in srgb, rgba(37, 99, 235, 0.28) calc(var(--lit) * 100%), rgba(13, 17, 23, 0.07));
  opacity: var(--lit);
}
.pc-feed-row--always { --lit: 1; }
.is-visible .pc-feed-row--always { animation: pc-feed-sweep 0.5s ease 0.05s both; }
.is-visible .pc-feed-row[data-step="2"] { animation: pc-row-lit-2 14s ease infinite; }
.is-visible .pc-feed-row[data-step="3"] { animation: pc-row-lit-3 14s ease infinite; }
.is-visible .pc-feed-row[data-step="4"] { animation: pc-row-lit-4 14s ease infinite; }
.is-visible .pc-feed-row[data-step="5"] { animation: pc-row-lit-5 14s ease infinite; }
.is-visible .pc-feed-row[data-step="6"] { animation: pc-row-lit-6 14s ease infinite; }
.pc-feed-icon {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
}
.pc-feed-icon--green { color: #28c840; background: rgba(40, 200, 64, 0.16); }
.pc-feed-icon--orange { color: #fb923c; background: rgba(251, 146, 60, 0.16); }
.pc-feed-icon--teal { color: #34d399; background: rgba(52, 211, 153, 0.16); }
.pc-feed-text {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(13, 17, 23, 0.82);
  letter-spacing: -0.01em;
}
.pc-feed-check {
  flex-shrink: 0;
  font-size: 14px;
  color: #28c840;
  opacity: var(--lit);
  transform: scale(calc(0.4 + var(--lit) * 0.6));
}

/* Embeddable booking widget --------------------------------------------- */
.pc-widget {
  width: 100%;
  max-width: 340px;
  min-height: 258px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(8, 16, 32, 0.4);
  border: 1px solid rgba(13, 17, 23, 0.06);
  position: relative;
  overflow: hidden;
}
.pc-widget-form {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.is-visible .pc-widget-form {
  animation: pc-form-fade 10s ease infinite;
}
.pc-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #0d1117;
  margin-bottom: 16px;
}
.pc-widget-head i { color: #2563eb; }
.pc-field { margin-bottom: 13px; }
.pc-field label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 5px;
}
.pc-input {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 13px;
  color: #0d1117;
}
.pc-input i { color: #2563eb; font-size: 13px; }

/* Typing simulation */
.pc-name-val,
.pc-lastname-val,
.pc-email-val,
.pc-phone-val,
.pc-date-val,
.pc-time-val,
.pc-party-val {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  vertical-align: bottom;
  line-height: 1.2;
}

.is-visible .pc-name-val {
  animation: pc-type-name 10s linear infinite;
}
.is-visible .pc-lastname-val {
  animation: pc-type-lastname 10s linear infinite;
}
.is-visible .pc-email-val {
  animation: pc-type-email 10s linear infinite;
}
.is-visible .pc-phone-val {
  animation: pc-type-phone 10s linear infinite;
}
.is-visible .pc-date-val {
  animation: pc-fill-date 10s linear infinite;
}
.is-visible .pc-time-val {
  animation: pc-fill-time 10s linear infinite;
}
.is-visible .pc-party-val {
  animation: pc-fill-party 10s linear infinite;
}

.pc-submit {
  margin-top: 12px;
  padding: 11px;
  border-radius: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: #2563eb;
  cursor: pointer;
}
.is-visible .pc-submit {
  animation: pc-submit-click 10s infinite;
}

.pc-widget-success {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  background: #fff;
}
.is-visible .pc-widget-success {
  animation: pc-success-fade 10s ease infinite;
}

/* Status pipeline -------------------------------------------------------- */
/* Each stage's lit state is a single inherited number (--lit, 0→1) that drives
   dot fill, check, and label together. Every stage shares one reset window, so
   the loop resets all stages at the same instant — never half-checked. */
@property --lit {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
/* Priority queue: several charters at different real stages, with the
   top (most urgent) row getting confirmed live and auto-emailing the guest —
   shows the actual "what needs attention" value, not just one linear list. */
.pc-queue {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(13, 17, 23, 0.16);
  border: 1px solid rgba(13, 17, 23, 0.06);
}
.pc-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(13, 17, 23, 0.07);
}
.pc-queue-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #0d1117;
}
.pc-queue-title i { color: #ea580c; }
.pc-queue-count {
  font-size: 10px;
  font-weight: 700;
  color: #6c757d;
  background: rgba(13, 17, 23, 0.05);
  border-radius: 999px;
  padding: 3px 9px;
}
.pc-queue-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  flex-wrap: wrap;
}
.pc-queue-row--urgent {
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.3);
}
.pc-queue-row--done { opacity: 0.6; }
.pc-queue-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.pc-queue-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0d1117;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-queue-sub {
  font-size: 10.5px;
  color: #6c757d;
}
/* Fixed slot for the urgent row so Reviewed → Confirmed crossfades in place
   instead of shifting layout; other rows just hold one static status here. */
.pc-queue-status-wrap {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 80px;
  height: 21px;
}
.pc-queue-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.pc-queue-status-wrap .pc-queue-status {
  position: absolute;
  inset: 0 0 0 auto;
}
.pc-queue-status--reviewed { color: #d97706; background: rgba(217, 119, 6, 0.12); }
.pc-queue-status--confirmed { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
.pc-queue-status--deposit { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
.pc-queue-status--balance { color: #7c3aed; background: rgba(124, 58, 237, 0.12); }
.pc-queue-status--completed { color: #16a34a; background: rgba(22, 163, 74, 0.12); }
/* Urgent row: status crossfades reviewed → confirmed, the action pill pulses
   then disappears, and a "guest emailed" tag pops in to close the loop. */
.pc-queue-row--urgent .pc-queue-status--confirmed,
.pc-queue-row--urgent .pc-queue-action,
.pc-queue-row--urgent .pc-queue-emailed {
  opacity: 0;
}
/* Action slot: "Confirm now" and "Guest emailed" share one fixed-height
   row and crossfade in place so the layout never shifts between states. */
.pc-queue-action-slot {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
}
.pc-queue-action {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: #2563eb;
  border-radius: 999px;
  padding: 5px 11px;
}
.pc-queue-emailed {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #16a34a;
}
.is-visible .pc-queue-row--urgent .pc-queue-status--reviewed { animation: pc-queue-reviewed 8s ease infinite; }
.is-visible .pc-queue-row--urgent .pc-queue-status--confirmed { animation: pc-queue-confirmed 8s ease infinite; }
.is-visible .pc-queue-row--urgent .pc-queue-action { animation: pc-queue-action 8s ease infinite; }
.is-visible .pc-queue-row--urgent .pc-queue-emailed { animation: pc-queue-emailed 8s ease infinite; }

/* Quote → invoice → paid ------------------------------------------------- */
.pc-invoice {
  width: 100%;
  max-width: 340px;
  padding: 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(13, 17, 23, 0.18);
  border: 1px solid rgba(13, 17, 23, 0.06);
  overflow: hidden;
}
.pc-invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 15px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eef2f7;
}
.pc-invoice-title { display: block; font-size: 15px; font-weight: 800; color: #0d1117; }
.pc-invoice-sub { display: block; margin-top: 3px; font-size: 11.5px; color: #94a3b8; }
.pc-invoice-amount { font-size: 19px; font-weight: 800; color: #16a34a; letter-spacing: -0.01em; white-space: nowrap; }
.pc-invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 13.5px;
  color: #334155;
}
.pc-invoice-row span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pc-invoice-row i:first-child { color: #64748b; }
.pc-invoice-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.pc-invoice-status i {
  color: #16a34a;
  opacity: 0;
  transform: scale(0.4);
}
.is-visible .pc-invoice-row--deposit .pc-invoice-status i {
  animation: pc-deposit-check 8s ease infinite;
}
.is-visible .pc-invoice-row--balance .pc-invoice-status i {
  animation: pc-balance-check 8s ease infinite;
}
/* Action slot: "Send invoice" and "Paid in full" share one spot inside the
   card and cross-fade in place — the paid state never slides in from outside. */
.pc-invoice-action {
  position: relative;
  height: 46px;
  margin-top: 16px;
}
.pc-pay-btn,
.pc-paid-badge {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  color: #fff;
}
.pc-pay-btn {
  font-size: 13.5px;
  background: #2563eb;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
}
.is-visible .pc-pay-btn { animation: pc-pay-click 8s ease infinite; }
.pc-paid-badge {
  font-size: 14px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.32);
  opacity: 0;
  transform: scale(0.92);
}
.is-visible .pc-paid-badge {
  animation: pc-paid-swap 8s ease infinite;
}

/* Crew + waivers + itinerary -------------------------------------------- */
/* Everything lives in one white card: crew slots fill the day, then the
   confirm pills expand out below them inside the same card. */
.pc-ops {
  width: 100%;
  max-width: 330px;
}
.pc-ops-day {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 34px rgba(13, 17, 23, 0.16);
  border: 1px solid rgba(13, 17, 23, 0.06);
  padding: 16px;
}
.pc-ops-day-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ea580c;
  margin-bottom: 11px;
}
.pc-ops-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 11px;
  margin-bottom: 4px;
  border-bottom: 1px dashed transparent;
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}
/* Divider only appears once the first crew slot (Captain) lands below it. */
.is-visible .pc-ops-guest { animation: pc-ops-guest-divider 8s ease infinite; }
.pc-ops-guest i { color: #ea580c; margin-right: 5px; }
.pc-ops-party {
  font-size: 11px;
  font-weight: 700;
  color: #9a3412;
  white-space: nowrap;
}
/* Crew slots grow in as they're assigned — no reserved blank rows. */
.pc-crew-slot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  margin-top: 0;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 12.5px;
  font-weight: 600;
  color: #7c2d12;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateX(-14px);
}
.is-visible .pc-crew-slot:nth-of-type(1) { animation: pc-crew-0 8s ease infinite; }
.is-visible .pc-crew-slot:nth-of-type(2) { animation: pc-crew-1 8s ease infinite; }
.is-visible .pc-crew-slot:nth-of-type(3) { animation: pc-crew-2 8s ease infinite; }
.pc-crew-role {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9a3412;
  background: #ffedd5;
  padding: 2px 7px;
  border-radius: 999px;
}
.pc-avatar {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: #fb923c;
}
.pc-avatar--cap { background: #ea580c; }
.pc-ops-confirms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(241, 227, 214, 0);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}
.is-visible .pc-ops-confirms {
  animation: pc-confirms-loop 8s ease infinite;
}
.pc-confirm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.28);
  transform-origin: left center;
  opacity: 0;
  transform: scaleX(0.4);
}
.is-visible .pc-confirm-pill:nth-of-type(1) { animation: pc-cpill-0 8s ease infinite; }
.is-visible .pc-confirm-pill:nth-of-type(2) { animation: pc-cpill-1 8s ease infinite; }
.is-visible .pc-confirm-pill:nth-of-type(3) { animation: pc-cpill-2 8s ease infinite; }

/* Keyframes -------------------------------------------------------------- */
/* One-time entrance (containers) */
@keyframes pc-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Hero reveal — the full event feed is already built; rows just sweep in
   with a short stagger once on scroll-in instead of accumulating in a loop. */
@keyframes pc-feed-sweep {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Hero story loop (14s): status badge advances through the real lifecycle
   while each feed row checks off in order. Nothing collapses or empties —
   only the badge and checkmarks animate, so the card holds its shape. */
@keyframes pc-hbadge-1 {
  0% { opacity: 0; transform: translateY(3px) scale(0.95); }
  2%, 12% { opacity: 1; transform: translateY(0) scale(1); }
  14%, 100% { opacity: 0; transform: translateY(-3px) scale(0.95); }
}
@keyframes pc-hbadge-2 {
  0%, 13% { opacity: 0; transform: translateY(3px) scale(0.95); }
  16%, 30% { opacity: 1; transform: translateY(0) scale(1); }
  32%, 100% { opacity: 0; transform: translateY(-3px) scale(0.95); }
}
@keyframes pc-hbadge-3 {
  0%, 31% { opacity: 0; transform: translateY(3px) scale(0.95); }
  34%, 46% { opacity: 1; transform: translateY(0) scale(1); }
  48%, 100% { opacity: 0; transform: translateY(-3px) scale(0.95); }
}
@keyframes pc-hbadge-4 {
  0%, 47% { opacity: 0; transform: translateY(3px) scale(0.95); }
  50%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateY(-3px) scale(0.95); }
}
@keyframes pc-hbadge-5 {
  0%, 79% { opacity: 0; transform: translateY(3px) scale(0.95); }
  82%, 98% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-3px) scale(0.95); }
}
@keyframes pc-hero-paid {
  0%, 49% { opacity: 0; transform: scale(0.85); }
  52% { opacity: 1; transform: scale(1.08); }
  55%, 98% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}
/* Rows close in the same order they opened, staggered across the final
   stretch of the loop, so the card folds shut as a cascade instead of all
   five rows slamming closed together in the last instant before it resets. */
@keyframes pc-row-lit-2 {
  0%, 15% { --lit: 0; }
  17%, 93% { --lit: 1; }
  95%, 100% { --lit: 0; }
}
@keyframes pc-row-lit-3 {
  0%, 33% { --lit: 0; }
  35%, 94% { --lit: 1; }
  96%, 100% { --lit: 0; }
}
@keyframes pc-row-lit-4 {
  0%, 49% { --lit: 0; }
  51%, 95% { --lit: 1; }
  97%, 100% { --lit: 0; }
}
@keyframes pc-row-lit-5 {
  0%, 65% { --lit: 0; }
  67%, 95.5% { --lit: 1; }
  97.5%, 100% { --lit: 0; }
}
@keyframes pc-row-lit-6 {
  0%, 75% { --lit: 0; }
  77%, 96% { --lit: 1; }
  98%, 100% { --lit: 0; }
}

/* Widget loop (10s): type name → type email → select date → select guests → submit click → success fade → reset */
@keyframes pc-type-name {
  0%, 2% { width: 0; animation-timing-function: steps(4, end); }
  10%, 80% { width: 4ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-type-lastname {
  0%, 12% { width: 0; animation-timing-function: steps(3, end); }
  20%, 80% { width: 3ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-type-email {
  0%, 22% { width: 0; animation-timing-function: steps(16, end); }
  40%, 80% { width: 16ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-type-phone {
  0%, 42% { width: 0; animation-timing-function: steps(14, end); }
  58%, 80% { width: 14ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-fill-date {
  0%, 60% { width: 0; animation-timing-function: steps(6, end); }
  66%, 80% { width: 6ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-fill-time {
  0%, 66% { width: 0; animation-timing-function: steps(7, end); }
  72%, 80% { width: 7ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-fill-party {
  0%, 72% { width: 0; animation-timing-function: steps(2, end); }
  75%, 80% { width: 2ch; }
  85%, 100% { width: 0; }
}
@keyframes pc-submit-click {
  0%, 73% { background: #2563eb; transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  76% { background: #1d4ed8; transform: scale(0.97); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4); }
  79%, 100% { background: #2563eb; transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes pc-form-fade {
  0%, 79% { opacity: 1; transform: scale(1); }
  82%, 94% { opacity: 0; transform: scale(0.95); }
  97%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes pc-success-fade {
  0%, 79% { opacity: 0; transform: scale(0.95); }
  82%, 94% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.95); }
}

/* Pipeline: fill descends once, stages light in source order and hold, then
   every stage + fill + callout reset together at 92% — one clean cycle. */
/* Priority queue loop (8s): top row sits reviewed with a pulsing "Confirm
   now" action, then flips to confirmed and shows the guest got emailed. */
@keyframes pc-queue-reviewed {
  0%, 35% { opacity: 1; }
  38%, 92% { opacity: 0; }
  98%, 100% { opacity: 1; }
}
@keyframes pc-queue-confirmed {
  0%, 35% { opacity: 0; }
  38%, 92% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes pc-queue-action {
  0%, 32% { opacity: 1; transform: scale(1); background: #2563eb; box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
  35% { opacity: 1; transform: scale(0.95); background: #1d4ed8; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4); }
  38% { opacity: 0; transform: scale(0.95); }
  42%, 92% { opacity: 0; transform: scale(1); }
  98%, 100% { opacity: 1; transform: scale(1); background: #2563eb; }
}
@keyframes pc-queue-emailed {
  0%, 38% { opacity: 0; transform: translateY(4px); }
  44%, 92% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(4px); }
}

/* Invoice loop (7s): deposit paid → balance paid → button → "Paid in full" */
@keyframes pc-deposit-check {
  0%, 22.5% { opacity: 0; transform: scale(0.4); }
  25.5% { opacity: 1; transform: scale(1.1); }
  28.5%, 90% { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes pc-balance-check {
  0%, 43.7% { opacity: 0; transform: scale(0.4); }
  46.7% { opacity: 1; transform: scale(1.1); }
  49.7%, 90% { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; transform: scale(0.4); }
}
@keyframes pc-pay-click {
  0%, 12.5% { opacity: 1; transform: scale(1) translateY(0); background: #2563eb; }
  15% { opacity: 1; transform: scale(0.96) translateY(0); background: #1d4ed8; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4); }
  17.5%, 53% { opacity: 1; transform: scale(1) translateY(0); background: #2563eb; }
  56%, 90% { opacity: 0; transform: scale(0.9) translateY(4px); }
  93%, 100% { opacity: 1; transform: scale(1) translateY(0); background: #2563eb; }
}
@keyframes pc-paid-swap {
  0%, 53% { opacity: 0; transform: scale(0.8) translateY(-4px); pointer-events: none; }
  57% { opacity: 1; transform: scale(1.06) translateY(0); pointer-events: auto; }
  60%, 90% { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
  93%, 100% { opacity: 0; transform: scale(0.8) translateY(-4px); pointer-events: none; }
}

/* Ops loop (8s): crew slots slide in, then pills expand out. Each piece closes
   in the same order it opened, staggered across the tail of the loop, so the
   whole card folds shut as a cascade instead of every piece resetting at once. */
@keyframes pc-crew-0 {
  0%, 5% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-14px); }
  8%, 89% { opacity: 1; max-height: 38px; padding-top: 6px; padding-bottom: 6px; margin-top: 8px; transform: translateX(0); }
  91%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-14px); }
}
/* Tracks pc-crew-0: the divider fades in exactly when the Captain row does. */
@keyframes pc-ops-guest-divider {
  0%, 5% { border-bottom-color: transparent; }
  8%, 89% { border-bottom-color: #f1e3d6; }
  91%, 100% { border-bottom-color: transparent; }
}
@keyframes pc-crew-1 {
  0%, 11% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-14px); }
  14%, 90% { opacity: 1; max-height: 38px; padding-top: 6px; padding-bottom: 6px; margin-top: 8px; transform: translateX(0); }
  92%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-14px); }
}
@keyframes pc-crew-2 {
  0%, 17% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-14px); }
  20%, 91% { opacity: 1; max-height: 38px; padding-top: 6px; padding-bottom: 6px; margin-top: 8px; transform: translateX(0); }
  93%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; transform: translateX(-14px); }
}
@keyframes pc-cpill-0 {
  0%, 37% { opacity: 0; transform: scaleX(0.4); }
  41% { opacity: 1; transform: scaleX(1.04); }
  44%, 92% { opacity: 1; transform: scaleX(1); }
  94%, 100% { opacity: 0; transform: scaleX(0.4); }
}
@keyframes pc-cpill-1 {
  0%, 45% { opacity: 0; transform: scaleX(0.4); }
  49% { opacity: 1; transform: scaleX(1.04); }
  52%, 93% { opacity: 1; transform: scaleX(1); }
  95%, 100% { opacity: 0; transform: scaleX(0.4); }
}
@keyframes pc-cpill-2 {
  0%, 53% { opacity: 0; transform: scaleX(0.4); }
  57% { opacity: 1; transform: scaleX(1.04); }
  60%, 94% { opacity: 1; transform: scaleX(1); }
  96%, 100% { opacity: 0; transform: scaleX(0.4); }
}
@keyframes pc-confirms-loop {
  0%, 33% {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-color: rgba(241, 227, 214, 0);
  }
  37%, 95% {
    opacity: 1;
    max-height: 100px;
    margin-top: 13px;
    padding-top: 13px;
    border-top-color: rgba(241, 227, 214, 1);
  }
  97%, 100% {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-color: rgba(241, 227, 214, 0);
  }
}

/* Mobile sizing ---------------------------------------------------------- */
@media (max-width: 991px) {
  .pc-hero-stage { padding: 12px 12px; }
  .pc-hero-window { max-width: 450px; }
  .pc-window-body { padding: 16px; }
  .pc-hero-meta { gap: 10px; }
  .pc-hero-paid { display: none !important; }
}

/* Respect reduced motion: reveal everything in its final state, no motion */
@media (prefers-reduced-motion: reduce) {
  .pc-window,
  .pc-feed-row,
  .pc-crew-slot,
  .pc-confirm-pill,
  .pc-ops-confirms,
  .pc-ops-guest {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .pc-ops-guest { border-bottom-color: #f1e3d6 !important; }
  .pc-crew-slot {
    max-height: none !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-top: 8px !important;
  }
  .pc-ops-confirms {
    max-height: none !important;
    margin-top: 13px !important;
    padding-top: 13px !important;
    border-top-color: #f1e3d6 !important;
  }
  /* Widget rests on the final quote */
  .pc-date-val { opacity: 1 !important; animation: none !important; }
  .pc-stepper-val { --pc-guests: 12 !important; animation: none !important; }
  .pc-addon { --lit: 1 !important; animation: none !important; }
  .pc-total { --pc-total-n: 1840 !important; animation: none !important; }
  .pc-submit { animation: none !important; }
  /* Hero card rests fully completed */
  .pc-feed-row { --lit: 1 !important; }
  .pc-status-step { opacity: 0 !important; animation: none !important; }
  .pc-status-step--done { opacity: 1 !important; transform: none !important; }
  .pc-hero-paid { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Queue rests confirmed */
  .pc-queue-row--urgent .pc-queue-status--reviewed,
  .pc-queue-row--urgent .pc-queue-action { opacity: 0 !important; animation: none !important; }
  .pc-queue-row--urgent .pc-queue-status--confirmed,
  .pc-queue-row--urgent .pc-queue-emailed { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* Invoice rests paid */
  .pc-invoice-status i { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pc-pay-btn { opacity: 0 !important; animation: none !important; }
  .pc-paid-badge { opacity: 1 !important; transform: none !important; animation: none !important; }
}