/* Phone layout for stemzo.ai (screens up to 700px wide). Loaded only on phones: <link rel="stylesheet" href="css/mobile.css" media="(max-width: 700px)">.
   Desktop and tablet (701px and up) never read this file, so nothing here can change them.
   Idea: minimal and calm. One header row, a short hero, the day as a swipeable strip, one column of short sections, a thin bottom action bar.
   No copy is rewritten: secondary paragraphs are only hidden. Colours come from the tokens in site.css (both themes), so contrast is unchanged.
   Hidden on purpose here: the Google Play hero note (the FAQ says it), the laptop mock-ups, the story's big sticky stage, the long body text of the small cards. */

:root{--pad:20px;--sec-y:44px;--r:22px;--r-row:18px;--bar-h:64px;--gap:12px;--head-gap:20px}
html{scroll-padding-top:12px}
body{background-image:none;background-attachment:scroll;font-size:17px;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
h2{font-size:clamp(28px,8vw,34px);line-height:1.12}
html[lang^="hi"] h2,html[lang^="bn"] h2{font-size:clamp(25px,7vw,30px);line-height:1.35}
.lead{font-size:17px;max-width:none}
.tag{font-size:13px;margin-bottom:8px}

/* ---- 1. header: one row. brand left; Log in and Book a demo right. Language and theme live in the footer on phones ---- */
.nav{position:static;padding:8px var(--pad) 0;background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.pill{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;width:100%;max-width:none;padding:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.pill-links,.ctl{display:none}
.pill .brand{font-size:22px;min-height:44px;display:inline-flex;align-items:center;margin-right:auto}
.nav-login{margin-left:auto;padding:0 10px;font-size:16px;color:var(--ink)}
.pill .btn-sm{min-height:44px;padding:8px 16px;font-size:15px;white-space:nowrap;flex:none}
@media (max-width:359px){.pill .brand{font-size:19px}.nav-login{padding:0 6px;font-size:15px}.pill .btn-sm{padding:8px 12px;font-size:14px}}

/* ---- 2. hero: kicker, headline, one short line, one button, one quiet link, one small phone ---- */
.hero{padding-top:16px;padding-bottom:36px}
.hero-grid{gap:24px}
.kicker{font-size:13px;margin-bottom:12px}
h1{font-size:clamp(38px,11.5vw,48px);line-height:1.04}
html[lang^="hi"] h1,html[lang^="bn"] h1{font-size:clamp(30px,8.6vw,38px);line-height:1.3}
.hero-sub{display:block;margin-top:14px;font-size:17px;line-height:1.55;font-weight:500;color:var(--ink-2)}
.hero-note{display:none}
.hero-cta{display:grid;gap:4px;margin-top:20px}
.hero-cta .btn-p{width:100%;min-height:54px;font-size:17px}
.hero-cta .btn-g{background:none;border:0;box-shadow:none;color:var(--accent);min-height:48px;text-decoration:underline;text-underline-offset:4px}
.hero-cta .btn:hover{transform:none}
/* one small phone, cropped at the bottom and faded out, instead of a full-height frame */
.hero .devices{display:block;max-height:600px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.hero .phone{width:min(88vw,350px);margin:0 auto}

/* ---- 3. one distributor's day: a swipeable strip of compact cards ---- */
.story .lead{display:none}
.story-grid{display:block;margin-top:var(--head-gap)}
.chapters{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(var(--pad) * -1);padding:4px var(--pad) 16px!important;scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chapters::-webkit-scrollbar{display:none}
.chap{flex:0 0 82vw;max-width:340px;scroll-snap-align:start;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;padding:22px 20px 24px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh);opacity:1;transform:none}
.chap .time{font-size:15px;line-height:1.4}
.chap h3{font-size:24px;line-height:1.2;margin:10px 0 0}
html[lang^="hi"] .chap h3,html[lang^="bn"] .chap h3{font-size:21px;line-height:1.4}
.chap p,.chap .inline-shot,.progress{display:none}
.origin{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;margin:16px calc(var(--pad) * -1) 0;padding:2px var(--pad) 6px;scroll-padding:0 var(--pad);scrollbar-width:none}
.origin::-webkit-scrollbar{display:none}
.origin div{flex:0 0 150px;scroll-snap-align:start;padding:14px}
.origin b{font-size:28px}
.origin span{font-size:15px}
.sample{font-size:14px}

/* ---- 4. product tour: phone only, tabs as swipeable rows, one note at a time ---- */
#tour .lead{display:none}
.tour-box{padding:14px}
.role-note{display:none}
/* the app preview uses the full width of the box; the number markers sit on the left only, so only the left gutter is kept */
.tour-stage{--G:28px}
.tour-stage .phone-col{max-width:100%}
.tour-stage .fig{padding:0 4px 0 var(--G)}
.tour-stage .phone{max-width:none;width:100%}
.tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -14px;padding:2px 14px 8px;scrollbar-width:none;gap:8px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;white-space:nowrap;font-size:16px}
#modLbl,#viewLbl{display:none}
.views{margin-top:2px}
.tour-stage .laptop-wrap{display:none}
.tour-stage{padding:12px 4px}
.legend li:has(> .lg[aria-pressed="false"]){display:none}
.tour-meta .seg{display:none}

/* ---- 5. what is new: a two-row swipeable strip, title and badge only ---- */
.feat-grid{display:grid;grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:78vw;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:var(--head-gap) calc(var(--pad) * -1) 0;padding:4px var(--pad) 16px;scroll-padding:0 var(--pad);scrollbar-width:none}
.feat-grid::-webkit-scrollbar{display:none}
.feat-grid>:last-child:nth-child(n){grid-column:auto}
.feat{scroll-snap-align:start;padding:18px;gap:10px}
.feat p{display:none}
.feat h3{font-size:20px;line-height:1.25}
.feat button{align-self:flex-start;margin-top:auto;font-size:16px}
#new .lead{display:none}
.ai-card{margin-top:4px;padding:20px;border-left-width:5px}
.ai-card p:not(.ai-rule){display:none}
.ai-card h3{font-size:22px}

/* ---- Tally band: heading, one line, one button ---- */
.tally{padding:26px 22px;gap:0}
.tally ul,.tally .hero-cta .btn-g,.tally>div:nth-child(2){display:none}
.tally .hero-cta{margin-top:18px}
.tally .hero-cta .btn-p{width:100%}
.pair{display:none}
.pair .card h3{font-size:20px}

/* ---- who it is for: titles only ---- */
.who{gap:10px}
.who .card{padding:16px 20px}
.who .card h3{font-size:20px;margin:0}
.who .card p{display:none}

/* ---- pricing and comparison ---- */
#pricing{padding:8px 0}
.price-tease{gap:16px;padding:24px 22px}
.price-tease .btn{width:100%}
.cmp-cards{gap:12px}
.cmp-cards .card{padding:20px}
.cmp-cards .card h3{font-size:21px;margin-bottom:14px}
.cmp-cards .card p{display:none}

/* ---- questions: the accordion, a little roomier ---- */
.faq{gap:8px}
.faq details{padding:0 18px}
.faq summary{font-size:17px;min-height:60px}
.faq details p{padding-bottom:18px}

/* ---- demo form: one column, big fields, big button ---- */
.cta{padding:24px 18px 18px;gap:20px}
.cta ul{display:none}
.form{padding:18px 16px;gap:14px}
.form input[type=text],.form input[type=tel],.form input[type=email]{min-height:52px;border-radius:16px;font-size:17px}
.notice{font-size:15px;padding:12px 14px;gap:6px}
.notice dl{gap:6px}
.form .small{font-size:14px}
.form .btn-p{width:100%;min-height:56px;font-size:18px}
.form .consent{gap:12px}
.form .consent input{width:26px;height:26px}
.form .consent span{padding-top:1px}
.done{padding:22px}

/* ---- footer: tidy two columns, with the language and light/dark controls that left the header ---- */
footer{padding:12px 0 calc(var(--bar-h) + 28px + env(safe-area-inset-bottom,0px))}
footer .f{display:flex;flex-wrap:wrap;gap:0 16px}
footer .f>a{flex:0 0 calc(50% - 8px);min-height:44px;font-size:16px;display:flex;align-items:center}
footer .f>.brand{flex:0 0 100%;font-size:22px}
footer .f>.lang-foot{order:5;flex:0 0 calc(100% - 60px);justify-content:space-between;margin-top:8px}
footer .f>.foot-theme{order:6;flex:none;margin-left:auto;margin-top:8px;min-width:44px;min-height:44px;border:1.5px solid var(--line);color:var(--ink)}
footer .f>span:last-child{order:7;flex:0 0 100%;margin:14px 0 0!important;font-size:15px;line-height:1.6}
footer .f>span:last-child a{display:inline-block;min-height:44px;line-height:44px}
.lang-link{min-height:44px;min-width:44px;font-size:16px;color:var(--ink)}
.foot-theme{display:inline-flex!important}
#themeBtn2 .i-sun{display:none}#themeBtn2[aria-pressed="true"] .i-sun{display:block}#themeBtn2[aria-pressed="true"] .i-moon{display:none}
.store summary{font-size:16px}

/* ---- calm motion: no fade-ins or lifts while scrolling a phone ---- */
.rv{opacity:1;transform:none;transition:none}
.btn:hover{transform:none}

/* ---- 5. bottom action bar: Book a demo and WhatsApp. The floating WhatsApp button is hidden so nothing overlaps ---- */
.wa-fab{display:none}
.wa-panel{right:12px;left:12px;width:auto;bottom:calc(var(--bar-h) + 10px + env(safe-area-inset-bottom,0px));max-height:calc(100vh - var(--bar-h) - 90px);max-height:calc(100dvh - var(--bar-h) - 90px)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;gap:10px;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg-2);border-top:1px solid var(--line);box-shadow:0 -6px 20px -12px rgba(20,12,60,.35);transition:transform .2s ease,visibility 0s linear .2s}
.mbar .btn{flex:1 1 auto;min-height:48px;padding:8px 16px;font-size:17px}
.mbar-wa{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#1F7A4D;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mbar-wa:active{background:#17623D}
/* while the form itself is on screen the bar steps aside, so it never sits on the submit button */
.mbar.away{transform:translateY(110%);visibility:hidden}
@media (prefers-reduced-motion:reduce){.mbar{transition:none}}

/* ---- comparison pages (same header, bar and spacing; their content is not restructured) ---- */
.page-hero{padding:24px 0 4px}
.page-hero h1{font-size:clamp(32px,9.5vw,40px)}
html[lang^="hi"] .page-hero h1,html[lang^="bn"] .page-hero h1{font-size:clamp(28px,8vw,34px)}
.crumb a{display:inline-flex;align-items:center;min-height:44px}
.prose h2{font-size:clamp(25px,7vw,30px);margin-top:36px}
.prose h3{font-size:20px}
.cmp-row>div{padding:14px 16px}
.cta-strip{margin-top:32px;padding:24px 20px}
.cta-strip .btn{width:100%}

/* ---- tighter vertical rhythm on phones ---- */
.notice,.notice dd{line-height:1.45}
.notice dt{margin-top:2px}
#roleLbl{margin:2px 2px 6px}
.tour-stage{margin-top:10px}
.sec{padding:40px 0}
.faq summary{min-height:56px}
footer .f>.brand{min-height:44px}

/* language choice visible at the top on phones (it used to be only in the footer, far down the page) */
.lang-top{display:flex;justify-content:center;gap:6px;padding:0 16px;margin:-2px 0 6px}
.lang-top .lang-link{padding:0 12px;border-radius:999px;font-weight:600}
.lang-top .lang-link[aria-pressed="true"]{background:var(--accent-w);font-weight:800}