/* ==========================================================================
   ReelDM Bespoke OLED Black System
   Architectural Precision • Silicon Valley Elite • Electric Cobalt DNA
   Official Canonical Design System (DESIGN.md Reference)
   ========================================================================== */

:root {
  color-scheme: dark !important;
  
  /* Brand Core Tokens (OLED Foundation) */
  --rdm-canvas: #000000;
  --rdm-surface: #0A0A0A;
  --rdm-surface-card: #0D0E15;
  --rdm-surface-subtle: #12141D;
  
  /* Precision Hairline Borders */
  --rdm-border: rgba(255, 255, 255, 0.09);
  --rdm-border-subtle: rgba(255, 255, 255, 0.05);
  --rdm-border-focus: #4D8DFF;
  
  /* Typography Hierarchy (High Contrast White / Slate) */
  --rdm-ink-primary: #F8FAFC;
  --rdm-ink-secondary: #9CA3AF;
  --rdm-ink-muted: #6B7280;
  --rdm-ink-faint: #4B5563;
  
  /* Signature ReelDM Electric Blue (#4D8DFF) */
  --rdm-electric: #4D8DFF;
  --rdm-electric-hover: #3B82F6;
  --rdm-electric-soft: rgba(77, 141, 255, 0.14);
  --rdm-electric-glow: rgba(77, 141, 255, 0.28);
  --rdm-emerald: #10B981;
  --rdm-emerald-soft: rgba(16, 185, 129, 0.14);
  
  /* Architectural Geometry */
  --rdm-radius-card: 16px;
  --rdm-radius-button: 10px;
  --rdm-radius-pill: 9999px;
}

/* Base Document */
html, body {
  background-color: #000000 !important;
  color: var(--rdm-ink-primary) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Pure Minimalist OLED Void - Zero Grids / Zero Squares */
html, body,
.hero,
.pricing-section,
section {
  position: relative;
  background-color: #000000 !important;
  background-image: none !important;
}

.hero-grid {
  display: none !important;
}

/* Site Header */
.site-header {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--rdm-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.site-header .brand {
  color: #F8FAFC !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
}

.site-header .nav-links a {
  color: var(--rdm-ink-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: color 0.15s ease;
}

.site-header .nav-links a:hover {
  color: #FFFFFF !important;
}

.site-header .button,
.site-header .button-primary {
  background: var(--rdm-electric) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--rdm-electric) !important;
  border-radius: var(--rdm-radius-button) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  box-shadow: 0 0 16px rgba(77, 141, 255, 0.35) !important;
}

/* Hero Meta Verified Tech Provider (OLED Black Contrast) */
.hero-meta-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero-meta-badge .meta-badge-icon {
  width: 27px !important;
  height: 27px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.hero-meta-badge .meta-text-wrap {
  display: inline !important;
  font-size: 19px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.hero-meta-badge .meta-text-strong {
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
}

.hero-meta-badge .meta-text-label {
  font-size: 19px !important;
  font-weight: 550 !important;
  color: var(--rdm-electric) !important;
  letter-spacing: -0.015em !important;
  line-height: 1 !important;
}

/* Hero Headline (Original Silicon Valley Authority - Linear/Stripe/Cursor Aesthetic) */
.hero h1,
#hero-title,
.hero-headline-authority {
  color: #F8FAFC !important;
  font-size: clamp(2.6rem, 5.8vw, 4.4rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  margin: 18px auto 22px !important;
  text-align: center !important;
  max-width: 860px !important;
}

/* Hero Headline Typography (Locked Option 1: Luxury Metallic & Electric Gradient) */
.hero-headline-authority .metallic-text {
  background: linear-gradient(180deg, #FFFFFF 25%, #A1A1AA 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
}

.hero-headline-authority .electric-gradient-text {
  background: linear-gradient(135deg, #93C5FD 0%, #3B82F6 45%, #1D4ED8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
  filter: drop-shadow(0 0 28px rgba(59, 130, 246, 0.45)) !important;
}

/* Hero Subtext */
.hero p,
.hero-copy,
.hero-subtitle {
  color: #9CA3AF !important;
  font-size: 18.5px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  max-width: 620px !important;
  margin: 0 auto 28px !important;
}

/* Hero Single Center CTA */
.hero-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 48px !important;
}

.hero-actions .button {
  background: var(--rdm-electric) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--rdm-electric) !important;
  border-radius: 12px !important;
  font-size: 15.5px !important;
  font-weight: 650 !important;
  padding: 14px 34px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 0 28px rgba(77, 141, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-actions .button:hover {
  background: var(--rdm-electric-hover) !important;
  box-shadow: 0 0 40px rgba(77, 141, 255, 0.65) !important;
  transform: translateY(-2px) !important;
}

/* General Buttons */
.button,
.button-primary,
button.button {
  background: var(--rdm-electric) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--rdm-electric) !important;
  border-radius: var(--rdm-radius-button) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 0 20px rgba(77, 141, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.button:hover,
.button-primary:hover {
  background: var(--rdm-electric-hover) !important;
  box-shadow: 0 0 28px rgba(77, 141, 255, 0.5) !important;
  transform: translateY(-1px);
}

.button-secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--rdm-radius-button) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

/* Section Headings */
.section-heading {
  margin-bottom: 48px !important;
}

.section-heading .eyebrow {
  color: var(--rdm-electric) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.section-heading h2,
.section h2 {
  color: #F8FAFC !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  margin: 12px 0 !important;
}

.section-heading p {
  color: var(--rdm-ink-secondary) !important;
  font-size: 16px !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

/* Architectural Feature Cards (Linear Dark Style) */
.card,
.feature-card,
.use-case-card {
  background: var(--rdm-surface-card) !important;
  border: 1px solid var(--rdm-border) !important;
  border-radius: var(--rdm-radius-card) !important;
  padding: 28px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.feature-card:hover {
  border-color: rgba(77, 141, 255, 0.4) !important;
  box-shadow: 0 12px 30px -10px rgba(77, 141, 255, 0.15) !important;
}

.feature-card h3 {
  color: #F8FAFC !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin: 14px 0 8px !important;
}

.feature-card p {
  color: var(--rdm-ink-secondary) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* The Old Way vs The ReelDM Way (Surgical Comparison) */
.comparison-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.comparison-card {
  border-radius: var(--rdm-radius-card) !important;
  padding: 32px !important;
  text-align: left !important;
}

.comparison-card.old-way {
  background: #090A0F !important;
  border: 1px dashed rgba(255, 255, 255, 0.14) !important;
}

.comparison-card.old-way .small-label {
  color: var(--rdm-ink-muted) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
}

.comparison-card.old-way h3 {
  color: #9CA3AF !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 8px 0 16px !important;
}

.comparison-card.old-way ul li {
  color: #6B7280 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.comparison-card.old-way .path span {
  background: #14151D !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #9CA3AF !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
}

.comparison-card.new-way {
  background: #0D0E15 !important;
  border: 1.5px solid var(--rdm-electric) !important;
  box-shadow: 0 0 35px rgba(77, 141, 255, 0.2) !important;
}

.comparison-card.new-way .small-label {
  color: var(--rdm-electric) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.comparison-card.new-way h3 {
  color: #F8FAFC !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 8px 0 16px !important;
}

.comparison-card.new-way ul li {
  color: #E2E8F0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.comparison-card.new-way .path span {
  background: var(--rdm-electric-soft) !important;
  border: 1px solid rgba(77, 141, 255, 0.3) !important;
  color: var(--rdm-electric) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
}

/* Steps / Workflow */
.setup-section {
  background: #05060A !important;
  border-top: 1px solid var(--rdm-border) !important;
  border-bottom: 1px solid var(--rdm-border) !important;
  padding: 72px 0 !important;
}

.setup-section h2 {
  color: #F8FAFC !important;
}

.setup-section .steps li {
  border-bottom: 1px solid var(--rdm-border) !important;
  padding: 20px 0 !important;
}

.setup-section .step-number {
  color: var(--rdm-electric) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

/* ==========================================================================
   PRICING CARD - Bespoke Architectural "Creator Pro" (OLED Dark Mode)
   ========================================================================== */

.pricing-section {
  padding: 80px 0 !important;
  background-color: #000000 !important;
}

.pricing-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 24px !important;
  max-width: 940px !important;
  margin: 0 auto !important;
}

.pricing-card {
  border-radius: 24px !important;
  padding: 36px 32px !important;
  background: #0A0B10 !important;
  border: 1px solid var(--rdm-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
}

.pricing-card.featured-plan {
  border: 1.5px solid var(--rdm-electric) !important;
  box-shadow: 0 0 48px -8px var(--rdm-electric-glow) !important;
  position: relative !important;
  background: #0D0E15 !important;
}

.plan-badge {
  background: var(--rdm-electric) !important;
  color: #FFFFFF !important;
  border-radius: var(--rdm-radius-pill) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
}

/* Duration Toggles */
.pass-duration-selector {
  background: #141620 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 3px !important;
  margin: 16px 0 22px !important;
}

.duration-pill {
  border: none !important;
  background: transparent !important;
  color: var(--rdm-ink-secondary) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  padding: 6px 14px !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.duration-pill.is-active {
  background: #202434 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.duration-pill .pill-tag {
  background: var(--rdm-electric-soft) !important;
  color: var(--rdm-electric) !important;
  border-radius: 9999px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  margin-left: 6px !important;
}

/* Price Heading */
.pricing-card .price strong,
#price-pro {
  color: #F8FAFC !important;
  font-size: 42px !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
}

.price-anchor {
  color: #4B5563 !important;
  text-decoration: line-through !important;
  font-size: 15px !important;
  margin-right: 6px !important;
}

.price-discount-badge {
  background: var(--rdm-emerald-soft) !important;
  color: var(--rdm-emerald) !important;
  border-radius: var(--rdm-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
}

.price-period,
#price-period {
  color: var(--rdm-ink-muted) !important;
  font-size: 13.5px !important;
}

.price-monthly,
#price-monthly {
  color: var(--rdm-electric) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Pricing Divider */
.pricing-divider {
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin: 24px 0 18px 0 !important;
  width: 100% !important;
}

/* Plan Features Label */
.plan-features-label {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--rdm-ink-muted) !important;
  margin-bottom: 12px !important;
}

/* Single-Line Clean Checklist */
.plan-features.clean-checklist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 28px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  text-align: left !important;
}

.plan-features.clean-checklist li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  cursor: default !important;
}

/* Soft Blue Check Circle (Dark Mode Glowing Pill) */
.plan-features.clean-checklist .check-bubble {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background-color: rgba(77, 141, 255, 0.16) !important;
  color: var(--rdm-electric) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.plan-features.clean-checklist .feature-title {
  color: #E2E8F0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}

.plan-features.clean-checklist li:hover .feature-title {
  color: #FFFFFF !important;
}

/* Bottom CTA buttons */
.pricing-card .button {
  margin-top: auto !important;
  padding: 13px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.pricing-card.featured-plan .button-pro {
  background: var(--rdm-electric) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--rdm-electric) !important;
  box-shadow: 0 0 24px rgba(77, 141, 255, 0.4) !important;
}

.pricing-card.featured-plan .button-pro:hover {
  background: var(--rdm-electric-hover) !important;
  border-color: var(--rdm-electric-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 32px rgba(77, 141, 255, 0.55) !important;
}

.pricing-card .button-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #E2E8F0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.pricing-card .button-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.payment-note,
#payment-note {
  color: var(--rdm-ink-muted) !important;
  font-size: 12px !important;
  margin-top: 14px !important;
  display: block !important;
}

/* Cookie Banner (Sleek Micro Card on Dark) */
.cookie-banner,
#cookie-banner {
  background: #0E0F16 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
  border-radius: 12px !important;
  color: #F8FAFC !important;
  padding: 16px 20px !important;
}

.cookie-banner p {
  color: #9CA3AF !important;
  font-size: 13px !important;
}

.cookie-banner a {
  color: var(--rdm-electric) !important;
  text-decoration: underline !important;
}

/* Interactive Demo Showcase */
.interactive-demo,
.demo-stage {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
  background: #000000 !important;
}

/* Footer */
.site-footer,
footer.site-footer {
  background: #000000 !important;
  border-top: 1px solid var(--rdm-border) !important;
  color: var(--rdm-ink-muted) !important;
  padding: 56px 0 28px !important;
}

.site-footer .brand {
  color: #F8FAFC !important;
}

.site-footer a {
  color: var(--rdm-ink-secondary) !important;
}

.site-footer a:hover {
  color: var(--rdm-electric) !important;
}

.footer-bottom {
  border-top: 1px solid var(--rdm-border) !important;
  color: #4B5563 !important;
}

/* ==========================================================================
   Real Studio Phone Showcase (Cupertino Titanium HIG - Linear/Apple Style)
   ========================================================================== */
.studio-phone-section {
  padding: 84px 0 108px !important;
  background: #000000 !important;
  position: relative !important;
  text-align: center !important;
}

.showcase-heading {
  max-width: 680px !important;
  margin: 0 auto 36px !important;
}

.showcase-heading h2 {
  font-size: clamp(30px, 3.6vw, 42px) !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin-bottom: 12px !important;
}

.showcase-heading p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--rdm-ink-secondary) !important;
  max-width: 520px !important;
  margin: 0 auto !important;
}

/* Linear / Apple Segmented Stepper */
.showcase-stepper-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 38px !important;
}

.showcase-stepper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #141417 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7) !important;
}

.stepper-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94A3B8 !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  font-family: inherit !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 50 !important;
  user-select: none !important;
}

.stepper-btn:hover {
  color: #FFFFFF !important;
}

.stepper-btn .step-badge {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #CBD5E1 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: all 0.16s ease !important;
}

.stepper-btn.active {
  background: #FFFFFF !important;
  color: #09090B !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.stepper-btn.active .step-badge {
  background: #09090B !important;
  color: #FFFFFF !important;
}

/* iPhone 16 Pro Titanium Chassis */
.iphone-wrap {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
}

.iphone-chassis {
  width: 326px !important;
  height: 618px !important;
  background: #000000 !important;
  border-radius: 48px !important;
  border: 3.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px #000000,
    0 32px 80px -10px rgba(0, 0, 0, 0.95) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.iphone-dynamic-island {
  position: absolute !important;
  top: 11px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 92px !important;
  height: 24px !important;
  background: #000000 !important;
  border-radius: 20px !important;
  z-index: 25 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 9px !important;
}

.island-camera {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #0e1e38 35%, #050b14 100%) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
  display: block !important;
}

/* Status Bar: With generous edge padding for bezel curve */
.iphone-status-bar {
  height: 42px !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  padding-top: 6px !important;
  z-index: 15 !important;
  flex-shrink: 0 !important;
}

.status-icons {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.iphone-screen-view {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #000000 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Instagram Header & Sub-Bar */
.ig-top-bar {
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #000000 !important;
  flex-shrink: 0 !important;
}

.ig-top-title {
  text-align: center !important;
}

.ig-top-handle {
  display: block !important;
  font-size: 9px !important;
  color: #94A3B8 !important;
  line-height: 1 !important;
  letter-spacing: 0.6px !important;
}

.ig-top-section {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
}

.ig-top-dots,
.ig-dots {
  color: #94A3B8 !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
}

.ig-post-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.ig-author-row {
  padding: 7px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #000000 !important;
  flex-shrink: 0 !important;
}

.ig-author-left {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.ig-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.avatar-initial {
  display: block !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: translateY(0.5px) !important;
}

.creator-avatar {
  background: linear-gradient(135deg, #2563EB, #1D4ED8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.fan-avatar {
  background: #3F3F46 !important;
}

.ig-handle {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

/* Instagram Post Media Creative */
.ig-media-card {
  width: 100% !important;
  height: 270px !important;
  background: #0A0D14 !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ig-media-cover {
  width: 100% !important;
  height: 100% !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.25) 0%, transparent 60%),
              linear-gradient(180deg, #0B101D 0%, #06090F 100%) !important;
  box-sizing: border-box !important;
}

.cover-badge {
  align-self: flex-start !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: #93C5FD !important;
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid rgba(37, 99, 235, 0.4) !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}

.cover-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.cover-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

.cover-inner h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.cover-inner p {
  font-size: 11.5px !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.cover-pill {
  align-self: flex-start !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.1) !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  margin-top: 4px !important;
}

/* Actions Bar */
.ig-actions-row {
  padding: 10px 14px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #000000 !important;
  flex-shrink: 0 !important;
}

.ig-actions-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ig-action-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}

/* Caption Area */
.ig-caption-box {
  padding: 4px 14px 12px !important;
  background: #000000 !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: #EDEDED !important;
  flex: 1 !important;
}

.caption-author {
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin-right: 5px !important;
}

.caption-view-comments {
  display: block !important;
  background: none !important;
  border: none !important;
  color: #8E8E8E !important;
  font-size: 11px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-top: 5px !important;
  font-family: inherit !important;
}

.caption-view-comments:hover {
  color: #FFFFFF !important;
}

.caption-date {
  display: block !important;
  font-size: 10px !important;
  color: #71717A !important;
  margin-top: 3px !important;
}

/* Instagram Bottom Navigation: With generous side padding for bezel curve */
.ig-bottom-nav {
  height: 44px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.iphone-home-indicator-wrap {
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000000 !important;
  flex-shrink: 0 !important;
}

.iphone-home-indicator {
  width: 120px !important;
  height: 4.5px !important;
  background: #FFFFFF !important;
  border-radius: 999px !important;
  opacity: 0.8 !important;
}

.ig-nav-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* COMMENTS SHEET VIEW */
.comments-media-strip {
  height: 130px !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: radial-gradient(circle at 50% 50%, #162444 0%, #06090F 100%) !important;
  cursor: pointer !important;
}

.strip-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

.strip-title {
  font-size: 12px !important;
  font-weight: 700 !important;
}

.comments-sheet {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #18181B !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.8) !important;
}

.sheet-drag-pill {
  width: 36px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #52525B !important;
  margin: 8px auto 4px !important;
}

.sheet-header {
  padding: 4px 14px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sheet-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.sheet-comments-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.comment-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
}

.comment-row.threaded {
  margin-left: 32px !important;
}

.comment-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.comment-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.comment-user {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.comment-badge-author {
  font-size: 9px !important;
  font-weight: 600 !important;
  background: rgba(37, 99, 235, 0.2) !important;
  color: #93C5FD !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
}

.comment-time {
  font-size: 10px !important;
  color: #71717A !important;
}

.comment-text {
  font-size: 11.5px !important;
  color: #EDEDED !important;
  margin-top: 2px !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

.comment-reply-btn {
  margin-top: 3px !important;
  font-size: 10px !important;
  color: #71717A !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.sheet-emoji-bar {
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #141417 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  font-size: 15px !important;
  user-select: none !important;
}

.sheet-input-row {
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #141417 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sheet-fake-input {
  flex: 1 !important;
  background: #27272A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  color: #71717A !important;
}

/* DM CHAT VIEW */
.dm-chat-header {
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #000000 !important;
  flex-shrink: 0 !important;
}

.dm-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.dm-header-meta {
  display: flex !important;
  flex-direction: column !important;
}

.dm-header-handle {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.1 !important;
}

.dm-header-sub {
  font-size: 9.5px !important;
  color: #10B981 !important;
  line-height: 1.2 !important;
}

.dm-header-icons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: #FFFFFF !important;
}

.dm-chat-body {
  flex: 1 !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow-y: auto !important;
  background: #000000 !important;
}

.dm-time-pill {
  align-self: center !important;
  font-size: 10px !important;
  color: #71717A !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
}

.dm-bubble-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  max-width: 86% !important;
}

.dm-bubble-content {
  background: #242426 !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 12px 14px !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

.dm-text {
  margin: 0 0 10px !important;
  font-size: 12px !important;
  color: #FFFFFF !important;
  line-height: 1.4 !important;
}

.dm-action-card {
  background: #18181B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.dm-card-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.dm-card-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}

.dm-card-url {
  font-size: 10px !important;
  color: #94A3B8 !important;
  font-family: var(--rdm-font-mono) !important;
}

.dm-card-btn {
  background: var(--rdm-electric) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.4) !important;
}

.dm-bottom-bar {
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-shrink: 0 !important;
}

.dm-cam-circle {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #2563EB !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.dm-input-fake {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  color: #71717A !important;
}

.dm-input-icons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #94A3B8 !important;
}

.showcase-caption {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #CBD5E1 !important;
  letter-spacing: 0.015em !important;
  margin-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  opacity: 0.92 !important;
}

.showcase-caption .caption-dot {
  color: #3B82F6 !important;
  font-size: 9px !important;
  display: inline-block !important;
  transform: translateY(-0.5px) !important;
}

/* Responsive Mobile Polish for Studio Phone Showcase */
@media (max-width: 640px) {
  .showcase-stepper-wrap {
    padding: 0 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .showcase-stepper {
    max-width: 100% !important;
    white-space: nowrap !important;
    padding: 4px !important;
  }
  .stepper-btn {
    padding: 7px 11px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  .stepper-btn .step-badge {
    width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
  }
  .iphone-chassis {
    width: min(326px, calc(100vw - 32px)) !important;
    height: 618px !important;
  }
  .showcase-caption {
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    padding: 0 16px !important;
    line-height: 1.4 !important;
  }
  .showcase-caption .caption-dot {
    display: inline-block !important;
  }
}

/* ==========================================================================
   WORKFLOW ZIG-ZAG SECTION (AUTHENTIC REAL INSTAGRAM SIMPLICITY)
   ========================================================================== */

.workflow-section {
  position: relative !important;
  padding: 100px 0 90px !important;
  background: #000000 !important;
  overflow: hidden !important;
}

.workflow-heading {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 90px !important;
}

.workflow-heading h2 {
  font-size: clamp(32px, 4.2vw, 46px) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 16px !important;
}

.workflow-heading p {
  font-size: 16.5px !important;
  color: #94A3B8 !important;
  line-height: 1.55 !important;
}

.workflow-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 110px !important;
}

.workflow-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 70px !important;
}

.workflow-row.reverse-row {
  flex-direction: row-reverse !important;
}

.workflow-col-text {
  flex: 1 !important;
  max-width: 480px !important;
}

.workflow-tag {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #38BDF8 !important;
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
  line-height: 1.2 !important;
}

.workflow-col-text h3 {
  font-size: clamp(26px, 3.2vw, 36px) !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
}

.workflow-col-text p {
  font-size: 16px !important;
  color: #94A3B8 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Authentic Instagram Visual Stage */
.workflow-col-visual {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

.real-ig-stage {
  position: relative !important;
  width: 100% !important;
  max-width: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 0 !important;
}

/* 1. Real Instagram Comment Card (Clean White, Authentic Geometry) */
.real-ig-comment-card {
  width: 275px !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  transform: rotate(-1.5deg) !important;
  transition: transform 0.25s ease !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.real-ig-comment-card:hover {
  transform: rotate(0deg) scale(1.02) !important;
}

.real-comment-left {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex: 1 !important;
}

.real-ig-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
}

.avatar-elena {
  background: linear-gradient(135deg, #F59E0B, #EF4444) !important;
}

.avatar-marcus {
  background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
}

.avatar-reel {
  background: linear-gradient(135deg, #2563EB, #06B6D4) !important;
}

.avatar-creator {
  background: linear-gradient(135deg, #0284C7, #2563EB) !important;
}

.real-comment-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.real-comment-user-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.real-user-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.2 !important;
}

.real-author-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #0284C7 !important;
  background: rgba(2, 132, 199, 0.12) !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
}

.real-time {
  font-size: 11.5px !important;
  color: #8E8E93 !important;
}

.real-comment-msg {
  font-size: 13.5px !important;
  color: #1C1C1E !important;
  line-height: 1.35 !important;
}

.real-reply-link {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #737373 !important;
  margin-top: 2px !important;
  cursor: pointer !important;
}

.real-heart-icon {
  width: 14px !important;
  height: 14px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

/* Hand-drawn Curved Dashed Arrow */
.real-curved-arrow {
  margin: -6px 0 -8px !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 3 !important;
}

/* 2. Real Instagram DM Message Bubble */
.real-ig-dm-bubble {
  width: 285px !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 14px 16px !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.7) !important;
  transform: rotate(1.5deg) !important;
  transition: transform 0.25s ease !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

.real-ig-dm-bubble:hover {
  transform: rotate(0deg) scale(1.02) !important;
}

.dm-bubble-purple {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: #FFFFFF !important;
}

/* Signature Electric-Blue DM Bubble (Unified Across All Workflows) */
.dm-bubble-blue {
  background: linear-gradient(145deg, #0095F6 0%, #0077E6 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 149, 246, 0.45), 0 0 20px rgba(0, 149, 246, 0.25) !important;
}

.dm-bubble-blue .dm-bubble-text {
  color: #FFFFFF !important;
}

.dm-bubble-blue .dm-bubble-subtext {
  color: rgba(255, 255, 255, 0.85) !important;
}

.dm-bubble-blue .text-shield-head,
.dm-bubble-blue .text-emerald-head {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.dm-bubble-blue .dm-bubble-btn {
  background: #FFFFFF !important;
  color: #0077E6 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.dm-bubble-blue .dm-btn-follow {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
}

.dm-bubble-blue .dm-btn-unlock {
  background: #FFFFFF !important;
  color: #0077E6 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* Email lead capture input inside blue bubble */
.dm-lead-input-wrap {
  display: flex !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.dm-lead-input {
  flex: 1 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 9999px !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  color: #FFFFFF !important;
  outline: none !important;
}

.dm-lead-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.dm-lead-submit {
  background: #FFFFFF !important;
  color: #0077E6 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.avatar-sarah {
  background: linear-gradient(135deg, #10B981, #06B6D4) !important;
}

.dm-bubble-dark {
  background: #1C1C1E !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.dm-bubble-emerald {
  background: #064E3B !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  color: #FFFFFF !important;
}

.dm-bubble-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.dm-bubble-subtext {
  font-size: 12px !important;
  color: #A7F3D0 !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

.text-emerald-head {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #34D399 !important;
}

.text-shield-head {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #38BDF8 !important;
}

.dm-bubble-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 8px 14px !important;
  text-align: center !important;
  margin-top: 10px !important;
  backdrop-filter: blur(4px) !important;
  cursor: pointer !important;
}

/* Follow Flow 2-Button DM Stack */
.dm-follow-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin-top: 10px !important;
}

.dm-btn-follow {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 7px 12px !important;
  text-align: center !important;
  cursor: pointer !important;
}

.dm-btn-unlock {
  background: #2563EB !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 7px 12px !important;
  text-align: center !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.4) !important;
  cursor: pointer !important;
}

/* Bottom CTA in Workflow Section */
.workflow-bottom-cta {
  text-align: center !important;
  margin-top: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.cta-footnote {
  font-size: 13px !important;
  color: #71717A !important;
}

/* Responsive Styles for Workflow Zig-Zag */
@media (max-width: 900px) {
  .workflow-rows {
    gap: 70px !important;
  }
  .workflow-row,
  .workflow-row.reverse-row {
    flex-direction: column !important;
    gap: 36px !important;
  }
  .workflow-col-text {
    max-width: 100% !important;
    text-align: center !important;
  }
  .workflow-col-visual {
    width: 100% !important;
  }
}