/* StudyDay marketing site. Follows brand/brand-guidelines.html */
:root{--ever:#0A3B2A;--go:#12B76A;--mint:#A6F4C5;--paper:#F6F4EE;--ink:#0E1512;--hi:#FFE14A;--stone:#E2DED3;--moss:#5C6F66}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
:focus-visible{outline:3px solid var(--go);outline-offset:3px;border-radius:6px}
.w{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ever)}
h1{font-size:clamp(44px,7vw,92px);line-height:.97}
h2{font-size:clamp(34px,4.6vw,60px)}
h3{font-size:23px;letter-spacing:-.03em;line-height:1.15;font-weight:700}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--moss);max-width:520px;margin-top:22px}
.eyebrow{font-size:14px;font-weight:700;color:var(--go);margin-bottom:16px}
section{padding:clamp(72px,10vw,136px) 0}

/* logo */
.m-p{--a:var(--go);--b:var(--ever);--c:var(--mint)}
.m-e{--a:var(--go);--b:#fff;--c:var(--mint)}
.m-g{--a:var(--ever);--b:#fff;--c:var(--mint)}
.lk{display:inline-flex;align-items:center;gap:.26em;font-weight:700;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:var(--ever)}
.lk svg{height:.82em;width:1.2em;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:16px;line-height:1;padding:17px 28px;border-radius:99px;border:0;cursor:pointer;background:var(--go);color:var(--ever);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px);background:#17C877}
.btn:active{transform:none}
.btn.dark{background:var(--ever);color:#fff}.btn.dark:hover{background:#0F4E38}
.btn.sm{padding:12px 20px;font-size:14px}
.note{font-size:14px;color:var(--moss);margin-top:16px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.on{border-color:var(--stone)}
.nav .w{display:flex;align-items:center;gap:34px;height:72px;font-size:15px;font-weight:600;color:var(--ever)}
.nav .lk{font-size:25px;margin-right:auto}
.nav a:not(.btn):not(.lk){opacity:.8;transition:opacity .15s}.nav a:not(.btn):not(.lk):hover{opacity:1}

/* hero */
.hero{padding:clamp(40px,6vw,88px) 0 0;overflow:hidden}
.hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero .copy{padding-bottom:clamp(40px,8vw,120px)}
.hero .btn{margin-top:34px}
.hero .stage{position:relative;display:flex;justify-content:center;align-self:end}
.hero .stage::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:var(--mint);bottom:-170px;left:50%;margin-left:-300px}
.hero .stage::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:2px solid var(--go);bottom:-170px;left:50%;margin-left:-180px}
.hero .ph{margin-bottom:-110px;z-index:1}
.float{position:absolute;z-index:2;background:#fff;border:1px solid var(--stone);border-radius:18px;padding:12px 16px;font-size:14px;font-weight:700;color:var(--ever);display:flex;align-items:center;gap:10px;box-shadow:0 20px 34px -18px rgba(10,59,42,.4);animation:bob 6s ease-in-out infinite}
.float.f1{left:-26%;top:30%}.float.f2{right:-4%;top:52%;animation-delay:-3s}
.float small{display:block;font-size:12px;font-weight:500;color:var(--moss)}
@keyframes bob{50%{transform:translateY(-8px)}}

.strip{border-top:1px solid var(--stone);border-bottom:1px solid var(--stone);background:#fff;position:relative;z-index:3}
.strip .w{display:flex;flex-wrap:wrap;gap:10px 44px;align-items:center;padding-top:22px;padding-bottom:22px;font-size:15px;font-weight:600;color:var(--ever)}
.strip span:first-child{color:var(--moss);font-weight:500}

/* phone */
.ph{width:286px;height:592px;border-radius:46px;background:#101211;padding:9px;box-shadow:inset 0 0 0 1.5px #343a37,0 50px 70px -30px rgba(10,59,42,.45),0 20px 30px -18px rgba(0,0,0,.4);position:relative;flex:none}
.sc{height:100%;border-radius:38px;overflow:hidden;background:var(--paper);position:relative;padding:52px 16px 0;font-size:13px;color:var(--ink);text-align:left;line-height:1.5}
.sc::before{content:"";position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#101211}
.sc .st{position:absolute;top:14px;left:28px;right:28px;display:flex;justify-content:space-between;font-size:12px;font-weight:700}
.sc small{color:var(--moss);font-size:12px;font-weight:600}
.sc h5{font-size:30px;letter-spacing:-.035em;font-weight:800;line-height:1.1;margin-bottom:12px}
.bar{height:8px;border-radius:4px;background:var(--stone);margin:8px 0 16px;overflow:hidden}.bar i{display:block;height:100%;width:50%;background:var(--go);border-radius:4px}
.ss{background:#fff;border:1px solid var(--stone);border-radius:16px;padding:11px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;line-height:1.5}
.ss b{display:block;font-size:14px;letter-spacing:-.01em}
.ss span{font-size:11.5px;color:var(--moss)}
.ss .r{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--moss);white-space:nowrap}
.ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--stone);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff!important;font-weight:800}
.ck.d{background:var(--go);border-color:var(--go)}
.ss.dn b{opacity:.45;text-decoration:line-through}
.ss.now{background:var(--ever);border-color:var(--ever);color:#fff;display:block;padding:14px}
.ss.now span{color:var(--mint)}
.ss.now .rw{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.pill{background:var(--go);color:var(--ever);font-weight:700;font-size:13px;padding:9px 18px;border-radius:99px;display:inline-block}
.tb{position:absolute;left:0;right:0;bottom:0;height:66px;background:#fff;border-top:1px solid var(--stone);display:flex;justify-content:space-around;padding-top:11px;font-size:10.5px;font-weight:600;color:#9AA59F}
.tb span{display:flex;flex-direction:column;align-items:center;gap:5px}
.tb i{width:20px;height:20px;border-radius:7px;background:currentColor;opacity:.5}
.tb .on{color:var(--ever)}.tb .on i{opacity:1}
.av{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px!important;font-weight:700;border:2px solid #fff;margin-left:-9px;flex:none;color:var(--ever)!important}
.av:first-child{margin-left:0}
.a1{background:var(--go)}.a2{background:var(--mint)}.a3{background:var(--hi)}.a4{background:var(--ever);color:#fff!important}

/* steps */
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head .lead{margin:0;justify-self:end}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--stone);border-radius:24px;padding:28px;display:flex;flex-direction:column}
.step .vis{height:210px;border-radius:16px;background:var(--paper);margin-bottom:26px;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.step .num{font-size:14px;font-weight:700;color:var(--go);margin-bottom:8px}
.step p{font-size:15.5px;color:var(--moss);margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips span{font-size:13.5px;font-weight:600;padding:9px 15px;border-radius:99px;background:#fff;border:1.5px solid var(--stone);color:var(--ever)}
.chips .on{background:var(--ever);border-color:var(--ever);color:#fff}

/* split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.week{background:#fff;border:1px solid var(--stone);border-radius:24px;padding:26px;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end}
.week div{display:flex;flex-direction:column;gap:6px;justify-content:flex-end;height:200px}
.week i{display:block;height:34px;border-radius:9px;background:var(--stone)}
.week i.d{background:var(--go)}
.week i.x{background:transparent;border:1.5px dashed #C9C3B4}
.week i.n{background:var(--mint);position:relative}
.week i.n::after{content:"+1";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-style:normal;color:var(--ever)}
.week b{font-size:12px;font-weight:600;color:var(--moss);text-align:center;margin-top:6px}
.quote{margin-top:28px;background:#fff;border:1px solid var(--stone);border-radius:18px;padding:18px 20px;font-size:16px;font-weight:600;color:var(--ever);display:flex;gap:12px;align-items:flex-start;max-width:480px}
.quote::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--go);margin-top:8px;flex:none}

.dark{background:var(--ever);color:#fff}
.dark h2{color:#fff}.dark .lead{color:var(--mint);opacity:.9}
.mintbg{background:var(--mint)}.mintbg .lead{color:var(--ever);opacity:.8}
.vt{font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:-.02em;fill:var(--ever)}
.panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:28px}
.panel .ss{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:#fff;font-size:14px;padding:13px 14px}
.panel .ss b{font-size:15px}.panel .ss span{color:var(--mint);font-size:12.5px}.panel .ss .r{font-size:12.5px;color:#fff}
.panel .av{border-color:var(--ever)}

.sdc{background:var(--ever);color:#fff;border-radius:28px;padding:28px;position:relative;overflow:hidden;width:min(100%,360px);box-shadow:0 50px 70px -34px rgba(10,59,42,.6);transform:rotate(-3deg)}
.sdc .day{background:var(--hi);color:var(--ever);font-weight:800;font-size:14px;padding:6px 13px;border-radius:99px;position:relative;display:inline-block}
.sdc .num{font-size:76px;font-weight:800;letter-spacing:-.045em;line-height:1;margin:44px 0 6px;font-variant-numeric:tabular-nums}
.sdc .on{font-size:15px;color:var(--mint);font-weight:600;margin-bottom:20px}
.sdc .chip{display:inline-block;font-size:13px;font-weight:700;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.12);margin:0 5px 5px 0}
.sdc .with{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:600}
.sdc .foot{border-top:1px solid rgba(255,255,255,.16);margin-top:22px;padding-top:16px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mint)}
.sdc .foot .lk{font-size:20px;color:#fff}
.sdc>svg{position:absolute;width:360px;height:246px;right:-140px;top:-70px;opacity:.22}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.plan{background:#fff;border:1px solid var(--stone);border-radius:24px;padding:36px}
.plan.feat{background:var(--ever);border-color:var(--ever);color:#fff}
.plan.feat h3{color:#fff}
.plan .price{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;margin:18px 0 6px}
.plan .price small{font-size:16px;font-weight:600;letter-spacing:0;opacity:.7}
.plan p{font-size:15.5px;opacity:.75}
.plan ul{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:12px;font-size:15.5px;font-weight:500}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--go);flex:none;margin-top:4px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M9 0a9 9 0 100 18A9 9 0 009 0zm4.2 6.9l-4.6 5a.9.9 0 01-1.3 0L4.9 9.5a.9.9 0 011.3-1.2l1.7 1.8 4-4.4a.9.9 0 011.3 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M9 0a9 9 0 100 18A9 9 0 009 0zm4.2 6.9l-4.6 5a.9.9 0 01-1.3 0L4.9 9.5a.9.9 0 011.3-1.2l1.7 1.8 4-4.4a.9.9 0 011.3 1.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.tag{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:99px;background:var(--paper);color:var(--moss)}

/* faq */
.faq{max-width:820px;margin:56px auto 0}
.faq details{border-top:1px solid var(--stone)}
.faq details:last-child{border-bottom:1px solid var(--stone)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;font-size:clamp(18px,2vw,22px);font-weight:700;letter-spacing:-.02em;color:var(--ever);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;flex:none;background:linear-gradient(var(--ever) 0 0) center/100% 2px no-repeat,linear-gradient(var(--ever) 0 0) center/2px 100% no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 40px 26px 0;color:var(--moss);max-width:680px}

/* cta + footer */
.cta{background:var(--ever);color:#fff;border-radius:32px;padding:clamp(40px,7vw,96px);position:relative;overflow:hidden}
.cta h2{color:#fff;max-width:560px;position:relative;font-size:clamp(36px,5.6vw,76px)}
.cta .btn{margin-top:34px;position:relative}
.cta>svg{position:absolute;width:680px;height:464px;right:-230px;top:50%;margin-top:-232px}
footer{padding:56px 0 44px;font-size:14.5px;color:var(--moss)}
footer .w{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}
footer .lk{font-size:24px;margin-right:auto}
footer a:hover{color:var(--ever)}
footer .legal{flex-basis:100%;border-top:1px solid var(--stone);padding-top:22px;font-size:13.5px}

/* text pages */
.page{padding:clamp(48px,7vw,96px) 0}
.prose{max-width:720px}
.prose h1{font-size:clamp(40px,6vw,72px);margin-bottom:28px}
.prose h2{font-size:26px;letter-spacing:-.03em;margin:44px 0 12px;line-height:1.15}
.prose p,.prose li{color:#3D4A44;margin-bottom:14px}
.prose a{color:var(--ever);font-weight:600;text-decoration:underline;text-decoration-color:var(--go);text-underline-offset:3px}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.float{animation:none}html{scroll-behavior:auto}}

@media (max-width:900px){
  .w{padding:0 20px}
  .nav .w{height:64px;gap:18px}.nav a.hide{display:none}.nav .lk{font-size:23px}
  .hero .w,.split,.head,.steps,.plans{grid-template-columns:1fr}
  .hero .copy{padding-bottom:24px}
  .hero .stage{margin-top:24px;height:470px;align-items:flex-start;overflow:hidden;margin-left:-20px;margin-right:-20px}
  .hero .stage::before{bottom:auto;top:90px}.hero .stage::after{bottom:auto;top:90px}
  .hero .ph{margin-bottom:0;margin-top:20px}
  .float.f1{display:none}.float.f2{right:4%;top:60%}
  .head{gap:18px;margin-bottom:36px}.head .lead{justify-self:start}
  .split .vis-first{order:-1}
  .hero .btn,.cta .btn{width:100%}
  .week{padding:16px;gap:5px}.week div{height:170px}.week i{height:28px;border-radius:7px}
  .sdc{margin:0 auto}
  .cta{border-radius:24px}.cta>svg{opacity:.25}
  .plan{padding:28px}
  .faq p{padding-right:0}
  footer .lk{flex-basis:100%}
}

/* ---------- timetable maker pages ---------- */
.c0{background:#0A3B2A;color:#fff}.c1{background:#12B76A;color:#0A3B2A}.c2{background:#A6F4C5;color:#0A3B2A}.c3{background:#FFE14A;color:#0A3B2A}.c4{background:#E2DED3;color:#0A3B2A}.c5{background:#D7F9E5;color:#0A3B2A}.c7{background:#fff;color:#0A3B2A}
.hero .w{grid-template-columns:1fr 1fr}
.hero .stage.tts{align-self:center;padding:20px 0 clamp(40px,7vw,96px)}
.hero .stage.tts::before{width:460px;height:460px;bottom:auto;top:50%;margin-top:-250px;margin-left:-250px}
.hero .stage.tts::after{width:460px;height:460px;bottom:auto;top:50%;margin-top:-250px;margin-left:-130px}
.mtt{position:relative;z-index:1;background:#fff;border-radius:24px;padding:22px;width:min(100%,560px);box-shadow:0 50px 80px -40px rgba(10,59,42,.5),0 0 0 1px var(--stone);transform:rotate(-2deg)}
.mhead b{display:block;font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--ever)}
.mhead span{font-size:12px;font-weight:600;color:var(--moss)}
.mgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px}
.mgrid>div{background:var(--paper);border-radius:12px;padding:7px;display:grid;gap:5px}
.mgrid h4{font-size:12px;font-weight:800;color:var(--ever);padding:1px 2px}
.mgrid i{font-style:normal;border-radius:9px;padding:7px 8px;font-size:9.5px;font-weight:600;line-height:1.25;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mgrid i b{display:block;font-size:11.5px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis}
.mgrid i em{display:block;font-style:normal;font-weight:700;opacity:.75;margin-top:3px}
.swatch{width:30px;height:30px;border-radius:50%;flex:none}
.float.f1{left:-6%;top:-3%}.float.f2{right:-2%;top:auto;bottom:16%}
.feel{background:#fff;border:1.5px solid var(--stone);border-radius:14px;padding:8px 8px 8px 14px;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--ever)}
.feel span{display:flex;background:var(--paper);border-radius:9px;padding:3px}
.feel i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--moss);padding:6px 8px;border-radius:7px}
.feel i.on{background:var(--ever);color:#fff}
.mini{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.mini i{height:44px;border-radius:10px}
.editcard{background:#fff;border:1px solid var(--stone);border-radius:28px;padding:28px;box-shadow:0 50px 80px -46px rgba(10,59,42,.45);max-width:460px;width:100%;justify-self:center}
.editcard>b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ever);margin-bottom:6px}
.editcard label{display:block;font-size:13px;font-weight:700;color:var(--ever);margin-top:14px}
.editcard label span{display:block;margin-top:6px;height:52px;border-radius:16px;border:1.5px solid var(--stone);padding:0 16px;font-size:16px;font-weight:600;line-height:49px}
.editcard>div{display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:8px}
.editcard>i{display:block;font-style:normal;text-align:center;margin-top:20px;height:54px;line-height:54px;border-radius:99px;background:var(--go);color:var(--ever);font-weight:700}
.ways{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.ways li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:16px;font-size:13.5px;color:var(--mint)}
.ways b{display:block;font-size:16.5px;color:#fff;letter-spacing:-.01em}
.sc.wall{background:var(--ever);color:#fff;padding:60px 14px 0}
.sc.wall::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--go);opacity:.16;right:-120px;top:-60px}
.wall .clock{text-align:center;font-size:74px;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:34px;position:relative;z-index:1}
.wall .clock small{display:block;font-size:13px;font-weight:600;color:#fff;opacity:.85;letter-spacing:0}
.wrow{display:grid;grid-template-columns:34px repeat(3,minmax(0,1fr));gap:5px;align-items:center;margin-bottom:7px;position:relative;z-index:1}
.wrow b{font-size:12px;color:var(--mint)}
.wrow i{font-style:normal;font-size:10.5px;font-weight:800;border-radius:8px;padding:9px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trust{background:#fff;border:1px solid var(--stone);border-radius:32px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.trust ul{list-style:none;padding:0;display:grid;gap:14px;font-weight:600;color:var(--ever)}
.trust li{display:flex;gap:12px;align-items:flex-start}
.trust li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--go);flex:none;margin-top:2px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M9 0a9 9 0 100 18A9 9 0 009 0zm4.2 6.9l-4.6 5a.9.9 0 01-1.3 0L4.9 9.5a.9.9 0 011.3-1.2l1.7 1.8 4-4.4a.9.9 0 011.3 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill-rule='evenodd' d='M9 0a9 9 0 100 18A9 9 0 009 0zm4.2 6.9l-4.6 5a.9.9 0 01-1.3 0L4.9 9.5a.9.9 0 011.3-1.2l1.7 1.8 4-4.4a.9.9 0 011.3 1.2z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:900px){
  .hero .w,.trust,.ways{grid-template-columns:1fr}
  .hero .stage.tts{height:auto;overflow:visible;margin:10px 0 0;padding:10px 0 56px}
  .hero .stage.tts::before,.hero .stage.tts::after{width:320px;height:320px;top:50%;margin-top:-170px}
  .hero .stage.tts::before{margin-left:-180px}.hero .stage.tts::after{margin-left:-90px}
  .mtt{padding:14px;border-radius:18px}.mgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.mgrid>div:nth-child(5){display:none}
  .float.f2{display:none}
  .nav .btn.sm{padding:11px 16px}
}
/* ---------- marketing sections ---------- */
.announce{display:block;background:var(--ever);color:var(--mint);text-align:center;font-size:14px;font-weight:500;padding:10px 16px}
.announce b{color:#fff;font-weight:700}
.announce span{color:var(--ever);background:var(--go);font-weight:700;padding:3px 11px;border-radius:99px;margin-left:8px;white-space:nowrap}
.ticks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:9px;font-weight:600;color:var(--ever);font-size:16.5px}
.ticks li{display:flex;gap:11px;align-items:center}
.ticks li::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.8' fill='none' stroke='%230A3B2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.btn.big{font-size:18px;padding:21px 34px;box-shadow:0 18px 30px -16px rgba(18,183,106,.9)}
.hero .btn.big{margin-top:30px}
.numbers{padding:clamp(48px,7vw,88px) 0}
.numbers .w{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.numbers b{display:block;font-size:clamp(52px,6.4vw,88px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ever)}
.numbers small{font-size:.34em;letter-spacing:-.02em;margin-left:4px;color:var(--go)}
.numbers span{display:block;margin-top:10px;font-size:15.5px;color:var(--moss);max-width:200px}
.numbers .w>div{border-top:2px solid var(--ever);padding-top:20px}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.versus>div{border-radius:28px;padding:clamp(26px,4vw,44px)}
.versus h3{font-size:26px;margin-bottom:22px}
.versus ul{list-style:none;padding:0;display:grid;gap:14px;font-size:16.5px;font-weight:500}
.versus li{display:flex;gap:13px;align-items:flex-start}
.versus li::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;margin-top:2px}
.old{background:#ECE8DD;color:#5C6F66}.old h3{color:#5C6F66}
.old li::before{background:#CFCABD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' fill='none' stroke='%235C6F66' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100%}
.new{background:var(--ever);color:#fff;box-shadow:0 50px 70px -44px rgba(10,59,42,.7)}.new h3{color:#fff}
.new li::before{background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3.2L16 7.8' fill='none' stroke='%230A3B2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100%}
.new .btn{margin-top:30px}
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feats div{background:#fff;border:1px solid var(--stone);border-radius:22px;padding:24px;transition:transform .2s,box-shadow .2s}
.feats div:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px rgba(10,59,42,.5)}
.feats b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ever);margin-bottom:8px;line-height:1.2}
.feats b::before{content:"";display:block;width:34px;height:23px;margin-bottom:16px;background:radial-gradient(circle at 11.5px 50%,var(--go) 11px,transparent 11.5px),radial-gradient(circle at 22.5px 50%,var(--ever) 11px,transparent 11.5px)}
.feats span{font-size:15px;color:var(--moss)}
.step>.num:first-child{font-size:13px;letter-spacing:.02em;background:var(--mint);color:var(--ever);align-self:flex-start;padding:5px 12px;border-radius:99px;margin-bottom:16px}
.tips{list-style:none;padding:0;counter-reset:t;display:grid;gap:10px}
.tips li{counter-increment:t;background:#fff;border:1px solid var(--stone);border-radius:20px;padding:20px 22px 20px 70px;position:relative;font-size:16px;color:var(--moss)}
.tips li::before{content:counter(t);position:absolute;left:20px;top:18px;width:34px;height:34px;border-radius:50%;background:var(--hi);color:var(--ever);font-weight:800;display:flex;align-items:center;justify-content:center}
.tips b{color:var(--ever)}
.tipsec{align-items:start}
.stickycta{display:none}
@media (max-width:900px){
  .numbers .w,.versus,.feats{grid-template-columns:1fr 1fr}
  .versus{grid-template-columns:1fr}
  .announce{font-size:13px}.announce span{display:none}
  .hero .btn.big{width:100%}
  .stickycta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;height:56px;border-radius:99px;background:var(--go);color:var(--ever);font-weight:700;font-size:17px;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(10,59,42,.6)}
  footer{padding-bottom:110px}
}
@media (max-width:520px){.feats{grid-template-columns:1fr}}
/* ---------- round 3: belief, three-way comparison, five ways, techniques, teachers, posters ---------- */
.count{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ever);background:#fff;border:1px solid var(--stone);border-radius:99px;padding:7px 14px 7px 8px;margin-bottom:22px}
.count::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--go);box-shadow:0 0 0 5px rgba(18,183,106,.18);margin-left:4px}
.count b{background:var(--hi);padding:0 6px;border-radius:5px}
.numbers a{display:block;border-top:2px solid var(--ever);padding-top:20px;transition:opacity .2s}
.numbers a:hover span{color:var(--ever)}
.mgrid i.cx{background:#fff;color:var(--ever);box-shadow:inset 0 0 0 1.5px #C9C3B4;background-image:repeating-linear-gradient(135deg,transparent 0 6px,#F1EEE6 6px 7px)}
.belief{padding-top:clamp(24px,4vw,48px)}
.belief .big{font-size:clamp(28px,3.6vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.12;color:var(--ever);max-width:1040px}
.belief mark{background:linear-gradient(transparent 58%,var(--hi) 58%,var(--hi) 92%,transparent 92%);color:inherit;padding:0}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(40px,5vw,64px)}
.three>div{border-top:2px solid var(--ever);padding-top:20px}
.three b{display:block;font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--ever);margin-bottom:8px}
.three span{font-size:16px;color:var(--moss)}
.versus.v3{grid-template-columns:1fr 1fr 1.15fr;margin-top:0;gap:16px}
.versus.v3>div{border-top:0}
.versus.v3 .old+.old{background:#E4E0D4}
.editcard .ek{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.editcard .ek i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ever);border:1.5px solid var(--stone);border-radius:99px;padding:5px 11px}
.editcard .ek i.on{background:var(--ever);border-color:var(--ever);color:#fff}
.editcard .eh{margin-top:10px;background:var(--mint);border-radius:14px;padding:10px 14px;font-size:13.5px;color:var(--ever)}
.dark .head .lead{justify-self:end}
.dark .eyebrow{color:var(--go)}
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.way{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:14px 14px 22px;position:relative}
.way .wv{height:190px;border-radius:16px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:18px}
.way .n{position:absolute;top:22px;left:22px;width:26px;height:26px;border-radius:50%;background:var(--hi);color:var(--ever);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1}
.way b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#fff;padding:0 6px}
.way p{font-size:14.5px;color:var(--mint);margin-top:6px;padding:0 6px;opacity:.9}
.a4{width:150px;height:106px;background:#fff;border-radius:4px;padding:16px 10px 10px;position:relative;transform:rotate(-4deg);box-shadow:0 18px 30px -14px rgba(0,0,0,.5)}
.a4 .tp{position:absolute;top:-8px;left:50%;width:44px;height:16px;margin-left:-22px;background:rgba(255,225,74,.85);transform:rotate(3deg)}
.ag{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ag i{height:20px;border-radius:4px}
.lock{width:96px;height:172px;border-radius:18px;background:var(--ever);box-shadow:inset 0 0 0 3px #101211,0 18px 30px -14px rgba(0,0,0,.6);padding:16px 10px;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start;margin-top:30px}
.lock small{grid-column:1/-1;text-align:center;font-size:8px;font-weight:600;color:#fff;opacity:.8}
.lock em{grid-column:1/-1;text-align:center;font-style:normal;font-size:26px;font-weight:700;color:#fff;line-height:1;margin-bottom:10px;letter-spacing:-.02em}
.lock i{height:14px;border-radius:4px}
.roll{display:grid;grid-template-columns:repeat(3,44px);gap:4px}
.roll i{height:44px;border-radius:5px;background:rgba(255,255,255,.12)}
.roll i:nth-child(1){background:#2F5D4B}.roll i:nth-child(5){background:#3E6C5A}.roll i:nth-child(6){background:#26503F}
.roll .me{background:#fff;padding:5px;position:relative;box-shadow:0 0 0 2px var(--hi)}
.roll .me u{display:block;height:100%;background:linear-gradient(var(--ever) 0 0) 0 0/40% 30% no-repeat,linear-gradient(var(--go) 0 0) 100% 0/52% 30% no-repeat,linear-gradient(var(--hi) 0 0) 0 50%/52% 30% no-repeat,linear-gradient(var(--mint) 0 0) 100% 50%/40% 30% no-repeat,linear-gradient(var(--go) 0 0) 0 100%/40% 30% no-repeat;border-radius:2px}
.url{background:#fff;border-radius:14px;padding:12px 14px;width:90%;box-shadow:0 18px 30px -14px rgba(0,0,0,.5)}
.url span{display:block;font-size:12px;font-weight:700;color:var(--ever);background:var(--paper);border-radius:99px;padding:7px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.url small{display:block;font-size:11px;color:var(--moss);margin-top:8px;text-align:center}
.mail{background:#fff;border-radius:14px;padding:14px;width:84%;display:grid;gap:6px;box-shadow:0 18px 30px -14px rgba(0,0,0,.5)}
.mail b{font-size:12px;color:var(--moss);padding:0}
.mail span{font-size:14px;font-weight:800;color:var(--ever)}
.mail i{height:7px;border-radius:4px;background:var(--stone)}.mail i+i{width:60%;background:var(--mint)}
.waycta{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.waycta span{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--mint)}
.tech{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.tech div{background:var(--ever);color:var(--mint);border-radius:20px;padding:20px 22px;font-size:14.5px}
.tech b{display:block;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.teach{background:#fff;border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.lesson{background:var(--paper);border:1px solid var(--stone);border-radius:28px;padding:30px;max-width:460px;width:100%;justify-self:center;box-shadow:0 50px 80px -50px rgba(10,59,42,.45);transform:rotate(1.5deg)}
.lesson>b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--ever)}
.lesson>span{font-size:14px;font-weight:600;color:var(--moss)}
.lesson div{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:start;margin-top:16px;padding-top:16px;border-top:1px solid var(--stone)}
.lesson em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--ever);background:var(--mint);border-radius:99px;padding:5px 0;text-align:center}
.lesson p{font-size:14.5px;color:var(--moss)}
.lesson p b{display:block;font-size:16px;color:var(--ever)}
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pst{aspect-ratio:3/4;border-radius:22px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.pst b{font-size:clamp(28px,3.3vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1;position:relative}
.pst small{font-size:15px;font-weight:600;margin-top:auto;margin-bottom:18px;position:relative}
.pst .lk{font-size:22px;position:relative}
.pst.y{background:var(--hi);color:var(--ever)}
.pst.g{background:var(--ever);color:#fff}.pst.g b{color:#fff;margin-top:auto;margin-bottom:24px}
.pst.g>svg{position:absolute;width:120%;height:auto;aspect-ratio:3/2;left:-10%;top:4%;opacity:.95;--a:var(--go);--b:#fff;--c:var(--mint)}
.pst.g .lk{color:#fff}
.pst.m{background:var(--mint);color:var(--ever)}
.pst.m s{text-decoration-thickness:4px;text-decoration-color:#C2371F;opacity:.55}
@media (max-width:900px){
  .three,.versus.v3,.five,.posters{grid-template-columns:1fr}
  .tech{grid-template-columns:1fr 1fr}
  .five{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
  .five::-webkit-scrollbar{display:none}
  .way{scroll-snap-align:center}
  .posters{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
  .pst{scroll-snap-align:center}
  .waycta .btn{width:100%}
  .belief .big br{display:none}
  .count{font-size:13px}
}
@media (max-width:520px){.tech{grid-template-columns:1fr}}
/* teachers page */
.thero .lesson{align-self:center;margin-bottom:clamp(40px,8vw,120px)}
.thero h1{font-size:clamp(44px,6.4vw,84px)}
@page{size:A4 portrait;margin:0}
@media print{
  body.pp>*:not(main),body.pp main>section:not(#posters),body.pp #posters .head,body.pp #posters .w>div:last-child{display:none!important}
  body.pp #posters{padding:0}
  body.pp,body.pp main{margin:0;padding:0;background:none}
  body.pp .w{padding:0;max-width:none}
  body.pp .posters{display:block;margin:0;padding:0;overflow:visible}
  body.pp .pst:last-child{break-after:auto}
  body.pp .pst{width:210mm;height:296mm;aspect-ratio:auto;border-radius:0;padding:22mm;break-after:page;opacity:1!important;transform:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.pp .pst b{font-size:30mm}
  body.pp .pst.g b{font-size:24mm}
  body.pp .pst small{font-size:7mm}
  body.pp .pst .lk{font-size:12mm}
}
/* phone menu */
.menu{display:none}
.mpanel{display:none}
@media (max-width:900px){
  .menu{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border-radius:50%;border:1px solid var(--stone);background:#fff;cursor:pointer;padding:0 13px;margin-left:-8px;flex:none}
  .menu i{display:block;height:2px;border-radius:2px;background:var(--ever);transition:transform .2s}
  .nav.open .menu i:first-child{transform:translateY(3.5px) rotate(45deg)}.nav.open .menu i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .nav.open .mpanel{display:grid;padding:6px 20px 18px;border-bottom:1px solid var(--stone);background:var(--paper)}
  .mpanel a{padding:14px 0;font-size:18px;font-weight:700;color:var(--ever);border-top:1px solid var(--stone)}
  .mpanel a:first-child{border-top:0}
  .nav .w{gap:12px}
  .nav .btn.sm{margin-left:auto}
  .nav .lk{margin-right:0}
  .lesson{transform:none;padding:22px}
  .thero .lesson{margin-bottom:40px}
}
@media (max-width:380px){.nav .btn.sm{padding:11px 13px;font-size:13px}}

/* why the name */
.why{display:flex;gap:22px;align-items:center;margin-top:clamp(40px,5vw,60px);background:#fff;border:1px solid var(--stone);border-radius:24px;padding:clamp(22px,3vw,32px)}
.why svg{width:74px;height:50px;flex:none}
.why p{font-size:clamp(17px,1.6vw,20px);color:var(--moss)}
.why b{color:var(--ever)}

/* home screen guide */
.home{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.hs-tabs{display:inline-flex;background:#fff;border:1px solid var(--stone);border-radius:99px;padding:4px;margin-top:28px}
.hs-tabs button{font:inherit;font-size:14.5px;font-weight:700;color:var(--moss);border:0;background:none;padding:10px 18px;border-radius:99px;cursor:pointer}
.hs-tabs .on{background:var(--ever);color:#fff}
.hs-steps{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;counter-reset:h}
.hs-steps li{counter-increment:h;display:flex;gap:14px;align-items:center;font-size:16.5px;font-weight:600;color:var(--ever)}
.hs-steps li::before{content:counter(h);width:30px;height:30px;border-radius:50%;background:var(--hi);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.hs-steps [data-os]{display:none}
.home[data-os=ios] [data-os=ios],.home[data-os=and] [data-os=and]{display:flex}
.hsph{width:250px;height:500px;border-radius:40px;background:#101211;padding:8px;justify-self:center;box-shadow:0 50px 70px -30px rgba(10,59,42,.45);position:relative}
.hss{position:absolute;inset:8px;border-radius:33px;overflow:hidden;background:var(--paper)}
.hss .pg{position:absolute;inset:0;padding:46px 14px 0}
.hss .bar{height:30px;border-radius:99px;background:#fff;border:1px solid var(--stone);font-size:10px;font-weight:700;color:var(--moss);display:flex;align-items:center;padding:0 12px;margin:0 0 12px}
.hss .tt{background:#fff;border-radius:14px;padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.hss .tt i{height:24px;border-radius:6px}
.hss .tbar{position:absolute;left:0;right:0;bottom:0;height:52px;background:#fff;border-top:1px solid var(--stone);display:flex;justify-content:space-around;align-items:center}
.hss .tbar i{width:18px;height:18px;border-radius:5px;background:#C9CFCB}
.hss .tbar .sh{background:none;border:2px solid #2F7CF6;border-radius:4px;position:relative}
.hss .tbar .sh::after{content:"";position:absolute;left:5px;top:-7px;width:2px;height:12px;background:#2F7CF6}
.hss .dots{position:absolute;right:14px;top:50px;display:none;flex-direction:column;gap:3px}
.hss .dots i{width:4px;height:4px;border-radius:50%;background:var(--ever)}
.home[data-os=and] .hss .dots{display:flex}.home[data-os=and] .hss .tbar{display:none}
.hss .sheet{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border-radius:18px;padding:8px;box-shadow:0 -10px 30px -10px rgba(0,0,0,.3);animation:hsSheet 6s infinite}
.home[data-os=and] .hss .sheet{bottom:auto;top:58px;left:auto;right:10px;width:150px;transform-origin:top right;animation-name:hsMenu}
.hss .sheet span{display:block;font-size:11px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:9px}
.hss .sheet .add{animation:hsRow 6s infinite;font-weight:800}
.hss .home2{position:absolute;inset:0;background:linear-gradient(160deg,#1E5A45,#0A3B2A);padding:60px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px;align-content:start;animation:hsHome 6s infinite}
.hss .home2 i{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.18)}
.hss .home2 .app{background:var(--ever);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);position:relative;animation:hsPop 6s infinite}
.hss .home2 .app::before,.hss .home2 .app::after{content:"";position:absolute;top:31%;width:38%;height:38%;border-radius:50%}
.hss .home2 .app::before{left:16%;background:var(--go)}.hss .home2 .app::after{left:42%;background:var(--mint);mix-blend-mode:normal;opacity:.9}
.hss .home2 small{grid-column:1/-1;font-size:10px;color:#fff;font-weight:600;opacity:.8}
.hss .tapf{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(10,59,42,.3);border:2px solid #fff;z-index:5;animation:hsTap 6s infinite}
.home[data-os=and] .hss .tapf{animation-name:hsTapA}
@keyframes hsSheet{0%,14%{transform:translateY(120%)}22%,56%{transform:none}62%,100%{transform:translateY(120%)}}
@keyframes hsMenu{0%,14%{transform:scale(.5);opacity:0}22%,56%{transform:none;opacity:1}62%,100%{transform:scale(.5);opacity:0}}
@keyframes hsRow{0%,36%{background:none}42%,56%{background:var(--mint)}}
@keyframes hsHome{0%,58%{opacity:0}64%,94%{opacity:1}100%{opacity:0}}
@keyframes hsPop{0%,64%{transform:scale(.3);opacity:0}72%,100%{transform:none;opacity:1}}
@keyframes hsTap{0%{left:60%;top:80%;opacity:0}6%{opacity:1}12%{left:calc(50% - 13px);top:calc(100% - 39px);transform:scale(1)}14%{transform:scale(.8)}18%{transform:none}38%{left:50%;top:calc(100% - 101px)}41%{transform:scale(.8)}46%,100%{left:50%;top:calc(100% - 101px);opacity:0;transform:none}}
@keyframes hsTapA{0%{left:50%;top:40%;opacity:0}6%{opacity:1}12%{left:calc(100% - 30px);top:46px;transform:scale(1)}14%{transform:scale(.8)}18%{transform:none}38%{left:calc(100% - 98px);top:96px}41%{transform:scale(.8)}46%,100%{left:calc(100% - 98px);top:96px;opacity:0;transform:none}}
@media (max-width:900px){.home{grid-template-columns:1fr}.hsph{order:-1}}
@media (prefers-reduced-motion:reduce){.hss *{animation:none!important}.hss .home2{opacity:0}}@media (max-width:900px){.nav{background:rgba(246,244,238,.97)}}
@media (max-width:520px){
  .nav .btn.sm{display:none}
  .menu{margin-left:auto}
  .mpanel .go{margin-top:10px;border:0;background:var(--ever);color:#fff;border-radius:99px;text-align:center;padding:15px 0;font-size:16px}
}
@media (min-width:521px){.mpanel .go{display:none}}
/* round 4: hero fits a laptop screen, anchors clear the sticky nav */
.hero{padding-top:clamp(28px,3.6vw,56px)}
.hero .copy{padding-bottom:clamp(36px,5vw,72px)}
.hero h1{font-size:clamp(44px,5.2vw,78px);line-height:.98}
.hero .lead{margin-top:18px}
.hero .ticks{margin-top:20px;gap:7px}
.hero .btn.big{margin-top:26px}
.hero .note{margin-top:12px}
.count{margin-bottom:18px}
@media (min-width:901px){.hero .w{grid-template-columns:1fr 1fr;gap:56px}.hero .stage.tts{padding-bottom:clamp(36px,5vw,72px)}}
@media (min-width:901px) and (max-height:820px){.hero h1{font-size:clamp(44px,4.6vw,66px)}.hero .ticks{display:none}}
html{scroll-padding-top:96px}
section[id],[id]{scroll-margin-top:96px}
/* realistic phone frames for the home screen guide */
.hsph{transition:border-radius .3s,padding .3s}
.hsph .btns{position:absolute;right:-3px;top:120px;width:3px;height:64px;border-radius:0 3px 3px 0;background:#2a2e2c}
.hsph .btns::before{content:"";position:absolute;left:-253px;top:-20px;width:3px;height:34px;border-radius:3px 0 0 3px;background:#2a2e2c;box-shadow:0 48px 0 #2a2e2c}
.hss .sbar{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;z-index:4;font-size:12px;color:var(--ink)}
.hss .sbar b{font-weight:700}
.hss .sig{display:flex;align-items:flex-end;gap:2px}
.hss .sig i{width:3px;background:var(--ink);border-radius:1px}.hss .sig i:nth-child(1){height:5px}.hss .sig i:nth-child(2){height:7px}.hss .sig i:nth-child(3){height:9px}
.hss .sig u{width:18px;height:9px;border:1.5px solid var(--ink);border-radius:3px;margin-left:4px;background:linear-gradient(var(--ink) 0 0) 1px 1px/70% calc(100% - 2px) no-repeat}
.hss .isl{position:absolute;top:10px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:12px;background:#000;z-index:6}
.hss .gest{position:absolute;bottom:6px;left:50%;width:96px;height:4px;margin-left:-48px;border-radius:3px;background:var(--ink);z-index:6;opacity:.85}
.hss .home2 small{display:none}
.home[data-os=ios] .ta,.home[data-os=and] .ti{display:none}
.home[data-os=ios] .hss .sbar{justify-content:space-between}
/* Android: squarer corners, thin bezel, punch-hole camera, Chrome bar on top with the menu dots */
.home[data-os=and] .hsph{border-radius:30px;padding:6px}
.home[data-os=and] .hss{inset:6px;border-radius:25px}
.home[data-os=and] .hss .isl{width:12px;height:12px;margin-left:-6px;top:12px;border-radius:50%}
.home[data-os=and] .hss .sbar{padding:0 20px;font-size:11.5px}
.home[data-os=and] .hss .gest{width:70px;height:3px;margin-left:-35px;bottom:8px}
.home[data-os=and] .hss .bar{margin-right:22px;border-radius:12px}
.home[data-os=and] .hsph .btns{top:110px}
.home[data-os=and] .hsph .btns::before{display:none}
.hss .home2{padding-top:64px}
/* research references */
.step sup{font-size:.7em;font-weight:700;color:var(--go)}
.refs{margin:28px 0 0;padding-left:20px;font-size:13px;color:var(--moss);display:grid;gap:4px;max-width:900px}
.evid{margin-top:20px;background:#fff;border:1px solid var(--stone);border-left:4px solid var(--go);border-radius:18px;padding:22px 24px;font-size:15.5px;color:var(--moss)}.evid b{color:var(--ever)}

/* round 7: tighter phone layout */
@media (max-width:520px){
  .feats{grid-template-columns:1fr 1fr;gap:10px}
  .feats div{padding:16px}
  .feats b{font-size:15.5px}.feats b::before{width:28px;height:19px;margin-bottom:12px;background:radial-gradient(circle at 9.5px 50%,var(--go) 9px,transparent 9.5px),radial-gradient(circle at 18.5px 50%,var(--ever) 9px,transparent 9.5px)}
  .feats span{font-size:13.5px}
  .tech{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -20px 0;padding:0 20px 6px;scrollbar-width:none}
  .tech::-webkit-scrollbar{display:none}
  .tech div{scroll-snap-align:center}
  .why{flex-direction:column;align-items:flex-start;gap:14px}
  .why svg{width:56px;height:38px}
  .hsph{width:220px;height:440px;border-radius:36px}
  .hss{border-radius:29px}
  .three{gap:14px}
  .steps .step .vis{height:180px}
}
/* round 9: sticky button only when no other one is on screen; phone frame side buttons fixed */
@media (max-width:900px){
  .stickycta{opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .25s,transform .25s}
  .stickycta.show{opacity:1;transform:none;pointer-events:auto}
}
.hsph .btns{position:absolute;inset:0;width:auto;height:auto;background:none;border-radius:0;pointer-events:none;right:0;top:0}
.hsph .btns::before{content:"";position:absolute;left:-3px;top:24%;width:3px;height:7%;border-radius:3px 0 0 3px;background:#2a2e2c;box-shadow:0 calc(1px * 0) 0 #2a2e2c}
.hsph .btns::after{content:"";position:absolute;left:-3px;top:34%;width:3px;height:7%;border-radius:3px 0 0 3px;background:#2a2e2c}
.hsph::after{content:"";position:absolute;right:-3px;top:28%;width:3px;height:12%;border-radius:0 3px 3px 0;background:#2a2e2c}
.home[data-os=and] .hsph .btns::before,.home[data-os=and] .hsph .btns::after{display:none}
.home[data-os=and] .hsph::after{top:22%;height:16%}.home[data-os=and] .hsph .btns{top:0}