/* Phone landing page. Everything here applies only up to 640px wide; computers and tablets keep the main design. */
.m-bar,.m-main,.m-dock{display:none}

@media (max-width:640px){
  .site-header,.mobile-menu,#main,.skip{display:none!important}
  html{scroll-padding-top:72px}
  body{background:var(--paper)}

  /* Top bar */
  .m-bar{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:60;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top));background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
  .m-bar.is-scrolled{border-color:var(--line)}
  .m-logo{margin-right:auto}.m-logo img{height:24px;width:auto}
  .m-signin{font-size:15px;color:var(--ink-soft)}
  .m-pill{background:var(--seal);color:var(--paper);font-size:14px;padding:9px 16px;border-radius:999px}

  .m-main{display:block}
  .m-main em{font-style:italic;color:var(--seal)}
  .m-main img{height:auto}
  .m-eye{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--seal);margin-bottom:10px}
  .m-head{padding:0 20px;margin-bottom:22px}
  .m-head h2,.m-final h2{font-size:38px;line-height:1.02;letter-spacing:-.045em;font-weight:400}

  /* Hero */
  .m-hero{padding:22px 20px 40px}
  .m-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin-bottom:20px}
  .m-tag i{width:7px;height:7px;border-radius:50%;background:var(--seal);box-shadow:0 0 0 0 rgba(181,35,30,.5);animation:m-pulse 2s infinite}
  .m-title{font-size:46px;line-height:.98;letter-spacing:-.055em;font-weight:400}
  .m-title em{display:block}
  .m-lede{font-size:18px;line-height:1.45;color:var(--ink-soft);margin-top:16px}
  .m-hero-art{margin:26px 0 24px}
  .m-shot{position:relative;container-type:inline-size;border-radius:22px;overflow:hidden;background:#fbf7ef}
  .m-shot>img{width:100%;aspect-ratio:3/2}
  /* The Astitva name printed on the book and deck, placed exactly as on the desktop hero */
  .m-book-print{position:absolute;left:13%;width:30%;top:29%;display:flex;flex-direction:column;align-items:center;gap:2.6cqw;color:var(--paper)}
  .m-book-print>img:first-child{width:96%}
  .m-book-print>span{font-size:1.6cqw;letter-spacing:.32em}
  .m-book-print .m-book-seal{width:25%;margin-top:4cqw}
  .m-deck-print{position:absolute;left:47%;top:44%;width:24%;display:flex;flex-direction:column;align-items:flex-start;gap:2cqw;color:var(--ink)}
  .m-deck-print img{width:83%}
  .m-deck-print strong{font-size:3.5cqw;font-weight:400;line-height:1.03;letter-spacing:-.055em;margin-top:1cqw}
  .m-deck-print span{font-size:1.15cqw;line-height:1.25}
  .m-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
  .m-chips .m-float:nth-child(2){animation-delay:-1.6s}.m-chips .m-float:nth-child(3){animation-delay:-3.2s}
  .m-float{position:relative;display:inline-flex;align-items:center;gap:6px;background:#fffdf8;color:var(--ink);font-size:13px;padding:8px 12px;border-radius:12px;box-shadow:0 12px 24px -12px rgba(16,45,42,.45);animation:m-bob 5s ease-in-out infinite}
  .m-float b{color:var(--seal);font-weight:400}
  .m-float i{width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}
  .m-float i+i{margin-left:-8px;box-shadow:0 0 0 2px #fffdf8}
  .m-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;width:100%;background:var(--seal);color:var(--paper);font-size:17px;border-radius:16px;box-shadow:0 14px 28px -14px rgba(181,35,30,.7);transition:transform .15s}
  .m-cta:active{transform:scale(.98)}
  .m-fine{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}

  /* Sections */
  .m-sec{padding:44px 0}
  .m-note{padding:0 20px;margin-top:14px;font-size:13px;color:var(--muted)}

  /* Swipe rows */
  .m-swipe{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 8px;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .m-swipe::-webkit-scrollbar{display:none}
  .m-swipe>*{flex:0 0 82%;scroll-snap-align:start}
  .m-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .m-dots i{width:6px;height:6px;border-radius:999px;background:var(--line);transition:width .3s,background .3s}
  .m-dots i.on{width:20px;background:var(--seal)}

  .m-card{display:flex;flex-direction:column;padding:12px 12px 22px;border-radius:24px;background:#fffcf6;border:1px solid var(--line);overflow:hidden}
  .m-card h3{font-size:28px;line-height:1.05;margin:8px 8px 8px}
  .m-card p{font-size:15px;line-height:1.45;color:var(--ink-soft);margin:0 8px}
  .m-num{font-size:12px;letter-spacing:.2em;color:var(--seal);margin:16px 8px 0}
  .m-vis{height:190px;border-radius:16px;overflow:hidden;position:relative}
  .m-vis-strategy{background:var(--ink);color:var(--paper);padding:18px;display:flex;flex-direction:column;gap:10px}
  .m-vis-strategy small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--seal-soft)}
  .m-vis-strategy p{margin:0;color:var(--paper);font-size:19px;line-height:1.25}
  .m-vis-strategy em{color:var(--seal-soft)!important}
  .m-vis-strategy span{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
  .m-vis-strategy i{font-style:normal;font-size:11px;border:1px solid rgba(247,241,230,.3);border-radius:999px;padding:3px 9px}
  .m-vis-logo{background:var(--paper-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
  .m-vis-logo img:first-child{width:78px}.m-vis-logo img:last-child{width:58%}
  .m-vis-theme{background:var(--paper-2);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
  .m-sw{display:grid;grid-template-rows:repeat(4,1fr);border-radius:10px;overflow:hidden}
  .m-sw i{background:var(--c);display:flex;align-items:center;padding:0 10px}
  .m-sw b{font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--t)}
  .m-aa{background:#fffcf6;border-radius:10px;display:flex;flex-direction:column;justify-content:center;padding:12px}
  .m-aa span{font-size:58px;line-height:1;letter-spacing:-.04em;color:var(--ink)}
  .m-aa small{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.3}
  .m-vis-deck{background:var(--ink)}
  .m-vis-deck img{position:absolute;width:78%;border-radius:8px;box-shadow:0 14px 24px -12px rgba(0,0,0,.7)}
  .m-vis-deck img:first-child{left:6%;top:12%;z-index:2}.m-vis-deck img:last-child{right:6%;bottom:12%;opacity:.9}

  /* Steps */
  .m-steps{margin:0 20px;display:grid;gap:0;position:relative}
  .m-steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:1px;background:var(--line)}
  .m-steps li{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:14px 0}
  .m-steps span{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:17px}
  .m-steps b{display:block;font-size:21px;font-weight:400;letter-spacing:-.02em}
  .m-steps p{font-size:15px;color:var(--ink-soft);margin:4px 0 8px;line-height:1.45}
  .m-steps small{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--seal);border:1px solid currentColor;border-radius:999px;padding:3px 9px}

  /* Dark deck section */
  .m-dark{background:var(--ink);color:var(--paper);border-radius:28px;margin:0 8px}
  .m-dark .m-head h2{color:var(--paper)}.m-dark .m-eye,.m-dark em{color:var(--seal-soft)}
  .m-dark .m-note{color:rgba(247,241,230,.6)}
  .m-dark .m-dots i{background:rgba(247,241,230,.2)}.m-dark .m-dots i.on{background:var(--seal-soft)}
  .m-slides>figure{flex-basis:88%}
  .m-slides img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;box-shadow:0 18px 30px -18px rgba(0,0,0,.7)}
  .m-slides figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;color:rgba(247,241,230,.7)}

  /* Brands */
  .m-brands article{border-radius:22px;overflow:hidden;background:#fffcf6;border:1px solid var(--line)}
  .m-brands img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .m-brands div{display:grid;padding:14px 16px 16px}
  .m-brands small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--seal)}
  .m-brands b{font-size:28px;font-weight:400;letter-spacing:-.03em}
  .m-brands span{font-size:14px;color:var(--muted)}

  /* Compare */
  .m-vs{margin:0 20px;display:grid;gap:10px}
  .m-vs div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:#fffcf6}
  .m-vs small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .m-vs b{grid-row:span 2;align-self:center;font-size:22px;font-weight:400;letter-spacing:-.02em}
  .m-vs span{font-size:14px;color:var(--ink-soft)}
  .m-vs .us{background:var(--seal);border-color:var(--seal)}.m-vs .us *{color:var(--paper)}
  .m-vs .us{grid-template-columns:1fr}.m-vs .us b{grid-row:auto;font-size:28px}

  /* Plans */
  .m-plans>article{flex-basis:76%;display:flex;flex-direction:column;gap:6px;padding:22px 20px;border-radius:22px;border:1px solid var(--line);background:#fffcf6;min-height:230px}
  .m-plans small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--seal)}
  .m-plans strong{font-size:44px;font-weight:400;letter-spacing:-.04em;line-height:1.05}
  .m-plans strong i{font-style:normal;font-size:18px;color:var(--muted)}
  .m-plans b{font-weight:400;font-size:17px}
  .m-plans p{font-size:14px;color:var(--ink-soft);line-height:1.45;margin-top:auto}
  .m-plans .best{background:var(--ink);border-color:var(--ink);transform:translateY(-4px);box-shadow:0 20px 34px -20px rgba(16,45,42,.8)}
  .m-plans .best *{color:var(--paper)}.m-plans .best small{color:var(--seal-soft)}.m-plans .best strong i{color:rgba(247,241,230,.6)}

  /* FAQ */
  .m-faq{margin:0 20px;border-top:1px solid var(--line)}
  .m-faq details{border-bottom:1px solid var(--line)}
  .m-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-size:18px;line-height:1.3}
  .m-faq summary::-webkit-details-marker{display:none}
  .m-faq summary::after{content:"+";color:var(--seal);font-size:24px;line-height:1;transition:transform .3s}
  .m-faq details[open] summary::after{transform:rotate(45deg)}
  .m-faq p{padding:0 0 18px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
  .m-faq a{color:var(--seal);text-decoration:underline}

  /* Final call to action */
  .m-final{position:relative;margin:12px 8px 0;padding:48px 24px 40px;border-radius:28px;background:var(--seal);color:var(--paper);text-align:center;overflow:hidden}
  .m-final img{position:absolute;width:220px;right:-60px;top:-60px;opacity:.14;filter:brightness(0) invert(1);animation:spin 40s linear infinite}
  .m-final h2{color:var(--paper)}.m-final em{color:var(--paper)!important}
  .m-final p{margin:12px 0 26px;opacity:.85}
  .m-cta-light{background:var(--paper);color:var(--seal);box-shadow:none}
  .m-signin2{display:block;margin-top:16px;font-size:14px;text-decoration:underline;opacity:.85}

  /* Start button that follows the thumb once the hero button scrolls away */
  .m-dock{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;transform:translateY(140%);transition:transform .45s var(--ease)}
  .m-dock.is-on{transform:none}
  .m-dock .m-cta{box-shadow:0 18px 30px -12px rgba(16,45,42,.6)}

  .footer{padding-bottom:84px}
}

@media (max-width:370px){.m-chips{gap:5px}.m-chips .m-float{font-size:11.5px;padding:6px 8px;gap:4px}.m-float i{width:10px;height:10px}}
@keyframes m-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(181,35,30,.5)}80%,100%{box-shadow:0 0 0 8px rgba(181,35,30,0)}}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.m-float,.m-tag i,.m-final img{animation:none}.m-dock{transition:none}}