/* Stemzo website redesign preview. Tokens mirror marketing/public/bento-site.css (Bento Studio: violet accent, Jamun and Marigold warmth,
   Gabarito + Figtree). Light by default, dark follows the system, and the toggle sets html[data-theme]. No external requests. */
:root{
  --bg:#ECE8DD;--bg-2:#F6F4EE;--card:#FFFFFF;--ink:#1B1730;--ink-2:#4B4660;--ink-3:#544E6A;--field-line:#7A7490;
  --line:rgba(27,23,48,.10);--line-soft:rgba(27,23,48,.06);
  --accent:#5B3FF0;--accent-d:#4A2FD6;--accent-w:rgba(91,63,240,.10);--on-accent:#fff;
  --marigold:#F2A516;--marigold-w:#FFF0B8;--marigold-ink:#6B4F00;
  --ok:#157A4F;--ok-w:rgba(21,122,79,.10);--bad:#C0304F;
  --hero:linear-gradient(150deg,#33258A 0%,#1D1445 70%);
  --nav-bg:rgba(255,255,255,.86);
  --display:'Gabarito','Nunito','Avenir Next Rounded','Trebuchet MS',system-ui,sans-serif;
  --body:'Figtree','DM Sans','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --r:28px;--r-row:20px;--pad:clamp(16px,4.6vw,68px);
  --sh:0 1px 2px rgba(40,30,90,.05),0 14px 30px -18px rgba(40,30,90,.28);
  --sh-lg:0 2px 4px rgba(40,30,90,.06),0 28px 60px -24px rgba(40,30,90,.45);
  --bezel:#1B1730;
  --sec-y:clamp(40px,6vw,72px);--gap:clamp(14px,1.8vw,22px);--gap-lg:clamp(18px,2.6vw,32px);--head-gap:clamp(18px,2.4vw,28px);--nav-h:92px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0912;--bg-2:#13101E;--card:#1E1A2D;--ink:#F2EFFB;--ink-2:#B9B3CC;--ink-3:#A29CB8;--field-line:#8E88A6;
    --line:rgba(255,255,255,.10);--line-soft:rgba(255,255,255,.06);
    --accent:#9A88FF;--accent-d:#B6A9FF;--accent-w:rgba(154,136,255,.16);--on-accent:#130C36;
    --marigold-w:rgba(244,222,136,.14);--marigold-ink:#F4DE88;--ok:#6FDDA4;--ok-w:rgba(111,221,164,.14);--bad:#FF8FA9;
    --hero:linear-gradient(150deg,#4A39C8 0%,#241A63 75%);--nav-bg:rgba(30,26,45,.86);
    --sh:0 1px 2px rgba(0,0,0,.3),0 14px 30px -18px rgba(0,0,0,.7);--sh-lg:0 28px 60px -24px rgba(0,0,0,.85);--bezel:#050409;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0912;--bg-2:#13101E;--card:#1E1A2D;--ink:#F2EFFB;--ink-2:#B9B3CC;--ink-3:#A29CB8;--field-line:#8E88A6;
  --line:rgba(255,255,255,.10);--line-soft:rgba(255,255,255,.06);
  --accent:#9A88FF;--accent-d:#B6A9FF;--accent-w:rgba(154,136,255,.16);--on-accent:#130C36;
  --marigold-w:rgba(244,222,136,.14);--marigold-ink:#F4DE88;--ok:#6FDDA4;--ok-w:rgba(111,221,164,.14);--bad:#FF8FA9;
  --hero:linear-gradient(150deg,#4A39C8 0%,#241A63 75%);--nav-bg:rgba(30,26,45,.86);
  --sh:0 1px 2px rgba(0,0,0,.3),0 14px 30px -18px rgba(0,0,0,.7);--sh-lg:0 28px 60px -24px rgba(0,0,0,.85);--bezel:#050409;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:17px;line-height:1.55;color:var(--ink);background:var(--bg);overflow-x:hidden;
  background-image:radial-gradient(900px 500px at 10% -10%,rgba(91,63,240,.10),transparent 60%),radial-gradient(800px 500px at 100% 0%,rgba(242,165,22,.12),transparent 60%);background-attachment:fixed}
/* UI text rule: never truncate, never break a word */
h1,h2,h3,h4,p,li,a,button,span,b,summary,label,td,th{overflow-wrap:normal;word-break:normal;hyphens:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1.1}
a{color:var(--accent)}
/* Focus ring: two tones so it shows on every background (light page, dark band, accent button): a 2px white halo against the control, then a 3px dark ring.
   Against a light page the dark ring has 10:1 or more; against a dark band the white halo does. */
:focus-visible{outline:3px solid #1B1730;outline-offset:2px;box-shadow:0 0 0 2px #fff!important}
a:focus-visible{border-radius:4px}
::placeholder{color:var(--ink-3);opacity:1}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:999px;z-index:100;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* preview ribbon */
.ribbon{background:var(--marigold-w);color:var(--marigold-ink);font-size:14px;font-weight:600;text-align:center;padding:8px var(--pad);border-bottom:1px solid var(--line)}
.ribbon a{color:inherit}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font:700 16px/1.2 var(--body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;text-align:center;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -10px var(--accent)}
.btn-p:hover{background:var(--accent-d)}
.btn-g{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-g:hover{border-color:var(--accent);background:var(--accent-w)}
.btn-sm{min-height:44px;padding:8px 18px;font-size:15px}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:center;padding:10px var(--pad) 10px;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.pill{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;background:var(--nav-bg);border:1px solid var(--line);border-radius:28px;padding:8px 10px 8px 20px;box-shadow:var(--sh);max-width:100%}
.brand{font-family:var(--display);font-weight:800;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.pill-links{display:flex;flex-wrap:wrap;gap:0 4px}
.pill-links a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;padding:0 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px}
.pill-links a:hover{color:var(--ink);background:var(--accent-w)}
.ctl{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-login{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap}
.nav-login:hover,.nav-login:focus-visible{color:var(--ink);background:var(--accent-w)}
.icon-btn{min-width:40px;min-height:40px;border-radius:999px;border:1.5px solid transparent;background:transparent;color:var(--ink-2);font:700 12px var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 8px}
#themeBtn .i-sun{display:none}#themeBtn[aria-pressed="true"] .i-sun{display:block}#themeBtn[aria-pressed="true"] .i-moon{display:none}
.lang-code{letter-spacing:.04em}
.langmenu{position:relative}
.icon-btn:hover,.icon-btn[aria-expanded="true"]{color:var(--ink);background:var(--accent-w)}
@media (max-width:1180px){.pill-links{display:none}.pill{padding:8px 8px 8px 16px}}

/* hero */
.hero{padding-top:clamp(20px,3.4vw,40px);padding-bottom:var(--sec-y)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--gap-lg);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--accent);margin-bottom:14px}
.kicker i{width:9px;height:9px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 4px rgba(242,165,22,.25)}
h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02}
h1 em{font-style:normal;color:var(--accent);background:linear-gradient(transparent 70%,rgba(242,165,22,.45) 70%)}
.hero-sub{margin-top:18px;font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-note{margin-top:14px;font-size:15px;color:var(--ink-3);font-weight:600}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}

/* device frames (CSS drawn) */
.devices{position:relative;width:100%}
.laptop{position:relative;width:100%}
.laptop-lid{background:var(--bezel);border-radius:18px 18px 6px 6px;padding:10px 10px 12px;box-shadow:var(--sh-lg)}
.laptop-cam{position:absolute;left:50%;top:4px;width:5px;height:5px;border-radius:50%;background:#3a3550;transform:translateX(-50%)}
.screen{position:relative;overflow:hidden;background:var(--bg-2);border-radius:8px;aspect-ratio:16/10}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop-base{height:14px;margin:0 -3%;background:linear-gradient(var(--bezel),#3a3550);border-radius:0 0 18px 18px;position:relative}
.laptop-base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:5px;transform:translateX(-50%);background:rgba(255,255,255,.12);border-radius:0 0 8px 8px}
/* Phone: an iPhone-shaped body (screen 390:844, about 9:19.5), thin bezel, dynamic island inside the status-bar band above the app content,
   home indicator at the bottom, rounded corners, overflow hidden. The captures are 390x844 renders of the real app with a 47px safe area at the top, so
   the island and the clock sit in that band and never cover content. Sizes use the phone's own width (cqw) so it scales cleanly. */
.phone{position:relative;width:100%;max-width:240px;container-type:inline-size}
.phone::before{content:"";position:absolute;inset:0;border-radius:15cqw;background:var(--bezel);box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone .screen{margin:3cqw;aspect-ratio:390/844;border-radius:12cqw;background:var(--bg-2)}
.phone .screen img{object-fit:cover;object-position:top}
.phone-pill{position:absolute;left:50%;top:5.8cqw;width:28cqw;height:8cqw;border-radius:99px;background:#000;transform:translateX(-50%);z-index:5}
.phone-pill::after{content:"";position:absolute;left:calc(100% + 8cqw);top:.9cqw;width:19cqw;height:5.8cqw;background-color:#fff;-webkit-mask:var(--sb-icons) center/contain no-repeat;mask:var(--sb-icons) center/contain no-repeat}
.phone:has(.screen[data-th="light"]) .phone-pill::after{background-color:#1B1730}
.phone .screen::before{content:"9:41";position:absolute;left:8.5cqw;top:3.4cqw;z-index:5;font:700 5.4cqw/1 var(--body);letter-spacing:-.01em;color:#fff;pointer-events:none}
.phone .screen::after{content:"";position:absolute;left:50%;bottom:1.7cqw;width:34cqw;height:1.2cqw;border-radius:9px;transform:translateX(-50%);background:#fff;z-index:5;pointer-events:none}
.phone .screen[data-th="light"]::before{color:#1B1730}
.phone .screen[data-th="light"]::after{background:#1B1730}
:root{--sb-icons:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2066%2020'%3E%3Cg%20fill='%23000'%3E%3Crect%20x='0'%20y='12'%20width='3.6'%20height='6'%20rx='1'/%3E%3Crect%20x='5.4'%20y='9'%20width='3.6'%20height='9'%20rx='1'/%3E%3Crect%20x='10.8'%20y='5.5'%20width='3.6'%20height='12.5'%20rx='1'/%3E%3Crect%20x='16.2'%20y='2'%20width='3.6'%20height='16'%20rx='1'/%3E%3Cpath%20d='M31%2018.2%2022.6%209.3a12.4%2012.4%200%200%201%2016.8%200z'/%3E%3Crect%20x='46.5'%20y='5'%20width='15'%20height='10'%20rx='2.6'/%3E%3Crect%20x='64.4'%20y='7.2'%20width='1.6'%20height='5.6'%20rx='.8'/%3E%3C/g%3E%3Crect%20x='44.6'%20y='3.1'%20width='18.8'%20height='13.8'%20rx='4.2'%20fill='none'%20stroke='%23000'%20stroke-width='1.3'%20opacity='.5'/%3E%3C/svg%3E")}
.hero .devices{display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,24%,170px);gap:var(--gap);align-items:end}
.hero .phone{max-width:none;width:100%}
@media (max-width:560px){.hero .devices{grid-template-columns:1fr;justify-items:center}.hero .laptop{display:none}.hero .phone{width:min(62%,240px)}}

/* sections */
.sec{padding:var(--sec-y) 0}
section[id],.hero{scroll-margin-top:var(--nav-h)}
.tag{display:inline-block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--accent);margin-bottom:10px}
h2{font-size:clamp(32px,4.6vw,58px)}
.lead{margin-top:12px;color:var(--ink-2);font-size:clamp(17px,1.5vw,20px);max-width:44em}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(18px,2.2vw,26px)}
.band{background:var(--bg-2)}

/* story */
.story{position:relative}
.story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap-lg);margin-top:var(--head-gap)}
.chapters{padding-bottom:6vh}
.chap{min-height:56vh;display:flex;flex-direction:column;justify-content:center;opacity:.9;transition:opacity .35s,transform .35s;transform:translateX(-6px)}
.chap.on{opacity:1;transform:none}
.chap .time{font-family:var(--display);font-weight:800;font-size:15px;color:var(--accent);letter-spacing:.06em}
.chap h3{font-size:clamp(28px,3vw,40px);margin:8px 0 12px}
.chap p{color:var(--ink-2);max-width:30em}
.chap .inline-shot{display:none}
.stage{position:sticky;top:calc(var(--nav-h) + 12px);height:calc(100vh - var(--nav-h) - 40px);max-height:640px;align-self:start;display:flex;align-items:center}
.stage .devices{width:100%}
.stage .laptop-lid .screen{position:relative}
.stage .screen .slide{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s,transform .5s}
.stage .screen .slide.on{opacity:1;transform:none}
.stage .devices{display:grid;grid-template-columns:minmax(0,1fr) clamp(100px,25%,150px);gap:var(--gap);align-items:end}
.stage .phone{max-width:none;width:100%}
.stage .phone .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s,transform .5s;transform:translateY(14px)}
.stage .phone .slide picture,.stage .phone .slide img{display:block;width:100%;height:100%}
.stage .phone .slide.on{opacity:1;transform:none}
.progress{display:flex;gap:6px;margin-top:14px}
.progress i{height:5px;flex:1;border-radius:9px;background:var(--line);transition:background .3s}
.progress i.on{background:var(--accent)}
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr}
  .stage{display:none}
  .chap{min-height:0;opacity:1;transform:none;padding:22px 0;border-bottom:1px solid var(--line)}
  .chap .inline-shot .phone{max-width:220px;margin:0 auto}
  .chap .inline-shot{display:block;margin-top:18px}
  .chapters{padding-bottom:0}
}
.origin{margin-top:var(--gap-lg);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.origin div{background:var(--card);border-radius:var(--r-row);padding:18px;border:1px solid var(--line-soft)}
.origin b{display:block;font-family:var(--display);font-size:34px;color:var(--accent);line-height:1}
.origin span{font-size:14px;color:var(--ink-2)}
@media (max-width:720px){.origin{grid-template-columns:1fr 1fr}}

/* tour */
.tour-box{margin-top:var(--head-gap);background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(14px,2vw,22px)}
.tabs-label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:6px 2px 8px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg-2);color:var(--ink);font:700 15px/1.2 var(--body);cursor:pointer;text-align:center}
.tab:hover{border-color:var(--accent)}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab[hidden]{display:none}
.views{margin-top:10px}
.tour-stage{--G:38px;display:grid;grid-template-columns:minmax(0,1fr) calc(220px + 2 * var(--G));gap:var(--gap-lg);align-items:center;margin-top:16px;padding:clamp(10px,2vw,22px);border-radius:var(--r-row);background:var(--accent-w)}
.tour-stage.phone-only{grid-template-columns:minmax(0,calc(220px + 2 * var(--G)));justify-content:center}
.tour-stage.phone-only .laptop-wrap{display:none}
.laptop-note{display:none;padding:30px;text-align:center;font-weight:600;color:var(--ink-2)}
.tour-stage .screen picture,.stage .phone .screen picture{display:block}
/* a device with its numbered markers: the markers live in the margins (padding) beside the device, never on the screen */
.fig{position:relative;padding:0 var(--G);min-width:0}
.rail{position:absolute;inset:0;pointer-events:none}
.rail .leads{position:absolute;left:0;top:0;overflow:visible}
.leads path{fill:none;stroke:var(--marigold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.leads circle{fill:var(--marigold);stroke:#1B1730;stroke-width:1}
.leads path.on{stroke:var(--accent);stroke-width:2}.leads circle.on{fill:var(--accent)}
.hs{position:absolute;width:28px;height:28px;border-radius:50%;border:0;background:var(--marigold);color:#1B1730;font:800 14px/1 var(--display);cursor:pointer;pointer-events:auto;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.hs::after{content:"";position:absolute;inset:-8px}
.hs[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 4px var(--accent-w),0 2px 6px rgba(0,0,0,.25)}
/* the legend: every number, with its short note, below the devices (a column on narrow screens) */
.legend{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.legend[hidden]{display:none}
.legend .lg{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;width:100%;text-align:left;font:inherit;color:inherit;background:var(--bg-2);border:1.5px solid var(--line);border-radius:var(--r-row);padding:14px 16px;cursor:pointer}
.legend .lg:hover{border-color:var(--accent)}
.legend .lg[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-w)}
.legend .num{width:28px;height:28px;border-radius:50%;background:var(--marigold);color:#1B1730;font:800 14px/1 var(--display);display:flex;align-items:center;justify-content:center}
.legend .lg[aria-pressed="true"] .num{background:var(--accent);color:var(--on-accent)}
.legend .lg-t{display:grid;gap:2px}
.legend .lg-t b{font:800 17px/1.25 var(--display)}
.legend .lg-t span{color:var(--ink-2);font-size:15px}
@media (max-width:760px){.legend{grid-template-columns:1fr}}
.tour-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-top:14px}
.role-note{color:var(--ink-2);font-size:16px;max-width:46em}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--bg-2)}
.seg button{min-height:44px;padding:0 16px;border:0;background:transparent;color:var(--ink-2);font:700 14px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.sample{font-size:13px;color:var(--ink-3);margin-top:10px}
@media (max-width:900px){.tour-stage{grid-template-columns:minmax(0,1fr);justify-items:center}.tour-stage .laptop-wrap,.tour-stage .phone-col{width:100%}.tour-stage .phone-col{max-width:calc(220px + 2 * var(--G))}.tour-stage.phone-only{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.tour-stage{--G:34px}}

/* new features */
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:var(--head-gap)}
@media (max-width:1179px){.feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.feat-grid{grid-template-columns:1fr}}
/* no orphan cards: a lone last card spans the row */
.feat-grid>:last-child:nth-child(4n+1){grid-column:1/-1}
@media (max-width:1179px) and (min-width:621px){.feat-grid>:last-child:nth-child(odd){grid-column:1/-1}.feat-grid>:last-child:nth-child(4n+1){grid-column:1/-1}}
.feat{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-row);padding:clamp(16px,1.8vw,22px);box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px}
.feat .live{align-self:flex-start;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--ok-w);color:var(--ok);border-radius:999px;padding:4px 10px}
.feat .soon,.soon-pill{align-self:flex-start;display:inline-block;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--marigold-w);color:var(--marigold-ink);border-radius:999px;padding:4px 10px}
.soon-pill{margin-left:6px;vertical-align:middle}
.feat h3{font-size:22px}
.feat p{color:var(--ink-2);font-size:16px;flex:1}
.feat button{align-self:flex-start;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg-2);color:var(--accent);font:700 15px var(--body);cursor:pointer}
.feat button:hover{border-color:var(--accent);background:var(--accent-w)}

/* AI-enabled OS card (Coming soon), under the New in Stemzo cards */
.ai-card{margin-top:var(--gap);background:var(--card);border:1px solid var(--line-soft);border-left:6px solid var(--accent);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(18px,2.4vw,28px);display:grid;gap:10px}
.ai-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ai-head .soon{display:inline-block;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--marigold-w);color:var(--marigold-ink);border-radius:999px;padding:4px 10px}
.ai-kicker{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;color:var(--accent)}
.ai-card h3{font-size:clamp(22px,2.4vw,30px)}
.ai-card p{color:var(--ink-2);font-size:17px;max-width:46em}
.ai-card .ai-rule{color:var(--ink);font-weight:700;font-size:16px}

/* tally */
.tally{background:var(--hero);color:#fff;border-radius:var(--r);padding:clamp(20px,3.4vw,44px);display:grid;grid-template-columns:1fr 1.15fr;gap:var(--gap-lg);align-items:center}
.tally h2{color:#fff}
.tally .lead,.tally li{color:rgba(255,255,255,.86)}
.tally ul{margin:18px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.tally li{padding-left:28px;position:relative}
.tally li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:3px solid var(--marigold);border-bottom:3px solid var(--marigold);transform:rotate(-45deg)}
.tally .btn-p{background:#fff;color:#241A63}
.tally .btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.chart-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chart-tabs button{min-height:44px;padding:6px 14px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:700 14px var(--body);cursor:pointer}
.chart-tabs button[aria-pressed="true"]{background:#fff;color:#241A63;border-color:#fff}
.tally .laptop-lid{background:#050409}
@media (max-width:960px){.tally{grid-template-columns:1fr}}
.pair{margin-top:var(--gap);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pair .card h3{font-size:22px;margin-bottom:8px}
.pair .card p{color:var(--ink-2)}
@media (max-width:720px){.pair{grid-template-columns:1fr}}

/* who / pricing / faq */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:var(--head-gap)}
@media (max-width:1099px){.who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.who{grid-template-columns:1fr}}
.who .card h3{font-size:22px;margin-bottom:8px}.who .card p{color:var(--ink-2);font-size:16px}
.price-tease{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap-lg);align-items:center}
.price-tease .big{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,64px);color:var(--accent);line-height:1}
@media (max-width:720px){.price-tease{grid-template-columns:1fr}}
#pricing{padding:clamp(24px,3.4vw,40px) 0}
.faq{margin-top:var(--head-gap);display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-row);padding:0 22px}
.faq summary{cursor:pointer;min-height:56px;display:flex;align-items:center;font:700 18px var(--display);padding:12px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:16px;font-size:26px;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 20px;color:var(--ink-2)}

/* demo form */
.cta{background:var(--hero);color:#fff;border-radius:var(--r);padding:clamp(20px,3.4vw,44px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--gap-lg);align-items:start}
.cta>:first-child{position:sticky;top:calc(var(--nav-h) + 12px)}
@media (min-width:1000px){.notice dl{display:block;columns:2;column-gap:22px}.notice dt{break-after:avoid;margin-top:8px}.notice dt:first-child{margin-top:0}.notice dd{break-inside:avoid}}
.cta h2{color:#fff}.cta p,.cta li{color:rgba(255,255,255,.86)}
.cta ul{margin:16px 0 0;padding-left:20px;display:grid;gap:6px}
.form{background:var(--card);color:var(--ink);border-radius:var(--r-row);padding:22px;display:grid;gap:12px}
.form label.fld{display:grid;gap:4px;font-weight:700;font-size:14px}
.form input[type=text],.form input[type=tel],.form input[type=email]{font:inherit;min-height:54px;border-radius:20px;border:1.5px solid var(--field-line);background:var(--bg-2);color:var(--ink);padding:0 14px;font-size:16px;font-weight:500}
.form input:focus{border-color:var(--accent)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;color:var(--ink-2)}
.form .consent input{width:22px;height:22px;flex:none;accent-color:var(--accent);margin-top:2px}
.form .err{display:none;color:var(--bad);font-size:13px;font-weight:600}
.form .bad .err{display:block}.form .bad input[type=text],.form .bad input[type=tel],.form .bad input[type=email]{border-color:var(--bad)}
.form .small{font-size:13px;color:var(--ink-3)}
.done{display:none;background:var(--card);color:var(--ink);border-radius:var(--r-row);padding:26px}
.done.on{display:block}.cta.sent .form{display:none}
@media (max-width:860px){.cta{grid-template-columns:1fr}.cta>:first-child{position:static}.form .row{grid-template-columns:1fr}}
footer{padding:8px 0 28px;color:var(--ink-2);font-size:15px}
footer .f{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
footer a{color:var(--ink-2)}

@media (max-width:1100px){.laptop-base{margin:0}}
/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}.chap{opacity:1;transform:none}
}

/* Preview 2 additions: language switcher, Indic type, calculator, comparison pages, DPDP notices, WhatsApp. Loaded after site.css. */
/* Hindi and Bengali use the self-hosted Noto subsets, then system fallbacks. Latin letters and digits still use Figtree/Gabarito because each
   @font-face claims only its own script range. Taller line-height for Indic scripts so vowel signs are never clipped. */
html[lang^="hi"]{--display:'Gabarito','Noto Sans Devanagari','Nirmala UI','Mangal','Kohinoor Devanagari','Devanagari Sangam MN',system-ui,sans-serif;--body:'Figtree','Noto Sans Devanagari','Nirmala UI','Mangal','Kohinoor Devanagari','Devanagari Sangam MN',system-ui,sans-serif}
html[lang^="bn"]{--display:'Gabarito','Noto Sans Bengali','Nirmala UI','Vrinda','Kohinoor Bangla','Bangla Sangam MN',system-ui,sans-serif;--body:'Figtree','Noto Sans Bengali','Nirmala UI','Vrinda','Kohinoor Bangla','Bangla Sangam MN',system-ui,sans-serif}
html[lang^="hi"] body,html[lang^="bn"] body{line-height:1.7}
html[lang^="hi"] h1,html[lang^="hi"] h2,html[lang^="hi"] h3,html[lang^="hi"] h4,html[lang^="bn"] h1,html[lang^="bn"] h2,html[lang^="bn"] h3,html[lang^="bn"] h4{line-height:1.3;letter-spacing:0;font-weight:700}
html[lang^="hi"] h1,html[lang^="bn"] h1{font-size:clamp(32px,5.2vw,66px)}
html[lang^="hi"] h2,html[lang^="bn"] h2{font-size:clamp(28px,4vw,50px)}
html[lang^="hi"] .kicker,html[lang^="hi"] .tag,html[lang^="hi"] .tabs-label,html[lang^="bn"] .kicker,html[lang^="bn"] .tag,html[lang^="bn"] .tabs-label{text-transform:none;letter-spacing:.02em}
html[lang^="hi"] .btn,html[lang^="bn"] .btn,html[lang^="hi"] .tab,html[lang^="bn"] .tab{line-height:1.45}
/* never truncate, never break a word: long labels wrap only between words and the control grows */
.btn,.tab,.seg button,.chart-tabs button,.feat button{white-space:normal}
.tab,.chart-tabs button,.seg button{max-width:100%}

/* language: a small menu under the globe button (the footer has plain links as well) */
.langsw{position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:flex;flex-direction:column;min-width:140px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg)}
.langsw[hidden]{display:none}
.langsw button{min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font:700 15px var(--body);cursor:pointer;text-align:left;white-space:nowrap}
.langsw button:hover{background:var(--accent-w);color:var(--ink)}
.langsw button[aria-pressed="true"]{color:var(--ink)}
.langsw button[aria-pressed="true"]::after{content:"\2713";float:right;margin-left:14px;color:var(--accent)}
.lang-foot{display:inline-flex;gap:4px;align-items:center}
.lang-link{background:none;border:0;padding:0 6px;min-height:44px;color:var(--ink-2);font:inherit;text-decoration:underline;cursor:pointer}
.lang-link[aria-pressed="true"]{font-weight:700;color:var(--ink);text-decoration:none}

/* comparison cards on home and the comparison pages */
.cmp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--gap);margin-top:var(--head-gap)}
.cmp-cards .card{display:flex;flex-direction:column;align-items:flex-start}
.cmp-cards .card h3{font-size:24px;margin-bottom:8px}.cmp-cards .card p{color:var(--ink-2);margin-bottom:16px;flex:1}
.page-hero{padding:clamp(32px,5vw,64px) 0 8px}
.page-hero h1{font-size:clamp(34px,5vw,64px)}
.crumb{font-size:15px;margin-bottom:14px}
.prose{max-width:46em}
.prose p{margin-top:14px;color:var(--ink-2)}
.prose h2{font-size:clamp(26px,3.4vw,40px);margin-top:44px}
.prose h3{font-size:22px;margin-top:26px}
.prose ul{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;color:var(--ink-2)}
.cmp-table{margin-top:20px;display:grid;gap:12px}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-row);overflow:hidden}
.cmp-row>div{padding:16px 18px;color:var(--ink-2);font-size:16px}
.cmp-row>div:first-child{font:800 17px var(--display);color:var(--ink);background:var(--accent-w)}
.cmp-row.head>div{font:800 14px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:transparent}
.cmp-row .lbl{display:none}
@media (max-width:760px){.cmp-row{grid-template-columns:1fr}.cmp-row.head{display:none}.cmp-row .lbl{display:block;font:800 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}}
.src-note{font-size:13px;color:var(--ink-3);margin-top:8px}
.cta-strip{margin-top:44px;background:var(--hero);color:#fff;border-radius:var(--r);padding:clamp(22px,3.4vw,40px);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between}
.cta-strip h2{color:#fff;font-size:clamp(24px,3vw,34px);margin:0}
.cta-strip .btn-p{background:#fff;color:#241A63}
.cta-strip .btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

/* DPDP: notice at collection, storage disclosure, WhatsApp */
.notice{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:14px;color:var(--ink-2);display:grid;gap:8px}
.notice h3{font:800 16px var(--display);color:var(--ink)}
.notice dl{display:grid;gap:8px;margin:0}
.notice dt{font-weight:800;color:var(--ink)}
.notice dd{margin:0}
.form .sep-head{font:800 13px var(--body);letter-spacing:.04em;color:var(--ink-3)}
.store{margin-top:14px;font-size:14px}
.store summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.store ul{margin:6px 0 0;padding-left:20px;display:grid;gap:6px}
.store code{font-size:13px;overflow-wrap:anywhere}
.wa-fab{position:fixed;right:16px;bottom:16px;z-index:60;min-height:56px;max-width:calc(100vw - 32px);padding:10px 20px 10px 16px;border-radius:999px;border:0;background:#1F7A4D;color:#fff;font:700 16px/1.25 var(--body);display:inline-flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 10px 28px -8px rgba(0,0,0,.5);text-align:left}
.wa-fab:hover{background:#17623D}
.wa-fab svg{width:26px;height:26px;flex:none}
.wa-panel{position:fixed;right:16px;bottom:84px;z-index:61;width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-lg);padding:18px 18px 16px}
.wa-panel[hidden]{display:none}
.wa-panel h2{font-size:20px;margin-bottom:8px}
.wa-panel ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--ink-2)}
.wa-panel p{font-size:15px;color:var(--ink-2)}
.wa-panel .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wa-panel .btn{min-height:46px;padding:8px 18px;font-size:15px}
.wa-panel .flag{margin-top:10px;font-size:13px;font-weight:700;color:var(--bad)}
.wa-panel .btn[aria-disabled="true"]{background:var(--bg-2);color:var(--ink-3);border-color:var(--field-line);box-shadow:none;pointer-events:none}
@media (max-width:480px){.wa-fab{padding:10px 14px}.wa-panel{right:16px;left:16px;width:auto}}
@media print{.wa-fab,.wa-panel,.ribbon,.nav{display:none}}
footer .pr-link{font-weight:700}

/* small screens: the nav is not sticky (it wraps to two rows and would cover the content) */
@media (max-width:600px){.nav{position:static;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}section[id],.hero{scroll-margin-top:12px}}

/* Preview 5 readability pass (Founder, 11 Oct 2026). Measured with tools/contrast-sweep.mjs: every text, icon and focus ring is at least WCAG AA in both themes and all three languages.
   Only colours, sizes and spacing change here; no copy, no layout. */
/* marigold tag on the dark gradient bands needs a lighter marigold (the plain one is 3.9:1 on the dark-mode violet) */
.tally .tag,.cta .tag,.tally .kicker,.cta .kicker{color:#FFC94D!important}
/* the marker-pen highlight under the hero word is lighter in dark mode, so the violet word keeps its contrast */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1 em{background:linear-gradient(transparent 70%,rgba(242,165,22,.18) 70%)}}
:root[data-theme="dark"] h1 em{background:linear-gradient(transparent 70%,rgba(242,165,22,.18) 70%)}
/* the floating WhatsApp button never sits on the last lines of the footer */
footer{padding-bottom:96px}
/* small labels: 13px at least (12px before), and a little larger for Hindi and Bengali, whose marks are small at 12 and 13px */
.feat .live,.feat .soon,.soon-pill,.ai-head .soon,.icon-btn{font-size:13px}
@media (max-width:760px){.cmp-row .lbl{font-size:13px}}
html[lang^="hi"] .feat .live,html[lang^="hi"] .feat .soon,html[lang^="hi"] .soon-pill,html[lang^="hi"] .ai-head .soon,html[lang^="bn"] .feat .live,html[lang^="bn"] .feat .soon,html[lang^="bn"] .soon-pill,html[lang^="bn"] .ai-head .soon,
html[lang^="hi"] .cmp-row .lbl,html[lang^="bn"] .cmp-row .lbl,html[lang^="hi"] .tabs-label,html[lang^="bn"] .tabs-label,html[lang^="hi"] .kicker,html[lang^="bn"] .kicker,html[lang^="hi"] .tag,html[lang^="bn"] .tag,html[lang^="hi"] .ai-kicker,html[lang^="bn"] .ai-kicker{font-size:14px;letter-spacing:.01em}
/* paragraphs and notes: 15px on desktop (they were 13 to 14px), 16px on a phone */
.notice,.form .consent,.store,.origin span,.hero-note,.crumb{font-size:15px}
.store code,.sample,.src-note,.small{font-size:13px}
@media (max-width:600px){
  .notice,.form .consent,.store,.origin span,.hero-note,.crumb,.legend .lg-t span,.wa-panel p,.wa-panel ul,footer{font-size:16px}
  .form label.fld{font-size:15px}
}
/* line length: paragraphs stop at about 70 to 75 characters */
.lead,.prose,.ai-card p,.role-note{max-width:38em}

/* Consent notice as a pop-up (13 Oct 2026): a link opens it; without JavaScript it stays inline, unchanged. Text and wording are identical. */
.notice-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--accent);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.notice-x,.notice-ok{display:none}
html.notice-js .notice{display:none;position:fixed;inset:0;z-index:70;background:rgba(10,8,25,.62);align-items:center;justify-content:center;padding:16px;border:0;border-radius:0;font-size:16px}
html.notice-js .notice.open,html.notice-js .notice:target{display:flex}
html.notice-js .notice-card{position:relative;background:var(--bg);color:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:22px 22px 18px;width:100%;max-width:640px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;box-shadow:var(--sh);outline:none;display:grid;gap:10px}
html.notice-js .notice-card h3{padding-right:44px}
html.notice-js .notice-card dl{display:grid;columns:auto;gap:8px}
html.notice-js .notice-x{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:28px;line-height:1;border-radius:999px;cursor:pointer}
html.notice-js .notice-x:hover,html.notice-js .notice-x:focus-visible{background:var(--accent-w)}
html.notice-js .notice-ok{display:inline-flex;justify-self:stretch;margin-top:6px}
body.modal-open{overflow:hidden}

.lang-top{display:none}