/* Real mobile layout — overrides the fixed 1440px zoom-to-fit canvas */
@media (max-width: 767px) {
  /* Kill the desktop zoom-scaling and let the page flow at device width */
  body > div[data-pencil-name] { zoom: 1 !important; }
  [data-pencil-name="Present — Landing Page"] { width: 100% !important; }

  /* ---------- Nav ---------- */
  [data-pencil-name="Nav"] { padding: 16px 20px !important; }
  [data-pencil-name="Nav Links"] { display: none !important; }

  /* ---------- Hero ---------- */
  [data-pencil-name="Hero"] { padding: 44px 20px 0 !important; }
  [data-pencil-name="Hero Headline Wrap"] { width: 100% !important; }
  [data-pencil-name="Headline"] {
    font-size: 34px !important; line-height: 42px !important;
    letter-spacing: -1px !important; min-height: 126px !important;
  }
  [data-pencil-name="Subhead Wrap"] { width: 100% !important; padding-top: 18px !important; }
  [data-pencil-name="Subhead"] { font-size: 16px !important; line-height: 26px !important; }
  [data-pencil-name="Hero CTAs"] { width: 100% !important; padding-top: 28px !important; }
  #waitlist-form { flex-direction: column !important; width: 100% !important; gap: 12px !important; }
  #waitlist-email { width: 100% !important; }
  #waitlist-submit { width: 100% !important; }
  [data-pencil-name="Proof Row"] {
    flex-wrap: wrap !important; justify-content: center !important;
    gap: 12px !important; padding-top: 26px !important; width: 100% !important;
  }
  [data-pencil-name="Proof Row"] [data-pencil-name="Divider"] { display: none !important; }
  [data-pencil-name="Loved By"] { white-space: normal !important; text-align: center !important; }

  /* Hero phone stage: single centered phone, no flankers */
  [data-pencil-name="Hero Stage"] { height: 500px !important; margin-top: 8px !important; }
  [data-pencil-name="Flank Phone Left"],
  [data-pencil-name="Flank Phone Right"],
  [data-pencil-name="Ice Glow"] { display: none !important; }
  [data-pencil-name="Warm Glow"] {
    width: 140% !important; left: -20% !important; top: -20px !important; height: 520px !important;
  }
  [data-pencil-name="Hero Phone"] {
    width: 232px !important; height: 478px !important;
    left: 50% !important; margin-left: -116px !important; top: 12px !important;
  }

  /* ---------- Problem band ---------- */
  [data-pencil-name="Problem Band"] { padding: 96px 24px 80px !important; }
  [data-pencil-name="Problem Line 1"],
  [data-pencil-name="Problem Line 2"] {
    font-size: 32px !important; line-height: 39px !important; letter-spacing: -1px !important;
  }
  [data-pencil-name="Problem Caption Wrap"] { width: 100% !important; padding-top: 24px !important; }
  [data-pencil-name="Problem Caption"] { font-size: 16px !important; line-height: 26px !important; }

  /* ---------- Feature cards ---------- */
  [data-pencil-name="Features"] { padding: 0 16px !important; gap: 20px !important; }
  [data-pencil-name="Features Header Text"] { font-size: 28px !important; line-height: 34px !important; }
  [data-pencil-name="CIRCLE SESSIONS"],
  [data-pencil-name="SHARED REFLECTIONS"],
  [data-pencil-name="SHARED JOURNAL"] {
    flex-direction: column !important; height: auto !important;
  }
  [data-pencil-name="Card Copy"] {
    order: 0 !important; padding: 32px 24px 8px !important;
    height: auto !important; gap: 14px !important;
  }
  [data-pencil-name="Card Title"] { font-size: 26px !important; line-height: 31px !important; letter-spacing: -0.7px !important; }
  [data-pencil-name="Card Body"] { font-size: 15px !important; line-height: 25px !important; }
  [data-pencil-name="Card Stage"] {
    order: 1 !important; width: 100% !important; height: 476px !important;
  }
  [data-pencil-name="Card Glow"] {
    width: 120% !important; left: -10% !important; top: -40px !important; height: 520px !important;
  }
  [data-pencil-name="Card Phone"] {
    width: 208px !important; height: 428px !important;
    left: 50% !important; margin-left: -104px !important; top: 24px !important;
  }

  /* ---------- How it works ---------- */
  [data-pencil-name="How It Works"] { padding: 96px 20px 0 !important; gap: 28px !important; }
  [data-pencil-name="HIW Header"] { width: 100% !important; }
  [data-pencil-name="HIW Title"] { font-size: 28px !important; line-height: 34px !important; }
  [data-pencil-name="Steps"] { flex-direction: column !important; gap: 14px !important; }
  [data-pencil-name="Step 01"], [data-pencil-name="Step 02"], [data-pencil-name="Step 03"] {
    padding: 26px !important; width: 100% !important; flex: none !important;
  }

  /* ---------- Badges ---------- */
  [data-pencil-name="Badges"] { padding: 96px 16px 0 !important; gap: 36px !important; }
  [data-pencil-name="Badges Title"] { font-size: 28px !important; line-height: 34px !important; }
  [data-pencil-name="Badges Sub"] { width: 100% !important; font-size: 15px !important; line-height: 25px !important; }
  [data-pencil-name="Badges Stage"] { gap: 40px !important; }
  [data-pencil-name="Badges Glow"] { width: 120% !important; height: 500px !important; }
  [data-pencil-name="Badges Phone"] { width: 260px !important; height: 536px !important; }

  /* ---------- Quote band ---------- */
  [data-pencil-name="Warmth Band Wrap"] { padding: 96px 16px 0 !important; }
  [data-pencil-name="Warmth Band"] { height: 340px !important; }
  [data-pencil-name="Quote Wrap"] { width: 100% !important; padding: 0 22px !important; gap: 18px !important; }
  [data-pencil-name="Quote"] { font-size: 23px !important; line-height: 31px !important; letter-spacing: -0.5px !important; }

  /* ---------- Final CTA ---------- */
  [data-pencil-name="Final CTA"] { padding: 120px 20px 110px !important; }
  [data-pencil-name="CTA Headline Wrap"] { width: 100% !important; padding-top: 20px !important; }
  [data-pencil-name="CTA Headline"] { font-size: 42px !important; line-height: 46px !important; letter-spacing: -1.4px !important; }
  [data-pencil-name="CTA Sub Wrap"] { width: 100% !important; padding-top: 18px !important; }
  [data-pencil-name="CTA Sub"] { font-size: 16px !important; line-height: 26px !important; }
  [data-pencil-name="CTA Buttons"] { flex-direction: column !important; gap: 12px !important; padding-top: 32px !important; width: 100% !important; }
  [data-pencil-name="CTA App Store"] { justify-content: center !important; width: 100% !important; }
  [data-pencil-name="CTA Primary"] { width: 100% !important; }
  [data-pencil-name="CTA Note"] { white-space: normal !important; text-align: center !important; }

  /* ---------- Footer ---------- */
  [data-pencil-name="Footer"] { padding: 0 20px 40px !important; gap: 24px !important; }
  [data-pencil-name="Footer Row"] {
    flex-direction: column !important; gap: 18px !important; align-items: center !important;
  }
}