/* Mitra — the student app, round 2. Mint-cream ground, plum ink, coral signal, and Mitra the fox as the one bold device.
   Phone-first, Hindi-first, big targets, one thing per screen. Content is opaque; only the tab bar floats. */
body.app{min-height:100svh;background:#DCE7DE;display:flex;justify-content:center}
.phone{position:relative;width:100%;max-width:440px;min-height:100svh;background:var(--bg);overflow:hidden;display:flex;flex-direction:column}
@media (min-width:600px){.phone{box-shadow:0 30px 80px -40px rgba(43,35,64,.5)}}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s .45s;padding-bottom:24px;background:var(--bg)}
.scr.on{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.scr.has-nav{padding-bottom:100px}
.pad{padding:0 22px}
.topbar{display:flex;align-items:center;gap:10px;padding:16px 22px 6px;min-height:58px}
.topbar .logo b{font-size:20px}
.back{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-left:-8px;background:var(--card)}
.back svg{width:22px;height:22px}
.sync{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:99px;background:var(--card);font:600 12px var(--display);color:var(--ink-2);box-shadow:var(--shadow)}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--neem)}
.sync.off i{background:var(--haldi);animation:pulse 1.6s infinite}
.sync.off{color:#7A5410}
h1.big{font:800 36px/1.1 var(--display);margin-top:10px;text-wrap:balance}
h1.big em{font-style:normal;color:var(--coral-2)}
.lead{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin-top:12px;text-wrap:pretty}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;border-radius:22px;background:var(--plum);color:var(--plum-ink);font:700 17.5px var(--display);transition:transform .2s var(--spring),opacity .3s;text-decoration:none}
.cta:active{transform:scale(.97)}
.cta:disabled{opacity:.35}
.cta.coral{background:var(--coral);color:var(--plum)}
.cta.soft{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.cta svg{width:20px;height:20px}
.foot{margin-top:auto;padding:22px 22px 0;display:flex;flex-direction:column;gap:10px}
.fine{font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.45}
.fine a{color:var(--ink-2)}
.mitra{position:absolute;right:-6%;bottom:0;width:62%;pointer-events:none;z-index:0}
.mitra img{width:100%;display:block;filter:drop-shadow(0 18px 24px rgba(43,35,64,.18))}

/* choice lists */
.choices{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.choice{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px;border-radius:22px;background:var(--card);text-align:left;transition:box-shadow .2s,transform .2s var(--spring);box-shadow:0 1px 0 var(--line)}
.choice:active{transform:scale(.99)}
.choice .ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--bg);flex:0 0 auto;color:var(--coral-2)}
.choice .ic svg{width:22px;height:22px}
.choice b{display:block;font:700 17px/1.25 var(--display)}
.choice small{display:block;font-size:13.5px;color:var(--ink-3);margin-top:2px}
.choice .rd{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto;transition:all .2s}
.choice.on{box-shadow:0 0 0 2px var(--coral)}
.choice.on .rd{border:7px solid var(--coral)}

/* splash */
.splash{background:var(--bg)}
.splash .hero{position:relative;height:46svh;min-height:300px;overflow:hidden}
.splash .hero img{position:absolute;left:50%;bottom:0;height:92%;transform:translateX(-50%);filter:drop-shadow(0 24px 30px rgba(43,35,64,.2))}
.splash .hero.video{height:52svh;min-height:340px;border-radius:0 0 36px 36px;background:#EAF2EB}
.splash .hero.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.015)}
.splash .hero.video::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,rgba(234,242,235,0),var(--bg))}
.unmute{position:absolute;right:16px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 12px;border-radius:99px;background:var(--plum);color:var(--plum-ink);font:700 14px var(--display);box-shadow:var(--shadow)}
.unmute svg{width:18px;height:18px}
.splash .hero.video+.pad .name{margin-top:6px}
.splash .name{font:800 56px/1 var(--display);text-align:center;margin-top:-10px}
.splash .tag{font:600 18px/1.35 var(--display);text-align:center;color:var(--ink-2);margin-top:6px}
.langs{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.langs button{height:60px;border-radius:22px;background:var(--card);font:700 19px var(--display);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 1px 0 var(--line)}
.langs button small{font:500 13px var(--sans);color:var(--ink-3)}

/* form */
.field{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.field label{font:600 14px var(--display);color:var(--ink-2)}
.field input{height:58px;border-radius:18px;border:0;background:var(--card);padding:0 18px;font:600 19px var(--sans);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.field input:focus{outline:none;box-shadow:0 0 0 2px var(--coral)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:64px;height:50px;border-radius:16px;background:var(--card);font:700 16px var(--display);box-shadow:0 1px 0 var(--line)}
.seg button.on{background:var(--plum);color:var(--plum-ink)}
.schoolcard{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--bg-2);margin-top:18px}
.schoolcard svg{width:26px;height:26px;color:var(--coral-2);flex:0 0 auto}
.schoolcard b{display:block;font:700 15.5px/1.3 var(--display)}
.schoolcard small{color:var(--ink-3);font-size:13px}

/* consent */
.consent .step{display:inline-flex;align-items:center;gap:8px;font:700 12.5px var(--display);color:var(--coral-2);margin-top:8px}
.consent .step i{display:inline-block;width:22px;height:4px;border-radius:2px;background:var(--line-2)}
.consent .step i.on{background:var(--coral)}
.otp{display:flex;gap:12px;justify-content:center;margin-top:26px}
.otp input{width:62px;height:72px;border-radius:18px;border:0;background:var(--card);text-align:center;font:700 30px var(--display);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.otp input:focus{outline:none;box-shadow:0 0 0 2px var(--coral)}
.otp.bad input{box-shadow:0 0 0 2px var(--sindoor);animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.sent{display:flex;gap:12px;align-items:center;margin-top:22px;padding:14px 16px;border-radius:18px;background:var(--card);box-shadow:0 1px 0 var(--line)}
.sent svg{width:26px;height:26px;color:var(--coral-2);flex:0 0 auto}
.sent b{font:700 16px var(--display)}
.promise{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:22px}
.promise li{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:16px;line-height:1.45}
.promise li svg{width:24px;height:24px;color:var(--neem);margin-top:1px}
.promise li.no svg{color:var(--sindoor)}

/* home: the programme home. Text and Mitra share a two-column grid, so the bubble can never be covered. */
.home .top{padding:14px 22px 0}
.home .top .topbar{padding:0}
.home .grid2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;align-items:end;margin-top:10px}
.home .hello small{display:block;font:600 14px var(--display);color:var(--ink-2)}
.home .hello h2{font:800 27px/1.12 var(--display);margin-top:4px;text-wrap:balance}
.home .bubble{display:inline-block;margin-top:12px;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--card);font:600 13.5px/1.35 var(--display);box-shadow:var(--shadow);position:relative;z-index:1}
.home .mitra{position:relative;right:auto;bottom:auto;width:100%;align-self:end;justify-self:end;margin-bottom:-6px}
.home .mitra img{filter:drop-shadow(0 18px 24px rgba(43,35,64,.18))}
.cards{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.card{position:relative;display:block;width:100%;text-align:left;padding:18px 20px;border-radius:var(--r);background:var(--card);box-shadow:0 1px 0 var(--line);overflow:hidden}
.card .k{font:700 12px var(--display);color:var(--coral-2);text-transform:none}
.card h3{font:800 22px/1.15 var(--display);margin-top:6px;padding-right:56px}
.card p{font-size:14px;color:var(--ink-2);margin-top:4px;padding-right:56px}
.card .go{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--plum);color:var(--plum-ink);display:grid;place-items:center}
.card .go svg{width:20px;height:20px}
.card.lesson{background:var(--coral);box-shadow:none}
.card.lesson .k{color:var(--coral-ink)}
.card.lesson h3,.card.lesson p{color:var(--plum)}
.card.lesson p{opacity:.8}
.card.lesson .go{background:var(--plum)}
.card.lesson .ring{position:absolute;right:68px;top:18px;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--plum) var(--p),rgba(43,35,64,.18) 0);display:grid;place-items:center}
.card.lesson .ring::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--coral)}
.card.due{background:var(--plum);color:var(--plum-ink);box-shadow:none}
.card.due .k{color:#FFC9B5}
.card.due h3{color:var(--plum-ink)}
.card.due p{color:var(--plum-ink-2)}
.card.due .go{background:var(--coral);color:var(--plum)}
.card.done .k{color:var(--neem)}
.card.done .go{background:#DCEFE3;color:#2E6B48}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--card);box-shadow:0 1px 0 var(--line);text-align:left;width:100%}
.row .av{width:44px;height:44px;border-radius:50%;background:var(--coral-soft);color:var(--coral-ink);display:grid;place-items:center;font:800 18px var(--display);flex:0 0 auto}
.row b{display:block;font:700 15.5px var(--display)}
.row small{display:block;font-size:13px;color:var(--ink-3)}
.row .r{margin-left:auto;font:700 13px var(--display);color:var(--coral-2);white-space:nowrap}
.heavy{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;background:var(--sindoor-soft);color:#7E2414;text-align:left;width:100%}
.heavy b{display:block;font:800 20px/1.2 var(--display)}
.heavy small{display:block;font-size:13.5px;opacity:.85;margin-top:2px}
.heavy .hb{margin-left:auto;width:46px;height:46px;border-radius:50%;background:var(--sindoor);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.heavy .hb svg{width:22px;height:22px}
h2.sec{font:700 13px var(--display);color:var(--ink-3);margin:24px 0 10px}
.strip{display:flex;gap:6px;align-items:center;margin-top:8px}
.strip i{flex:1;height:8px;border-radius:4px;background:var(--bg-2)}
.strip i.f{background:var(--coral)}
.strip span{font:700 12.5px var(--display);color:var(--ink-2);margin-left:6px;white-space:nowrap}

/* learn: a course, not a sticker sheet. One featured card for this week's lesson, then eight rows in the same frame:
   Mitra in a round lit window on the lesson's colour, so every pose sits at the same scale and reads as one set. */
.learn .lhead{padding:4px 22px 0}
.learn .lhead p{font-size:15px;color:var(--ink-2);margin-top:2px}
.learn .strip{margin:14px 0 0}
.feat{position:relative;display:block;width:100%;text-align:left;margin-top:18px;padding:20px 20px 18px;border-radius:28px;background:var(--f);overflow:hidden;min-height:184px}
.feat .k{font:700 12px var(--display);color:rgba(43,35,64,.65)}
.feat h3{font:800 26px/1.1 var(--display);margin-top:6px;max-width:58%}
.feat p{font-size:14px;color:rgba(43,35,64,.75);margin-top:6px;max-width:56%}
.feat .go{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;background:var(--plum);color:var(--plum-ink);font:700 14px var(--display);margin-top:16px}
.feat .go svg{width:16px;height:16px}
.feat .fig{position:absolute;right:6%;bottom:0;width:36%;height:92%;display:flex;align-items:flex-end;justify-content:center}
.feat .fig::before{content:"";position:absolute;left:8%;right:8%;bottom:8px;height:14px;border-radius:50%;background:rgba(43,35,64,.22);filter:blur(6px)}
.feat .fig img{position:relative;max-height:100%;max-width:100%;filter:drop-shadow(0 10px 16px rgba(43,35,64,.18))}
.lessons{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.lrow{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px 12px 12px;border-radius:24px;background:var(--card);box-shadow:0 1px 0 var(--line);text-align:left;width:100%;transition:transform .2s var(--spring)}
.lrow:active{transform:scale(.99)}
.lrow .winwrap{display:block;position:relative;width:92px;height:92px;flex:0 0 auto}
.lrow .win{display:block;position:relative;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 50% 30%,color-mix(in oklch,var(--f) 70%,white),var(--f) 72%);overflow:hidden;flex:0 0 auto}
.lrow .win::after{content:"";position:absolute;left:18%;right:18%;bottom:10px;height:10px;border-radius:50%;background:rgba(43,35,64,.2);filter:blur(4px)}
.lrow .win img{position:absolute;left:50%;bottom:-2px;height:106%;max-width:none;transform:translateX(-50%);z-index:1}
.lrow .win img.wide{height:auto;width:112%;bottom:4px}
.lrow .tick{position:absolute;right:-3px;bottom:-3px;width:30px;height:30px;border-radius:50%;background:var(--neem);color:#fff;display:grid;place-items:center;z-index:3;box-shadow:0 0 0 3px var(--card)}
.lrow .tick svg{width:15px;height:15px}
.lrow.now .win{box-shadow:0 0 0 3px var(--coral)}
.lrow .n{font:700 11.5px var(--display);color:var(--ink-3)}
.lrow b{display:block;font:800 18px/1.15 var(--display);margin-top:2px}
.lrow small{display:block;font-size:13px;color:var(--ink-2);margin-top:3px}
.lrow .meta{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.lrow .meta span{font:600 11.5px var(--display);padding:3px 8px;border-radius:99px;background:var(--bg)}
.lrow .meta span.done{background:#DCEFE3;color:#2E6B48}
.lrow .meta span.now{background:var(--coral-soft);color:var(--coral-ink)}
.lrow .arr{width:34px;height:34px;border-radius:50%;background:var(--bg);display:grid;place-items:center;color:var(--ink-2)}
.lrow .arr svg{width:16px;height:16px}
.lrow.done .arr{background:transparent}
.offl{display:flex;align-items:center;gap:8px;margin:18px 2px 0;font-size:12.5px;color:var(--ink-3)}
.offl svg{width:15px;height:15px;color:var(--neem)}
.f-dawn{--f:#F8DDCB}.f-marigold{--f:#F9E3A8}.f-river{--f:#CFE7E2}.f-dusk{--f:#D8D2EC}.f-leaf{--f:#D9EACB}.f-plum{--f:#E8CFE0}.f-rose{--f:#F9D9D4}.f-sun{--f:#FBEBC2}

/* module player */
.player{background:var(--f)}
.player .stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 26px 0}
.player .stage.last{justify-content:flex-start;padding-top:6px}
.player .stage.last .mitra{position:relative;right:auto;bottom:auto;width:min(50%,200px);margin:16px auto 0}
.player .stage.last .mitra img{filter:drop-shadow(0 18px 24px rgba(43,35,64,.18))}
.player .count{font:700 13px var(--display);color:var(--ink-2)}
.player .ctext{font:700 27px/1.35 var(--display);margin-top:14px;text-wrap:pretty;min-height:7em}
.player .dots{display:flex;gap:6px;margin-top:10px}
.player .dots i{flex:1;height:5px;border-radius:3px;background:rgba(43,35,64,.14)}
.player .dots i.on{background:var(--plum)}
.listen{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:99px;background:var(--card);color:var(--ink);font:700 15px var(--display);align-self:flex-start;margin-top:20px;box-shadow:var(--shadow)}
.listen .pb{width:34px;height:34px;border-radius:50%;background:var(--plum);color:var(--plum-ink);display:grid;place-items:center}
.listen .pb svg{width:15px;height:15px}
.listen.playing .pb{background:var(--coral);color:var(--plum)}
.listen .eq{display:none;gap:2px;align-items:flex-end;height:14px}
.listen.playing .eq{display:inline-flex}
.listen .eq i{width:3px;background:var(--coral-2);border-radius:1px;animation:eq 1s infinite ease-in-out}
.listen .eq i:nth-child(2){animation-delay:.2s}.listen .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.player .nav2{display:flex;gap:10px;padding:18px 22px 0}
.player .nav2 .cta{flex:1}
.player .nav2 .cta.soft{flex:0 0 60px}
.trybox{margin-top:18px;padding:18px;border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.trybox .k{font:700 12px var(--display);color:var(--coral-2)}
.trybox p{font:700 20px/1.35 var(--display);margin-top:6px}
.orb{width:170px;height:170px;margin:20px auto 0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,rgba(255,255,255,.35) 70%);display:grid;place-items:center;font:700 16px var(--display);transform:scale(.7);transition:transform 4s ease-in-out}
.orb.in{transform:scale(1)}
.orb.out{transform:scale(.7);transition-duration:6s}


/* check-in */
.ci{background:var(--bg)}
.ci .prog{display:flex;gap:5px;flex:1;margin-left:6px}
.ci .prog i{flex:1;height:5px;border-radius:3px;background:var(--line-2);transition:background .3s}
.ci .prog i.on{background:var(--coral)}
.ci .stem{font:700 14px var(--display);color:var(--ink-3);margin-top:18px}
.ci .item{font:700 27px/1.3 var(--display);margin-top:10px;text-wrap:pretty;min-height:3.8em}
.ci .opts{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.ci .opt{display:flex;align-items:center;gap:14px;height:64px;padding:0 18px;border-radius:20px;background:var(--card);font:700 17px var(--display);text-align:left;transition:all .2s var(--ease);box-shadow:0 1px 0 var(--line)}
.ci .opt .bub{width:24px;height:24px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto;transition:all .2s}
.ci .opt.on{box-shadow:0 0 0 2px var(--coral)}
.ci .opt.on .bub{border:8px solid var(--coral)}
.ci .opt .lvl{margin-left:auto;display:flex;gap:3px}
.ci .opt .lvl i{width:5px;height:14px;border-radius:2px;background:var(--line-2)}
.ci .opt .lvl i.f{background:var(--ink-3)}
.intro{position:relative}
.intro .note{position:relative;z-index:1;display:flex;gap:12px;padding:16px;border-radius:18px;background:var(--card);box-shadow:0 1px 0 var(--line);margin-top:20px;font-size:15.5px;line-height:1.45;max-width:100%}
.intro h1.big,.intro .lead{max-width:100%}
.intro .pad{position:relative;z-index:1}
.intro .note svg{width:24px;height:24px;color:var(--neem);flex:0 0 auto}
.ciintro .mitra{position:relative;right:auto;bottom:auto;width:min(52%,210px);margin:18px auto 0;pointer-events:none}
.ciintro .mitra img{max-height:30svh;width:auto;max-width:100%;margin:0 auto}
.ciintro .mitra img{filter:drop-shadow(0 18px 24px rgba(43,35,64,.18))}
.ciintro .foot{padding-top:12px}

/* thanks + support */
.thanks{background:var(--bg)}
.thanks .hero{position:relative;height:40svh;min-height:260px}
.thanks .hero img{position:absolute;left:50%;bottom:0;height:90%;transform:translateX(-50%);filter:drop-shadow(0 24px 30px rgba(43,35,64,.2))}
.support{background:var(--plum);color:var(--plum-ink)}
.support .hero{position:relative;height:38svh;min-height:250px;overflow:hidden}
.support .hero img{position:absolute;left:50%;bottom:0;height:92%;transform:translateX(-50%);filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
.support h1.big{color:#FFF7EC}
.support .lead{color:var(--plum-ink-2)}
.who{display:flex;gap:14px;align-items:center;padding:16px;border-radius:22px;background:rgba(255,247,242,.08);margin-top:22px}
.who .av{width:48px;height:48px;border-radius:50%;background:var(--coral);color:var(--plum);display:grid;place-items:center;font:800 20px var(--display);flex:0 0 auto}
.who b{display:block;font:700 16px var(--display);color:#FFF7EC}
.who small{color:var(--plum-ink-2);font-size:13.5px}
.support .cta{background:#FFF7EC;color:var(--plum)}
.support .cta.call{background:var(--sindoor);color:#fff}
.support .cta.soft{background:rgba(255,247,242,.1);color:#FFF7EC;box-shadow:none}
.support .fine{color:var(--plum-ink-2)}

/* talk */
.thread{display:flex;flex-direction:column;gap:8px;padding:8px 22px 0}
.msg{max-width:82%;padding:11px 15px;border-radius:20px;font-size:16px;line-height:1.4}
.msg.me{align-self:flex-end;background:var(--plum);color:var(--plum-ink);border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--card);border-bottom-left-radius:6px;box-shadow:0 1px 0 var(--line)}
.msg small{display:block;font-size:11px;opacity:.6;margin-top:3px}
.compose{position:sticky;bottom:0;display:flex;gap:8px;padding:12px 16px;background:var(--bg);margin-top:auto}
.compose input{flex:1;height:50px;border-radius:99px;border:0;background:var(--card);padding:0 18px;font:600 16px var(--sans);box-shadow:0 1px 0 var(--line)}
.compose button{width:50px;height:50px;border-radius:50%;background:var(--coral);color:var(--plum);display:grid;place-items:center}
.compose button svg{width:20px;height:20px}
.hours{margin:12px 22px 0;padding:12px 14px;border-radius:16px;background:var(--bg-2);font-size:13.5px;color:var(--ink-2)}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.slots button{height:52px;border-radius:16px;background:var(--card);font:700 14px var(--display);box-shadow:0 1px 0 var(--line)}
.slots button.on{background:var(--coral);color:var(--plum)}
.booked{display:flex;gap:12px;align-items:center;padding:16px;border-radius:20px;background:#DCEFE3;margin-top:12px;font-size:15px}
.booked svg{width:26px;height:26px;color:#2E6B48;flex:0 0 auto}
.helpline{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:22px;background:var(--plum);color:var(--plum-ink);text-decoration:none;margin-top:12px}
.helpline b{display:block;font:800 22px var(--display)}
.helpline small{color:var(--plum-ink-2);font-size:13px}
.helpline .hb{margin-left:auto;width:46px;height:46px;border-radius:50%;background:var(--sindoor);display:grid;place-items:center;color:#fff}
.helpline .hb svg{width:20px;height:20px}

/* me */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.stats div{padding:16px 12px;border-radius:20px;background:var(--card);text-align:center;box-shadow:0 1px 0 var(--line)}
.stats b{display:block;font:800 32px/1 var(--display)}
.stats small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:6px}
.row2{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.row2 small{display:block;font-size:13px;color:var(--ink-3)}
.tog{margin-left:auto;width:52px;height:30px;border-radius:99px;background:var(--line-2);position:relative;flex:0 0 auto;transition:background .2s}
.tog::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s var(--spring)}
.tog.on{background:var(--haldi)}
.tog.on::after{transform:translateX(22px)}

/* bottom nav: B2, "the wave". A floating plum pill whose top edge dips under the active tab; that tab's icon rises
   into a small coral cup and lands with a settle. The dip travels on switch. Always visible, never hides on scroll. */
.tabs{position:absolute;left:12px;right:12px;bottom:12px;z-index:20;height:68px;transition:transform .45s var(--spring),opacity .3s;--bar:#2B2340;--cup:#F28C6B;--cupink:#2B2340;--off:rgba(255,247,242,.58);--on:#FFF7EC}
.tabs.hide{transform:translateY(130%);opacity:0}
.tabs svg.bar{position:absolute;left:0;right:0;bottom:0;width:100%;height:68px;overflow:visible;filter:drop-shadow(0 18px 30px rgba(43,35,64,.4))}
.tabs svg.bar path{fill:var(--bar)}
.tabs .cup{position:absolute;top:4px;left:0;width:40px;height:40px;border-radius:50%;background:var(--cup);color:var(--cupink);display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(43,35,64,.45);transition:transform .6s var(--spring);z-index:2}
.tabs .cup svg{width:19px;height:19px}
.tabs .cup.land{animation:land .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes land{0%{scale:.92}60%{scale:1.04}100%{scale:1}}
.tabs .tabrow{position:absolute;left:8px;right:8px;bottom:0;height:54px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));z-index:1}
.tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--off);font:700 10.5px var(--display);transition:color .35s}
.tabs button svg{width:22px;height:22px;transition:all .35s var(--spring)}
.tabs button span{transition:transform .35s var(--spring)}
.tabs button.on{color:var(--on)}
.tabs button.on svg{opacity:0;transform:translateY(-10px) scale(.5)}
.tabs button.on span{transform:translateY(-3px)}
.tabs button.talk.badge::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--sindoor);top:8px;right:calc(50% - 16px);box-shadow:0 0 0 2px var(--bar)}
@media (prefers-reduced-motion:reduce){.tabs .cup.land{animation:none}}
.toast2{position:absolute;left:16px;right:16px;top:14px;z-index:40;padding:14px 16px;border-radius:18px;background:var(--plum);color:var(--plum-ink);font:600 14.5px/1.35 var(--display);box-shadow:var(--shadow);animation:tin .45s var(--spring)}
.toast2 b{display:block;font-weight:800}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- breathe with me (2026-10-04) ---------- */
.breathe{background:var(--plum);color:#FFF7EC;display:flex;flex-direction:column}
.breathe .topbar .count{color:#FFF7EC;font:700 17px var(--display)}
.breathe .topbar .back{color:#FFF7EC;background:rgba(255,247,242,.1)}
.breathe .sync{opacity:0}
.brstage{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;min-height:0}
.breathe .halo{position:absolute;left:50%;top:50%;width:min(86vw,360px);aspect-ratio:1;transform:translate(-50%,-56%);border-radius:50%;background:radial-gradient(circle,rgba(242,140,107,.28),rgba(242,140,107,.06) 55%,transparent 72%);filter:blur(6px);pointer-events:none;animation:halo 10s ease-in-out infinite}
@keyframes halo{0%,100%{transform:translate(-50%,-56%) scale(.9)}50%{transform:translate(-50%,-56%) scale(1.08)}}
.breathe .disc{position:relative;width:min(62vw,250px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin-top:-30px;
  background:radial-gradient(circle at 38% 32%,#FFF7EC,#F6C7B4 48%,#F28C6B 100%);box-shadow:0 30px 70px -20px rgba(0,0,0,.55),inset 0 -14px 30px rgba(224,82,59,.35);
  transform:scale(.58);transition:transform 4s cubic-bezier(.45,.02,.3,1),box-shadow 2s}
.breathe .disc.idle{transform:scale(.62);animation:idle 3.2s ease-in-out infinite}
@keyframes idle{0%,100%{transform:scale(.6)}50%{transform:scale(.66)}}
.breathe .disc.in{transform:scale(1)}
.breathe .disc.hold{transform:scale(1);animation:hold 4s ease-in-out}
@keyframes hold{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.breathe .disc.out{transform:scale(.58)}
.breathe .disc.done{transform:scale(.8);background:radial-gradient(circle at 38% 32%,#FFF7EC,#CFE7D8 50%,#6FA585 100%);box-shadow:0 30px 70px -20px rgba(0,0,0,.55),inset 0 -14px 30px rgba(46,107,72,.3)}
.breathe .ph{position:relative;z-index:1;font:800 clamp(22px,7vw,30px) var(--display);color:var(--plum);letter-spacing:0}
.breathe .disc.done .ph{font-size:48px;color:#2E6B48}
.breathe .ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg);pointer-events:none}
.breathe .ring circle{fill:none;stroke:rgba(255,247,236,.18);stroke-width:2.2}
.breathe .ring .arc{stroke:#FFF7EC;stroke-width:3;stroke-linecap:round;stroke-dasharray:295;stroke-dashoffset:295}
.breathe .rounds{display:flex;gap:10px;margin-top:38px}
.breathe .rounds i{width:12px;height:12px;border-radius:50%;background:rgba(255,247,236,.18);transition:background .4s,transform .4s var(--spring)}
.breathe .rounds i.on{background:var(--coral);transform:scale(1.15)}
.breathe .brl{margin-top:18px;text-align:center;color:var(--plum-ink-2);font-size:15px;line-height:1.5;max-width:30ch;text-wrap:pretty;min-height:3em}
.breathe .brl b{color:#FFF7EC;font:800 20px var(--display);display:block;margin-bottom:4px}
.brfox{position:relative;height:118px;margin:0 22px 0;pointer-events:none}
.brfox img{position:absolute;left:-4px;bottom:-14px;height:150px;filter:drop-shadow(0 16px 24px rgba(0,0,0,.4))}
.brfox .say{position:absolute;left:112px;bottom:44px;padding:10px 14px;border-radius:18px 18px 18px 4px;background:rgba(255,247,236,.12);color:#FFF7EC;font:700 14px var(--display);backdrop-filter:blur(8px)}
.breathe .foot{padding-bottom:0;min-height:60px}
.breathe .cta.soft{background:rgba(255,247,242,.1);color:#FFF7EC;box-shadow:none}
.breathe .foot:empty{min-height:60px}
/* the lesson's orb is now the door to the exercise */
.orbbtn{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:6px;color:var(--ink)}
.orbbtn b{font:700 15px var(--display);display:inline-flex;align-items:center;gap:6px;background:var(--card);padding:10px 16px;border-radius:99px;box-shadow:var(--shadow)}
.orbbtn b svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.breathe .halo,.breathe .disc.idle,.breathe .disc.hold{animation:none}.breathe .disc{transition-duration:.4s!important}}