/* Start page polish — header/footer parity, mobile overflow, background */

/* 1. Header links: match homepage weight (700, not 800) */
body.mirl-start-page .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

body.mirl-start-page .topbar .nav,
body.mirl-start-page .topbar .nav a:not(.nav-cta) {
  font-weight: 700;
}

/* 2. Footer: lock sitewide typography (guards against content CSS bleed) */
body.mirl-start-page .mirl-footer .footer-tagline {
  margin: 0;
  letter-spacing: -0.035em;
  line-height: 1.18;
  font-weight: 850;
}

body.mirl-start-page .mirl-footer .footer-sub {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.68;
  font-weight: 500;
  letter-spacing: normal;
  word-spacing: normal;
}

body.mirl-start-page .mirl-footer .social-row {
  margin-top: 20px;
  gap: 8px;
}

body.mirl-start-page .mirl-footer .brand-block {
  max-width: 360px;
}

/* 3. Mobile: prevent horizontal swipe (body only — html overflow breaks sticky topbar) */
body.mirl-start-page {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body.mirl-start-page .mirl-start-main {
  overflow: visible;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 680px) {
  body.mirl-start-page {
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  /* Clip page content, not the sticky topbar (sibling of #main-content) */
  body.mirl-start-page #main-content {
    overflow-x: clip;
    max-width: 100%;
  }

  body.mirl-start-page .mirl-start-main .hero,
  body.mirl-start-page .mirl-start-main section:not(.hero) {
    width: min(calc(100% - 28px), var(--max, 1120px));
    max-width: 100%;
  }

  /* Hero stage: contain phone, floats, and glow (start.css sets overflow:visible at 760px) */
  body.mirl-start-page .mirl-start-main .hero {
    overflow-x: clip;
    max-width: 100%;
  }

  body.mirl-start-page .mirl-start-main .hero::before {
    inset: -28px -20px -24px !important;
  }

  body.mirl-start-page .mirl-start-main .hero-visual {
    /* Absolute floats need a tall stage; auto height collapses to phone-only and clips bubbles */
    min-height: 720px !important;
    max-width: 100%;
    padding: 36px 0 40px !important;
    transform: none !important;
    overflow-x: clip !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 430px) {
    body.mirl-start-page .mirl-start-main .hero-visual {
      min-height: 680px !important;
      padding: 32px 0 36px !important;
    }
  }

  body.mirl-start-page .mirl-start-main .orb {
    width: min(320px, 92vw) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body.mirl-start-page .mirl-start-main .phone {
    max-width: min(312px, 78vw) !important;
  }

  body.mirl-start-page .mirl-start-main .floating-card {
    max-width: min(210px, calc(100vw - 48px)) !important;
  }

  body.mirl-start-page .mirl-start-main .float-1,
  body.mirl-start-page .mirl-start-main .float-3 {
    left: 8px !important;
    right: auto !important;
  }

  body.mirl-start-page .mirl-start-main .float-2 {
    right: 8px !important;
    left: auto !important;
  }

  /* Pull top/bottom bubbles in from edges so float animation has room */
  body.mirl-start-page .mirl-start-main .hero-visual .float-1 {
    top: 24px !important;
    animation: mirl-start-float-one-mobile 7.5s ease-in-out infinite !important;
  }

  body.mirl-start-page .mirl-start-main .hero-visual .float-2 {
    bottom: 24px !important;
    animation: mirl-start-float-two-mobile 8.2s ease-in-out infinite !important;
  }

  body.mirl-start-page .mirl-start-main .hero-visual .float-3 {
    bottom: 136px !important;
    animation: mirl-start-float-three-mobile 8.8s ease-in-out infinite !important;
  }

  @keyframes mirl-start-float-one-mobile {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    50% { transform: translate3d(6px, -8px, 0) rotate(1deg); }
  }

  @keyframes mirl-start-float-two-mobile {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(1deg); }
    50% { transform: translate3d(-8px, 8px, 0) rotate(-1deg); }
  }

  @keyframes mirl-start-float-three-mobile {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0.6deg); }
    50% { transform: translate3d(8px, 8px, 0) rotate(-0.6deg); }
  }

  /* Walkthrough screenshots: keep annotation pills inside the panel */
  body.mirl-start-page .mirl-start-main .step-visual {
    overflow: hidden !important;
    max-width: 100%;
  }

  body.mirl-start-page .mirl-start-main .step-visual .callout,
  body.mirl-start-page .mirl-start-main .callout {
    max-width: min(190px, calc(100vw - 64px)) !important;
  }

  body.mirl-start-page .mirl-start-main .step-visual .c1,
  body.mirl-start-page .mirl-start-main .step-visual .c3,
  body.mirl-start-page .mirl-start-main .step-visual .c5,
  body.mirl-start-page .mirl-start-main .c1,
  body.mirl-start-page .mirl-start-main .c3,
  body.mirl-start-page .mirl-start-main .c5 {
    left: 8px !important;
    right: auto !important;
  }

  body.mirl-start-page .mirl-start-main .step-visual .c2,
  body.mirl-start-page .mirl-start-main .step-visual .c4,
  body.mirl-start-page .mirl-start-main .step-visual .c6,
  body.mirl-start-page .mirl-start-main .c2,
  body.mirl-start-page .mirl-start-main .c4,
  body.mirl-start-page .mirl-start-main .c6 {
    right: 8px !important;
    left: auto !important;
  }

  /* Decorative glow orbs on large panels */
  body.mirl-start-page .mirl-start-main .share-next-card,
  body.mirl-start-page .mirl-start-main .final-cta {
    overflow: hidden !important;
  }

  body.mirl-start-page .mirl-start-main .final-cta::before,
  body.mirl-start-page .mirl-start-main .share-next-card::before {
    inset: -12%;
  }
}

/* 4. Shadow clipping fix — parents must not clip child box-shadows (mirrors mirl-instant) */
body.mirl-start-page .mirl-start-main,
body.mirl-start-page .mirl-start-main section,
body.mirl-start-page .mirl-start-main .walkthrough,
body.mirl-start-page .mirl-start-main .steps-grid,
body.mirl-start-page .mirl-start-main .faq-grid,
body.mirl-start-page .mirl-start-main .share-next-section {
  overflow: visible !important;
}

body.mirl-start-page .mirl-start-main .guide-step,
body.mirl-start-page .mirl-start-main .faq,
body.mirl-start-page .mirl-start-main .mini-step,
body.mirl-start-page .mirl-start-main .final-cta,
body.mirl-start-page .mirl-start-main .share-next-card,
body.mirl-start-page .mirl-start-main .step-visual {
  overflow: visible !important;
}

@media (max-width: 680px) {
  body.mirl-start-page .mirl-start-main .step-visual,
  body.mirl-start-page .mirl-start-main .share-next-card,
  body.mirl-start-page .mirl-start-main .final-cta {
    overflow: hidden !important;
  }
}

/* 5. Softer, diffused shadows (match mirl-instant / mirl.com/mirl-instant) */
body.mirl-start-page .mirl-start-main {
  --shadow: 0 18px 55px rgba(26, 32, 44, 0.08);
  --shadow-soft: 0 18px 55px rgba(26, 32, 44, 0.08);
  --shadow-sm: 0 14px 36px rgba(52, 36, 112, 0.08);
  --shadow-md: 0 22px 60px rgba(52, 36, 112, 0.14);
  --shadow-lg: 0 32px 80px rgba(52, 36, 112, 0.12);
  --instant-shadow: 0 18px 55px rgba(26, 32, 44, 0.08);
}

/*
 * White cards: solid background + no backdrop-filter.
 * Semi-transparent bg + blur was causing dark edge fringes that read as harsh vertical shadows.
 */
body.mirl-start-page .mirl-start-main #steps .mini-step,
body.mirl-start-page .mirl-start-main .steps-grid .mini-step,
body.mirl-start-page .mirl-start-main .walkthrough .guide-step,
body.mirl-start-page .mirl-start-main #faq .faq,
body.mirl-start-page .mirl-start-main .faq-grid .faq,
body.mirl-start-page .mirl-start-main .mini-step,
body.mirl-start-page .mirl-start-main .guide-step,
body.mirl-start-page .mirl-start-main .faq {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 18px 55px rgba(26, 32, 44, 0.08) !important;
}

/* Blue "Give people a reason to tap" panel */
body.mirl-start-page .mirl-start-main #share-next .share-next-card,
body.mirl-start-page .mirl-start-main .share-next-card {
  box-shadow: 0 22px 60px rgba(52, 36, 112, 0.14) !important;
}

/* Yellow/pink bottom CTA */
body.mirl-start-page .mirl-start-main .final-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 22px 60px rgba(52, 36, 112, 0.14) !important;
}

/* Hero phone & floating elements */
body.mirl-start-page .mirl-start-main .phone {
  box-shadow:
    0 28px 72px rgba(52, 36, 112, 0.11),
    0 10px 28px rgba(52, 36, 112, 0.06) !important;
}

body.mirl-start-page .mirl-start-main .floating-card {
  box-shadow: 0 14px 36px rgba(52, 36, 112, 0.08) !important;
}

body.mirl-start-page .mirl-start-main .screen-img,
body.mirl-start-page .mirl-start-main .wide-img,
body.mirl-start-page .mirl-start-main .access-preview-image {
  box-shadow: 0 18px 44px rgba(52, 36, 112, 0.1) !important;
}

body.mirl-start-page .mirl-start-main .finished .phone {
  filter: drop-shadow(0 18px 36px rgba(52, 36, 112, 0.1)) !important;
}

/* Callouts, badges, buttons */
body.mirl-start-page .mirl-start-main .callout {
  box-shadow: 0 12px 28px rgba(52, 36, 112, 0.07) !important;
}

body.mirl-start-page .mirl-start-main .num,
body.mirl-start-page .mirl-start-main .label {
  box-shadow: 0 8px 20px rgba(115, 80, 230, 0.12) !important;
}

body.mirl-start-page .mirl-start-main .access-preview-card {
  box-shadow:
    0 14px 36px rgba(52, 36, 112, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

body.mirl-start-page .mirl-start-main .btn {
  box-shadow: 0 12px 28px rgba(52, 36, 112, 0.08) !important;
}

body.mirl-start-page .mirl-start-main .btn-primary {
  box-shadow: 0 14px 32px rgba(22, 22, 32, 0.14) !important;
}

body.mirl-start-page .mirl-start-main .btn-secondary {
  box-shadow: 0 12px 28px rgba(52, 36, 112, 0.06) !important;
}

body.mirl-start-page .mirl-start-main .btn:hover {
  box-shadow: 0 16px 36px rgba(52, 36, 112, 0.1) !important;
}

/* Share channel cards inside dark band */
body.mirl-start-page .mirl-start-main .share-channel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}