/* Vaelo — mobile experience. Every rule lives inside the media query:
   desktop rendering is untouched. */

/* Elements only used on mobile (hamburger, menu, bottom CTA bar) are
   created by main.js and hidden on desktop: */
.m-menu-btn,.m-menu,.m-ctabar{display:none}

@media (max-width: 768px){

  /* ---------- Motion: calm & cheap on phones ---------- */
  /* Parallax layers pinned static (JS also skips them ≤768px) */
  [data-parallax]{top:0!important;bottom:0!important;transform:none!important}
  /* Softer, faster reveals — no long float-in while thumb-scrolling */
  .reveal{transform:translateY(18px)!important;transition-duration:.55s!important}
  .reveal.in{transform:none!important}
  /* Heavy blur glows are GPU-expensive on phones — lighten them */
  [style*="blur(50px)"]{filter:blur(20px)!important}
  [style*="blur(40px)"]{filter:blur(20px)!important}

  /* Viewport heights: use small-viewport units so the URL bar
     collapsing doesn't make sections jump */
  @supports (height: 1svh){
    [style*="min-height:92vh"]{min-height:92svh!important}
    [style*="min-height:80vh"]{min-height:72svh!important}
  }

  /* ---------- Global rhythm ---------- */
  [style*="padding-top:96px"]{padding-top:56px!important}
  [style*="padding-bottom:96px"]{padding-bottom:56px!important}
  [style*="padding-top:88px"]{padding-top:52px!important}
  [style*="padding-bottom:88px"]{padding-bottom:52px!important}
  [style*="padding-top:80px"]{padding-top:48px!important}
  [style*="padding-bottom:80px"]{padding-bottom:48px!important}
  [style*="padding-top:72px"]{padding-top:44px!important}
  [style*="padding-bottom:72px"]{padding-bottom:44px!important}
  [style*="padding-top:64px"]{padding-top:40px!important}
  [style*="padding-bottom:64px"]{padding-bottom:40px!important}
  [style*="padding-top:56px"]{padding-top:36px!important}
  .container,.container-sm{padding-left:20px;padding-right:20px}

  /* ---------- Type scale ---------- */
  h1{font-size:36px!important;line-height:1.08!important}
  h2,.h2{font-size:27px!important;line-height:1.1!important}
  .display-lg{font-size:30px!important}
  blockquote{font-size:19px!important}
  .lead{font-size:16px!important}

  /* ---------- Layout: stack all splits & grids ---------- */
  .split,.split.rev,.quiz-grid{grid-template-columns:1fr!important;gap:30px!important}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important;gap:16px!important}
  .quiz-grid > div{position:static!important}

  /* Plan tiers: stack, hero (Rhythm) card first */
  .plans{grid-template-columns:1fr!important;gap:20px!important}
  .plans > div:nth-child(2){order:-1;margin-top:14px}
  .plans > div{padding:32px 24px!important}

  /* Comparison rows (why-vaelo): stack the two halves */
  .vs-row{grid-template-columns:1fr!important}
  .vs-row > div{border-right:none!important;padding:30px 24px!important}
  .vs-row > div:first-child{border-bottom:1px solid #222}

  /* Footer link grid: brand on top, columns side by side */
  [style*="grid-template-columns:1.4fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:28px!important}
  [style*="grid-template-columns:1.4fr 1fr 1fr"] > div:first-child{grid-column:1 / -1}

  /* Stat strips (24/7 · Seconds · Zero): tighter on small screens */
  [style*="border-top:1px solid #222;border-bottom:1px solid #222"] .display{font-size:20px!important}

  /* Ghost display words: keep them decorative, not dominant */
  [aria-hidden="true"] .display{opacity:.7}

  /* Phone mockup: full-bleed comfortable width */
  [style*="max-width:400px"],[style*="max-width:390px"]{max-width:340px!important}

  /* ---------- Header & nav ---------- */
  .navbar{padding:12px 16px!important}
  .hdr-links{display:none!important}
  .nav-links{display:none!important}
  .m-menu-btn{display:grid;place-items:center;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:0}
  .m-menu-btn span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;position:relative}
  .m-menu-btn span::before,.m-menu-btn span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s}
  .m-menu-btn span::before{top:-7px}
  .m-menu-btn span::after{top:7px}
  body.m-open .m-menu-btn span{background:transparent}
  body.m-open .m-menu-btn span::before{transform:translateY(7px) rotate(45deg)}
  body.m-open .m-menu-btn span::after{transform:translateY(-7px) rotate(-45deg)}
  .m-menu{position:fixed;inset:0;top:0;z-index:60;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .2s}
  body.m-open .m-menu{display:block;opacity:1;pointer-events:auto}
  .m-menu .m-panel{position:absolute;top:0;left:0;right:0;background:#121212;border-radius:16px;padding:18px 20px 26px;border-bottom:1px solid #222;transform:translateY(-8px);transition:transform .2s}
  body.m-open .m-menu .m-panel{transform:none}
  .m-menu .m-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .m-menu a{display:block;padding:15px 6px;font-size:17px;font-weight:600;color:#fff;border-bottom:1px solid #222}
  .m-menu a:last-child{border-bottom:none}
  .m-menu a.m-cta{margin-top:14px;text-align:center;background:#fff;color:#0A0A0A;border-radius:999px;padding:15px;border-bottom:none}

  /* ---------- Buttons: thumb-friendly ---------- */
  .btn:not(.btn-sm){display:block;width:100%;padding:16px 24px}
  .btn-sm{padding:11px 18px}

  /* ---------- Photos ---------- */
  .photo{height:300px!important}
  .photo img{border-radius:16px}

  /* Full-bleed statement image: shorter on phones */
  [style*="height:82vh"]{height:56vh!important;min-height:380px!important}
  [style*="height:62vh"],[style*="height:60vh"]{height:44vh!important;min-height:320px!important}

  /* ---------- Hero stats row ---------- */
  [style*="display:flex;gap:32px"]{flex-wrap:wrap;gap:18px 24px!important}

  /* ---------- Feature cards (image + text) ---------- */
  .card[style*="grid-template-columns"]{display:flex!important;flex-direction:column;min-height:0!important}
  .card[style*="grid-template-columns"] img{height:170px!important}

  /* ---------- Cards & quiz/intake panels ---------- */
  [style*="padding:36px"]{padding:22px!important}
  [style*="padding:32px 28px"]{padding:24px 20px!important}
  [style*="padding:30px"]{padding:22px!important}
  [style*="padding:52px 48px"]{padding:32px 24px!important}
  [style*="padding:44px 40px"]{padding:30px 24px!important}

  /* Statement / editorial sections: soften the giant paddings */
  [style*="padding-top:130px"]{padding-top:72px!important}
  [style*="padding-bottom:130px"]{padding-bottom:72px!important}
  [style*="padding-top:140px"]{padding-top:76px!important}
  [style*="padding-bottom:140px"]{padding-bottom:76px!important}
  [style*="padding-top:110px"]{padding-top:64px!important}
  [style*="padding-bottom:110px"]{padding-bottom:64px!important}
  [style*="padding-top:120px"]{padding-top:68px!important}
  [style*="padding-bottom:120px"]{padding-bottom:68px!important}
  [style*="padding-top:100px"]{padding-top:60px!important}
  [style*="padding-bottom:100px"]{padding-bottom:60px!important}
  [style*="padding:150px 0 0"]{padding:80px 0 0!important}
  [style*="padding:140px 0 130px"]{padding:76px 0 72px!important}
  [style*="padding:130px 0 110px"]{padding:72px 0 64px!important}
  [style*="padding:120px 0 120px"]{padding:68px 0 68px!important}

  /* Connector lines: shorter */
  .vline,.vline2{height:80px!important;margin-top:40px!important}

  input,select,textarea,button{font-size:16px!important} /* prevents iOS zoom-on-focus */

  /* ---------- Plans: legacy ---------- */
  #plans a{min-height:44px}

  /* Real-life chat entrance: quicker bubble cascade on mobile */
  #real-life .rl-msgs > div:nth-child(1){transition-delay:.3s!important}
  #real-life .rl-msgs > div:nth-child(2){transition-delay:.45s!important}
  #real-life .rl-msgs > div:nth-child(3){transition-delay:.6s!important}
  #real-life .rl-msgs > div:nth-child(4){transition-delay:.75s!important}
  #real-life .rl-msgs > div:nth-child(5){transition-delay:.9s!important}
  #real-life .rl-msgs > div:nth-child(6){transition-delay:1.05s!important}
  #real-life .rl-phone{transform:translateY(40px)!important;transition-duration:.7s!important}
  #real-life.rl-in .rl-phone{transform:none!important}

  /* Sticky side rails (FAQ intro, etc.) flow normally when stacked */
  [style*="position:sticky;top:110px"]{position:static!important}
  /* Bridge moments (community → membership): tighter on phones */
  [style*="margin-top:-40px"]{margin-top:-16px!important}

  /* Human-sessions add-on strip: stack cleanly */
  [style*="padding:32px 36px"]{padding:24px 20px!important}
  .plans + div[style*="border-radius:20px"]{flex-direction:column;align-items:flex-start!important}

  /* ---------- Footer ---------- */
  .site-footer .inner{flex-direction:column;align-items:flex-start;gap:16px}

  /* ---------- Sticky bottom CTA bar ---------- */
  .m-ctabar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-top:1px solid #222;transform:translateY(110%);transition:transform .25s ease}
  body.m-cta-visible .m-ctabar{transform:none}
  .m-ctabar a{display:block;text-align:center;background:#fff;color:#0A0A0A;font-size:16px;font-weight:600;padding:15px;border-radius:999px}
  .m-ctabar a:hover{color:#0A0A0A}
  body.m-cta-visible{padding-bottom:74px}
}