/* Lily's Ledger homepage, mobile layout (820px and narrower). Desktop is untouched. */
.v3 .burger{display:none}
.v3 .m-art{display:none}

@media (max-width: 820px){
  .v3.mob{--fs:40px; --sky:#E4F4FE}
  .v3.mob .scroller{height:100vh; height:100svh; scroll-snap-type:none; overscroll-behavior-y:none}
  .v3.mob .stage{position:relative; height:auto; overflow:visible; background:#E4F4FE}
  .v3.mob .world,.v3.mob .scrim,.v3.mob .snaps{display:none}

  /* enter screen */
  .v3.mob .gate{position:fixed; z-index:60}
  .v3.mob .gate-in{gap:16px}
  .v3.mob .gate-in img{height:112px}
  .v3.mob .gate-in h2{font-size:34px}
  .v3.mob .gate-in p{font-size:17px}
  .v3.mob .enter{height:56px; padding:0 28px; font-size:17px}

  /* intro: one swipe plays the zoom */
  .v3.mob .intro{position:fixed; z-index:50; pointer-events:auto; touch-action:none}
  .v3.mob .intro .i-logo{top:72px; height:118px}
  .v3.mob .intro .i-hint{bottom:34px; font-size:13px}
  .v3.mob .intro .i-hint svg{transform:rotate(180deg); animation:none}

  /* header: logo + menu button */
  .v3.mob .hdr{position:fixed; height:64px; padding:0 12px 0 20px; gap:0; justify-content:space-between; z-index:40; transition:background .25s, box-shadow .25s}
  .v3.mob .hdr.solid{background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 8px 24px -18px rgba(20,37,74,.45)}
  .v3.mob .hdr .logo,.v3.mob .hdr .logo img{height:44px}
  .v3.mob .burger{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 8px 20px -14px rgba(20,37,74,.6); cursor:pointer}
  .v3.mob .burger span{display:block; width:20px; height:2.5px; border-radius:2px; background:#1D2340; transition:transform .25s, opacity .2s}
  .v3.mob .hdr.open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .v3.mob .hdr.open .burger span:nth-child(2){opacity:0}
  .v3.mob .hdr.open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .v3.mob .hdr nav{position:absolute; left:0; right:0; top:64px}
  .v3.mob .menu{display:none; flex-direction:column; gap:0; margin:0; padding:4px 20px 18px; background:#FFFFFF; box-shadow:0 18px 30px -20px rgba(20,37,74,.5)}
  .v3.mob .hdr.open{background:#FFFFFF}
  .v3.mob .hdr.open .menu{display:flex}
  .v3.mob .menu li{border-bottom:1px solid rgba(29,35,64,.08)}
  .v3.mob .menu li:last-child{border-bottom:0}
  .v3.mob .menu a{min-height:54px; font-size:19px; width:100%}

  /* scenes stacked: text above, scene below */
  .v3.mob main{display:block}
  .v3.mob .txt{position:relative; left:auto; width:auto; display:flex; flex-direction:column; gap:14px; padding:72px 24px 0; font-size:var(--fs); background:linear-gradient(180deg, #E4F4FE 0%, #CDEBFD 55%, #A9DCFC 100%)}
  .v3.mob .txt.eve{background:linear-gradient(180deg, #EAF0FA 0%, #C9D7F0 55%, #9DB6E2 100%)}
  .v3.mob .txt > .lbl,.v3.mob .txt > .hl,.v3.mob .txt > .sup,.v3.mob .txt > .acts{position:relative; z-index:2}
  .v3.mob .lbl{align-self:flex-start; font-size:13px}
  .v3.mob .hl{font-size:1em !important; line-height:1.04}
  .v3.mob .sup{max-width:none !important; font-size:17px; line-height:1.5}
  .v3.mob .acts{flex-direction:column; align-items:flex-start; gap:10px; margin-top:4px}
  .v3.mob .btn{height:52px; padding:0 26px; font-size:17px}
  .v3.mob .lnk{font-size:17px}
  .v3.mob .txt .pr{left:calc(24px + var(--ml) * 1em) !important; top:calc(var(--h2top) + var(--mt) * 1em) !important; width:calc(var(--mw) * 1em) !important; z-index:3}
  .v3.mob .txt .pr.pr-lbl{left:calc(24px + var(--lblw) + 10px) !important; top:calc(var(--lbltop) - 12px) !important; width:44px !important}

  /* the scene under the text */
  .v3.mob .m-art{display:block; position:relative; margin:4px -24px 0; overflow:hidden; background-repeat:no-repeat; background-size:auto 100%; background-position:50% 0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%); mask-image:linear-gradient(180deg, transparent 0, #000 22%)}
  .v3.mob .m-art.day{background-image:url(https://static.wixstatic.com/media/40168f_1a6834aab369453487af1c7e023e6bc5~mv2.webp)}
  .v3.mob .m-art.eve{background-image:url(https://static.wixstatic.com/media/40168f_b2dd9b7ca60a49f78cd83a0b2b42aad8~mv2.webp)}
  .v3.mob .m-art img{position:absolute; display:block}
  .v3.mob .m-art .sh{position:absolute}
  .v3.mob .m-art .m-lily{position:absolute; inset:0; opacity:0; transform:translateX(-16px); transition:opacity .7s ease, transform .7s ease}
  .v3.mob .m-art.in .m-lily{opacity:1; transform:none}
  .v3.mob .m-art .chalk{z-index:3}

  /* scene 1: the clock tower stands beside the text */
  .v3.mob .txt.hero{padding-top:88px; background:none}
  .v3.mob .txt.hero > .m-art{position:absolute; inset:0; margin:0; z-index:0; -webkit-mask-image:none; mask-image:none; background-position:30% 0}
  .v3.mob .txt.hero > .m-art::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(228,244,254,.92) 0%, rgba(228,244,254,.78) 30%, rgba(228,244,254,0) 62%)}
  .v3.mob .txt.hero > .sup,.v3.mob .txt.hero > .acts{max-width:var(--col) !important}
  .v3.mob .txt.hero > .lbl,.v3.mob .txt.hero > .hl,.v3.mob .txt.hero > .sup,.v3.mob .txt.hero > .acts,.v3.mob .txt.hero > .pr{opacity:var(--tin, 1)}

  /* About + FAQ */
  .v3.mob .foot{padding:72px 20px 0; scroll-snap-align:none}
  .v3.mob .foot-in{grid-template-columns:minmax(0,1fr); gap:64px}
  .v3.mob .about-col,.v3.mob .faq-col{gap:18px}
  .v3.mob .faq-col{scroll-margin-top:80px}
  .v3.mob .f-h{font-size:32px; line-height:1.12}
  .v3.mob .f-p{font-size:17px}
  .v3.mob .mv{grid-template-columns:minmax(0,1fr); gap:12px}
  .v3.mob .card{padding:22px 22px 24px; border-radius:20px}
  .v3.mob .card h3{font-size:18px}
  .v3.mob .card p{font-size:16px}
  .v3.mob .faq{gap:10px}
  .v3.mob .faq details{padding:0 18px; border-radius:18px}
  .v3.mob .faq summary{min-height:64px; padding:14px 0; font-size:16px; line-height:1.4}
  .v3.mob .faq summary::after{width:30px; height:30px; font-size:18px}
  .v3.mob .faq .ans{padding:0 0 20px}
  .v3.mob .faq .ans p{font-size:16px}
  .v3.mob .fbar{flex-direction:column; align-items:flex-start; gap:18px; margin-top:64px; padding:28px 0 120px}
  .v3.mob .fbar img{height:52px}
  .v3.mob .fbar ul{margin:0; gap:12px 24px}
  .v3.mob .fbar .copy{flex-basis:auto}

  .v3.mob .snd{right:16px; bottom:84px; width:52px; height:52px; z-index:55}
}