.how-page{margin:0;background:#fbfaff;color:#24223e}.how-page *{box-sizing:border-box}.how-page a{text-decoration:none}.how-header{height:82px;padding:0 max(28px,calc((100vw - 1460px)/2));display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border-bottom:1px solid #eee9f6;position:sticky;top:0;z-index:30}.how-header>a img{width:160px}.how-header nav{display:flex;gap:28px}.how-header nav a,.how-login{color:#625d70;font-size:13px}.how-header>div{display:flex;align-items:center;gap:18px}.how-hero{max-width:1460px;min-height:680px;margin:0 auto 40px;border-radius:0 0 36px 36px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;overflow:hidden;background:linear-gradient(125deg,#7543ef 0%,#9356ed 55%,#e054a3 100%);color:#fff}.how-hero-copy{padding:78px 35px 78px 78px}.how-hero-copy>span,.dual-intro>span,.portal-copy>span,.habit-section>div>span,.how-final span,.how-origin>span{font-size:11px;font-weight:850;letter-spacing:.09em}.how-hero h1{font-size:clamp(53px,5.2vw,78px);line-height:.98;letter-spacing:-.06em;margin:22px 0}.how-hero h1 em{font-style:normal;color:#fff17a}.how-hero-copy>p{max-width:650px;color:#f3edff;font-size:16px;line-height:1.75}.how-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 25px}.how-actions .btn-primary{background:#fff;color:#6638db}.how-actions .btn-outline{color:#fff;border-color:#ffffff80}.how-proof{display:flex;gap:10px;flex-wrap:wrap}.how-proof b{padding:8px 12px;border-radius:99px;background:#ffffff18;font-size:11px}.how-hero-art{position:relative;align-self:stretch;min-height:680px;background:radial-gradient(circle at 55% 50%,#ffffff20,transparent 50%)}.how-hero-art>img{position:absolute;width:420px;height:590px;object-fit:contain;bottom:0;left:50%;transform:translateX(-50%);filter:drop-shadow(0 30px 25px #3c1c7928)}.how-speech{position:absolute;z-index:2;right:9%;top:15%;display:grid;gap:5px;padding:18px 22px;background:#fff17a;color:#3b2764;border-radius:28px 28px 28px 8px;transform:rotate(4deg);box-shadow:0 14px 30px #41256720}.how-speech b{font-size:18px}.how-speech span{font-size:11px}.how-orbit{position:absolute;z-index:2;border-radius:15px;padding:12px 16px;background:#ffffffea;color:#5d39bd;font-size:11px;font-weight:800;box-shadow:0 12px 35px #2f19522a}.orbit-one{left:5%;top:28%;transform:rotate(-8deg)}.orbit-two{left:10%;bottom:25%;transform:rotate(5deg)}.orbit-three{right:3%;bottom:30%;transform:rotate(-4deg)}
.how-origin{max-width:1280px;margin:90px auto;padding:55px;border-radius:30px;background:#f0ebff}.how-origin>span,.dual-intro>span{color:#7042ef}.how-origin h2{font-size:38px;line-height:1.15;letter-spacing:-.04em;margin:12px 0 34px}.how-origin>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.how-origin article{padding:25px;border-radius:19px;background:#fff}.how-origin article b{font-size:16px}.how-origin article p{margin-top:8px;color:#777084;font-size:13px}.dual-intro{text-align:center;max-width:820px;margin:100px auto 45px}.dual-intro h2{font-size:48px;line-height:1.08;letter-spacing:-.05em;margin:14px 0}.dual-intro p{color:#777084;font-size:15px}
.portal-section{max-width:1380px;margin:0 auto 80px;padding:60px;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;border-radius:34px;background:#fff;border:1px solid #eee9f6}.portal-section.child-portal{grid-template-columns:1.1fr .9fr;background:#f4efff}.portal-copy>span{color:#7042ef}.portal-copy h2{font-size:43px;line-height:1.08;letter-spacing:-.045em;margin:13px 0}.portal-copy>p{color:#777084;font-size:14px}.portal-copy ul{list-style:none;padding:0;margin:27px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}.portal-copy li{position:relative;padding-left:20px}.portal-copy li:before{content:'✓';position:absolute;left:0;color:#7042ef;font-weight:900}.portal-copy li b,.portal-copy li small{display:block}.portal-copy li b{font-size:14px}.portal-copy li small{font-size:11px;color:#7b7486;line-height:1.5;margin-top:4px}.portal-demo{position:relative;min-height:500px;padding:25px;border:1px solid #e4ddec;border-radius:28px;background:#fbfafe;box-shadow:0 30px 60px #4d356f16;transform:perspective(1500px) rotateY(-3deg)}.portal-demo>img{position:absolute;width:125px;height:175px;object-fit:contain;right:-25px;bottom:-20px;filter:drop-shadow(0 16px 13px #4c347222)}.fake-top{display:flex;justify-content:space-between;align-items:center;padding:8px 5px 22px}.fake-top b{font-size:22px}.fake-top span{font-size:10px;padding:7px 10px;border-radius:20px;background:#eee7ff;color:#7042ef}.fake-kpis{display:grid;grid-template-columns:1.2fr 1fr;gap:13px}.fake-kpis article,.today-goal{display:grid;gap:8px;padding:20px;border-radius:17px;background:#fff}.fake-kpis article:first-child{background:#efeaff}.fake-kpis small{font-size:9px;color:#746d80}.fake-kpis strong{font-size:19px}.fake-kpis i,.today-goal i,.fake-chart span i{display:block;height:7px;border-radius:8px;background:#e5e1ec;overflow:hidden}.fake-kpis i u,.today-goal i u{display:block;width:75%;height:100%;background:#7042ef}.fake-kpis article>span{font-size:10px;color:#308467}.fake-chart{display:grid;grid-template-columns:1.15fr .85fr;gap:13px;margin-top:13px}.fake-chart>div,.fake-chart aside{padding:21px;border-radius:17px;background:#fff}.fake-chart b{font-size:13px}.fake-chart span{display:grid;grid-template-columns:95px 1fr 35px;align-items:center;gap:7px;margin-top:18px;font-size:9px}.fake-chart span i:after{content:'';display:block;width:var(--p);height:100%;background:#8a5cf4;border-radius:8px}.fake-chart em{font-style:normal}.fake-chart aside p{display:flex;align-items:center;gap:8px;font-size:9px;margin-top:15px}.fake-chart aside p i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#e5f8f0;color:#24805f}.child-demo{transform:perspective(1500px) rotateY(3deg);background:#fff}.today-goal{margin-bottom:13px;background:#f2edff}.today-goal>span,.today-goal>b{font-size:11px}.subject-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.subject-cards article{display:grid;gap:28px;padding:18px 13px;border-radius:15px;background:#eaf8f2;font-size:10px}.subject-cards article:nth-child(3){background:#edf6ff}.subject-cards article.active{background:#fff0e9;border:2px solid #eead98}.subject-cards span{color:#605b6d}.subject-cards .active span{padding:8px;border-radius:8px;background:#7443ef;color:#fff;text-align:center}.child-bottom{display:grid;grid-template-columns:1fr auto;gap:13px;margin-top:13px}.child-bottom p{display:grid;gap:8px;padding:20px;border-radius:15px;background:#efeaff;font-size:10px}.child-bottom p span{color:#716a7d}.child-bottom>strong{display:grid;place-items:center;padding:20px;border-radius:15px;background:#fff4d6;color:#b77c16}.child-demo>img{left:-25px;right:auto}
.habit-section{max-width:1380px;margin:100px auto;display:grid;grid-template-columns:1fr 340px;gap:55px;padding:65px;border-radius:34px;background:linear-gradient(130deg,#7042ef,#a058ea 60%,#dd55a3);color:#fff;overflow:hidden}.habit-section h2{font-size:48px;line-height:1.05;letter-spacing:-.05em;margin:14px 0}.habit-section p{max-width:850px;color:#eee7ff}.habit-section ol{list-style:none;padding:0;margin:35px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.habit-section li{display:grid;grid-template-columns:38px 1fr;column-gap:12px;padding:18px;border:1px solid #ffffff24;border-radius:17px;background:#ffffff12}.habit-section li i{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff17a;color:#4e2f91;font-style:normal;font-weight:900}.habit-section li b{font-size:14px}.habit-section li small{font-size:10px;color:#eee7ff;line-height:1.5}.habit-section>img{width:100%;height:510px;object-fit:contain;align-self:end;filter:drop-shadow(0 22px 20px #32165d3d)}.how-final{max-width:1200px;margin:0 auto 100px;padding:36px 45px;display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;border-radius:28px;background:#fff3d1}.how-final img{width:120px;height:150px;object-fit:contain}.how-final span{color:#8056d9}.how-final h2{font-size:31px;line-height:1.1;letter-spacing:-.04em;margin:7px 0}.how-final p{font-size:12px;color:#766d78}.how-final .btn{background:#7042ef;color:#fff}.how-footer{padding:35px max(28px,calc((100vw - 1200px)/2));display:flex;align-items:center;gap:28px;background:#28213e;color:#d9d1e8}.how-footer img{width:150px}.how-footer span{font-size:11px}.how-footer div{margin-left:auto;display:flex;gap:20px}.how-footer a{color:#e9e2f4;font-size:11px}
@media(max-width:1050px){.how-header nav{display:none}.how-hero{grid-template-columns:1fr .75fr}.how-hero-copy{padding:55px 20px 55px 45px}.how-hero-art>img{width:330px}.portal-section,.portal-section.child-portal{margin-left:24px;margin-right:24px;padding:40px;gap:35px}.portal-copy ul{grid-template-columns:1fr}.habit-section{margin-left:24px;margin-right:24px;grid-template-columns:1fr 250px;padding:45px}.how-origin{margin-left:24px;margin-right:24px}.how-final{margin-left:24px;margin-right:24px}}
@media(max-width:760px){.how-header{height:70px;padding:0 18px}.how-header>a img{width:135px}.how-header .how-login{display:none}.how-header .btn{font-size:11px;padding:10px 12px}.how-hero{grid-template-columns:1fr;border-radius:0;min-height:auto}.how-hero-copy{padding:55px 24px 25px}.how-hero h1{font-size:52px}.how-hero-art{min-height:430px}.how-hero-art>img{height:430px;width:310px}.how-speech{top:5%;right:5%}.how-origin{margin-top:55px;padding:30px}.how-origin h2{font-size:29px}.how-origin>div{grid-template-columns:1fr}.dual-intro{padding:0 24px;margin:70px auto 35px}.dual-intro h2{font-size:36px}.portal-section,.portal-section.child-portal{grid-template-columns:1fr;padding:28px;margin:0 16px 45px}.child-portal .portal-demo{grid-row:2}.portal-copy h2{font-size:35px}.portal-demo{min-height:450px;padding:16px;transform:none}.fake-chart{grid-template-columns:1fr}.fake-chart aside{display:none}.habit-section{grid-template-columns:1fr;margin:65px 16px;padding:32px 25px}.habit-section h2{font-size:38px}.habit-section ol{grid-template-columns:1fr}.habit-section>img{height:300px}.how-final{grid-template-columns:90px 1fr;margin:0 16px 60px;padding:26px}.how-final img{width:85px;height:120px}.how-final h2{font-size:25px}.how-final .btn{grid-column:1/-1}.how-footer{flex-wrap:wrap;padding:30px 22px}.how-footer div{width:100%;margin:0}.subject-cards{gap:6px}.subject-cards article{padding:14px 8px}.fake-top b{font-size:18px}}
.start-steps{max-width:1280px;margin:85px auto;padding:55px;border:1px solid #ece6f5;border-radius:32px;background:#fff;box-shadow:0 24px 70px #5139730b}.start-head{max-width:760px}.start-head>span{font-size:11px;font-weight:850;letter-spacing:.09em;color:#7042ef}.start-head h2{font-size:43px;line-height:1.08;letter-spacing:-.045em;margin:13px 0}.start-head p{color:#777084;font-size:14px}.start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:35px}.start-grid article{position:relative;display:grid;grid-template-columns:45px 1fr;gap:15px;padding:25px;border-radius:20px;background:#f2edff}.start-grid article:nth-child(2){background:#eaf8f2}.start-grid article:nth-child(3){background:#fff3d8}.start-grid article>i{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#7042ef;color:#fff;font-style:normal;font-size:19px;font-weight:900}.start-grid article:nth-child(2)>i{background:#2b9f7b}.start-grid article:nth-child(3)>i{background:#dc9b20}.start-grid span{font-size:9px;font-weight:850;letter-spacing:.07em;color:#7042ef}.start-grid h3{font-size:18px;margin:6px 0}.start-grid p{font-size:12px;color:#716a7c;line-height:1.6}.start-note{display:flex;align-items:center;gap:14px;margin-top:18px;padding:17px 20px;border-radius:16px;background:#faf8fd}.start-note b{white-space:nowrap;font-size:13px}.start-note span{font-size:12px;color:#777084}@media(max-width:1050px){.start-steps{margin-left:24px;margin-right:24px}}@media(max-width:760px){.start-steps{margin:50px 16px;padding:30px 24px}.start-head h2{font-size:34px}.start-grid{grid-template-columns:1fr}.start-note{align-items:flex-start;flex-direction:column}}
.parent-lab-feature{max-width:1260px;margin:-38px auto 90px;padding:48px;display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center;border-radius:30px;background:linear-gradient(125deg,#28213f,#3b285d);color:#fff;box-shadow:0 25px 60px #3726501c}.lab-feature-copy>span{font-size:10px;font-weight:850;letter-spacing:.09em;color:#cbb8ff}.lab-feature-copy h2{font-size:38px;line-height:1.08;letter-spacing:-.045em;margin:13px 0}.lab-feature-copy>p{font-size:13px;color:#d9d0e8}.lab-benefits{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.lab-benefits b{padding:8px 11px;border:1px solid #ffffff1f;border-radius:99px;background:#ffffff0d;color:#eee8f8;font-size:10px}.lab-builder-demo{display:grid;grid-template-columns:.78fr 1.22fr;gap:14px;padding:15px;border-radius:22px;background:#f4f1fa;color:#2b2740}.lab-controls{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:#fff}.lab-controls>strong{font-size:15px}.lab-controls label{display:grid;gap:5px;color:#797285;font-size:9px}.lab-controls label span{padding:9px;border:1px solid #e3ddea;border-radius:8px;color:#352f45;font-size:10px}.lab-controls>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lab-controls button{margin-top:auto;padding:10px;border:0;border-radius:9px;background:#7042ef;color:#fff;font-size:9px;font-weight:800}.lab-paper{position:relative;min-height:370px;padding:20px;overflow:hidden;border-radius:7px;background:#fff;box-shadow:0 10px 25px #38264c17}.lab-paper header{display:flex;align-items:center;justify-content:space-between}.lab-paper header img{width:78px}.lab-paper header span{font-size:7px;color:#7042ef;font-weight:850;letter-spacing:.08em}.lab-paper h3{font-size:20px;margin:18px 0 2px}.lab-paper>small{font-size:8px;color:#81798e}.lab-paper ol{padding-left:20px;margin-top:20px}.lab-paper li{padding:6px 0;font-size:8px}.lab-paper li i{display:inline-block;width:42%;height:5px;margin-right:5px;border-bottom:1px solid #ded9e5}.lab-paper footer{position:absolute;left:20px;right:20px;bottom:17px;display:flex;justify-content:space-between;font-size:7px;color:#81798e}.lab-znamko{position:absolute;width:70px;height:95px;object-fit:contain;right:5px;bottom:25px;opacity:.9}@media(max-width:1050px){.parent-lab-feature{margin:-30px 24px 80px;padding:38px;gap:30px}}@media(max-width:760px){.parent-lab-feature{grid-template-columns:1fr;margin:-20px 16px 50px;padding:28px 22px}.lab-feature-copy h2{font-size:32px}.lab-builder-demo{grid-template-columns:1fr}.lab-paper{min-height:330px}}
/* Gentle hero motion: enough life without distracting from the message. */
.how-hero-art:before,.how-hero-art:after{content:'✦';position:absolute;z-index:1;color:#fff7a3;text-shadow:0 0 18px #fff6a785;pointer-events:none}.how-hero-art:before{font-size:38px;left:16%;top:17%;animation:howSparkle 3.8s ease-in-out infinite}.how-hero-art:after{content:'✧';font-size:50px;right:12%;bottom:16%;animation:howSparkle 4.6s ease-in-out 1.1s infinite}.how-hero-art>img{transform-origin:50% 100%;animation:howMascotBreath 5.5s ease-in-out infinite}.how-speech{animation:howSpeechFloat 4.3s ease-in-out infinite}.orbit-one{animation:howOrbitOne 4.8s ease-in-out infinite}.orbit-two{animation:howOrbitTwo 5.6s ease-in-out .7s infinite}.orbit-three{animation:howOrbitThree 5.1s ease-in-out 1.2s infinite}@keyframes howMascotBreath{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-7px) scale(1.012)}}@keyframes howSpeechFloat{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-9px) rotate(2.5deg)}}@keyframes howOrbitOne{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(8px,-10px) rotate(-4deg)}}@keyframes howOrbitTwo{0%,100%{transform:translate(0,0) rotate(5deg)}50%{transform:translate(-7px,9px) rotate(2deg)}}@keyframes howOrbitThree{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(7px,-8px) rotate(-1deg)}}@keyframes howSparkle{0%,100%{opacity:.35;transform:scale(.78) rotate(0)}50%{opacity:1;transform:scale(1.14) rotate(14deg)}}@media(prefers-reduced-motion:reduce){.how-hero-art:before,.how-hero-art:after,.how-hero-art>img,.how-speech,.how-orbit{animation:none!important}}
/* Designed top navigation and school-level switch. */
.school-switch{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #e8e1f2;border-radius:14px;background:#f7f4fc}.school-switch a{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;color:#6f687a;font-size:10px;font-weight:750;white-space:nowrap;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.school-switch a span{display:grid;place-items:center;min-width:25px;height:25px;padding:0 5px;border-radius:8px;background:#e9e2f5;color:#7042ef;font-size:8px;font-weight:900}.school-switch a:hover{transform:translateY(-1px);background:#fff}.school-switch a.active{background:#fff;color:#352d48;box-shadow:0 4px 13px #4e376016}.school-switch a.active span{background:#7042ef;color:#fff}.school-switch a.active.secondary span{background:#df5a9f}.how-header nav a{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:10px;transition:color .18s ease,background .18s ease,transform .18s ease}.how-header nav a i{display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#f0eaff;color:#7042ef;font-style:normal;font-size:10px}.how-header nav a:hover{transform:translateY(-1px);color:#5f35cf;background:#f7f3ff}.how-header nav a:hover i{background:#7042ef;color:#fff}.secondary-hero{background:linear-gradient(125deg,#3b2c73,#6a46c7 54%,#d8569d)}.secondary-notice{max-width:1050px;margin:55px auto;padding:21px 25px;display:grid;gap:5px;border:1px solid #e5dcf0;border-radius:17px;background:#fff8db}.secondary-notice b{font-size:14px}.secondary-notice span{font-size:12px;color:#756d79}@media(max-width:1250px){.how-header{gap:12px}.school-switch a{padding:7px}.how-header nav{gap:5px}.how-header nav a{font-size:11px}}@media(max-width:900px){.school-switch{margin-left:auto}.school-switch a{font-size:0}.school-switch a span{font-size:8px}.how-header>div:last-child .how-login{display:none}.secondary-notice{margin-left:24px;margin-right:24px}}@media(max-width:560px){.how-header{gap:8px}.how-header>a img{width:115px}.school-switch a{padding:4px}.school-switch a span{min-width:24px;height:24px}.how-header>div:last-child{display:none}.secondary-notice{margin:35px 16px}}

/* Full marketing navigation is also available on content subpages. */
.how-menu-toggle,.how-mobile-menu,.how-header>.how-mobile-menu[hidden]{display:none!important}
@media(max-width:900px){
  .how-header>.how-desktop-switch,.how-header>nav:not(.how-mobile-menu),.how-header>.how-desktop-actions{display:none!important}
  .how-menu-toggle{display:flex!important;width:46px;height:46px;margin-left:auto;padding:0;border:1px solid #e5ddf5;border-radius:14px;background:#f6f1ff;color:#7042ef;align-items:center;justify-content:center;flex-direction:column;gap:5px}
  .how-menu-toggle span{display:block;width:21px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .how-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .how-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .how-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .how-header>.how-mobile-menu:not([hidden]){position:fixed;left:0;right:0;top:70px;z-index:120;display:flex!important;max-height:calc(100dvh - 70px);overflow-y:auto;padding:12px 20px calc(20px + env(safe-area-inset-bottom));flex-direction:column;gap:0;background:#fff;border-top:1px solid #f0ecf8;border-bottom:1px solid #e7e0f2;box-shadow:0 24px 55px #25183f38}
  .how-mobile-menu>.school-switch{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:5px;margin:0 0 12px;padding:6px}
  .how-mobile-menu>.school-switch a{justify-content:center;font-size:12px;padding:10px}
  .how-mobile-menu>a{display:flex;align-items:center;min-height:54px;padding:13px 12px;border-bottom:1px solid #eee9f4;color:#302a40;font-size:15px;font-weight:750}
  .how-mobile-menu>a i{display:grid;place-items:center;width:28px;height:28px;margin-right:12px;border-radius:9px;background:#f0eaff;color:#7042ef;font-style:normal;font-size:12px}
  .how-mobile-actions{display:grid!important;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px;padding-top:16px}
  .how-mobile-actions .btn{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:58px;border-radius:14px;font-size:15px}
  .how-mobile-actions .btn-primary{color:#fff!important}
  .how-mobile-actions .btn-outline{color:#302a40!important}
  body.how-menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
  body.how-menu-open .how-header{position:fixed;left:0;right:0;top:0;width:100%}
}

/* Conversion path: one clear purchase action in the hero and at natural decision points. */
.how-actions .btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.how-actions .how-buy-cta{min-height:60px;padding:17px 27px;background:#fff17a;color:#3b2764;border:2px solid #fff17a;font-size:15px;font-weight:900;box-shadow:0 14px 32px #35205d42;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.how-actions .how-buy-cta:hover{background:#fff7a8;transform:translateY(-2px);box-shadow:0 18px 38px #35205d52}
.how-actions .btn-outline{min-height:54px;align-self:center;background:#ffffff0a}
.how-mid-cta{max-width:1200px;margin:0 auto 80px;padding:34px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;border:1px solid #e5dcf3;border-radius:28px;background:linear-gradient(120deg,#f0eaff,#fff 62%,#fff6ce);box-shadow:0 20px 55px #4d356f10}
.how-mid-cta-alt{background:linear-gradient(120deg,#fff3d4,#fff 60%,#eee8ff)}
.how-mid-cta span{display:block;margin-bottom:7px;color:#7042ef;font-size:10px;font-weight:900;letter-spacing:.1em}
.how-mid-cta h2{margin:0;font-size:30px;line-height:1.12;letter-spacing:-.04em}
.how-mid-cta p{margin:9px 0 0;color:#746d7f;font-size:13px;line-height:1.55}
.how-mid-cta .btn{min-height:56px;padding:16px 24px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:#7042ef;color:#fff;font-size:14px;font-weight:850;white-space:nowrap;box-shadow:0 12px 25px #5a36b92b;transition:transform .18s ease,box-shadow .18s ease}
.how-mid-cta .btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px #5a36b93b}
.how-sticky-cta{display:none}
.jz-hide-sticky-cta .how-sticky-cta{display:none!important}
@media(max-width:1050px){.how-mid-cta{margin-left:24px;margin-right:24px}}
@media(max-width:760px){
  .how-page{padding-bottom:82px}
  .how-actions{align-items:stretch}
  .how-actions .how-buy-cta{width:100%;min-height:60px;font-size:14px;text-align:center}
  .how-actions .btn-outline{width:100%;min-height:48px;text-align:center}
  .how-mid-cta{grid-template-columns:1fr;margin:0 16px 50px;padding:27px 23px;gap:22px;border-radius:23px}
  .how-mid-cta h2{font-size:27px}
  .how-mid-cta .btn{width:100%;white-space:normal;text-align:center}
  .how-sticky-cta{position:fixed;left:10px;right:10px;bottom:10px;z-index:28;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 15px;border:1px solid #e3d9f1;border-radius:18px;background:#fff;box-shadow:0 12px 40px #28183f3d}
  .how-sticky-cta span{display:grid;gap:1px;min-width:0}
  .how-sticky-cta b{font-size:12px;color:#332943;white-space:nowrap}
  .how-sticky-cta small{font-size:10px;color:#746c7e;white-space:nowrap}
  .how-sticky-cta a{padding:13px 16px;border-radius:12px;background:#7042ef;color:#fff;font-size:12px;font-weight:850;white-space:nowrap}
}
/* 2026-10-23 hiw conversion update */
.how-hero{position:relative;isolation:isolate}
.how-hero>*:not(.how-hero-media){position:relative;z-index:1}
.how-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:url(assets/hero/how-hero-poster.webp?v=20261023-hiw-1) center 47%/cover no-repeat}
.how-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(108deg,rgba(91,48,205,.88) 0%,rgba(111,56,218,.82) 39%,rgba(150,62,208,.7) 70%,rgba(216,72,151,.64) 100%)}
.how-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%;opacity:0;transition:opacity .6s}
.how-hero-video.is-on{opacity:1}
@media(max-width:767px),(prefers-reduced-motion:reduce){.how-hero-video{display:none}}
.how-price{display:grid;gap:2px;margin:24px 0 0}.how-price b{font-size:22px;letter-spacing:-.02em}.how-price small{font-size:14px;font-weight:700;color:#f3edff}
.how-page .how-buy-btn,.how-actions .how-buy-btn{min-height:56px;padding:9px 22px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;border-radius:15px;background:#7042ef;color:#fff;line-height:1.2;text-align:center;white-space:normal;box-shadow:0 12px 25px #5a36b92b}
.how-buy-btn .buy-main{font-size:15px;font-weight:850}.how-buy-btn .buy-sub{font-size:12px;font-weight:650;opacity:.9}
.how-buy-btn:hover{background:#5f30e0;color:#fff}
.how-hero .how-buy-btn{box-shadow:0 0 0 2px #fff,0 14px 30px #2b145c55}
.how-demo-open{min-height:56px;cursor:pointer}
.how-trust{display:flex;gap:16px;flex-wrap:wrap;list-style:none;margin:0 0 22px;padding:0;font-size:13px;font-weight:750}.how-trust li:before{content:"✓ ";font-weight:900}
.how-final .how-trust{grid-column:1/-1;justify-content:flex-end;margin:0;color:#5b4f6b}
.portal-shot{margin:0;padding:0;min-height:0;overflow:hidden;background:#fff}.portal-shot img{display:block;width:100%;height:auto}.portal-shot figcaption{padding:8px 14px;font-size:11px;color:#7a7186}
.how-faq{max-width:1000px;margin:0 auto 70px;padding:0 24px}.how-faq h2{font-size:30px;letter-spacing:-.04em;margin:0 0 18px}
.how-faq details{border:1px solid #e5dcf3;border-radius:16px;background:#fff;margin-bottom:10px;padding:0 20px}.how-faq summary{cursor:pointer;padding:16px 0;font-weight:800;font-size:15px}.how-faq p{margin:0 0 16px;color:#5f5870;font-size:14px;line-height:1.6}
.how-demo{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:#120a26cc}.how-demo[hidden]{display:none}
.how-demo-card{position:relative;display:grid;gap:12px;width:min(420px,100%);max-height:100%;padding:14px;border-radius:22px;background:#fff}
.how-demo-video{display:block;width:100%;height:auto;max-height:calc(100vh - 150px);aspect-ratio:9/16;object-fit:contain;border-radius:14px;background:#000}
.how-demo-close{position:absolute;z-index:2;top:20px;right:20px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#24223e;font-size:26px;cursor:pointer;box-shadow:0 4px 14px #0004}
.how-demo-card .how-buy-btn{width:100%}
html.how-demo-lock{overflow:hidden}
@media(max-width:760px){
.how-buy-btn,.how-actions .how-buy-btn,.how-demo-open{width:100%}
.how-demo{padding:0;background:#000}.how-demo-card{width:100%;height:100%;border-radius:0;padding:0 0 12px;grid-template-rows:1fr auto;background:#000}.how-demo-video{max-height:none;height:100%;border-radius:0}.how-demo-card .how-buy-btn{width:calc(100% - 24px);margin:0 12px}
.how-sticky-cta{padding:8px}.how-sticky-cta .how-buy-btn{width:100%;min-height:52px;padding:6px 12px}
.how-final .how-trust{justify-content:center}
.how-faq{padding:0 16px;margin-bottom:44px}.how-faq h2{font-size:25px}
}
/* mobile condensing (390px target: ≤6 screens) */
@media(max-width:760px){
.how-hero-art,.how-origin,.dual-intro,.parent-portal,.parent-lab-feature,.habit-section,.jz-cro--how,.jz-origin,.how-page .seo-hub,.start-steps article p,.start-head p,.child-portal .portal-copy ul small,.child-portal .portal-copy>p,.how-mid-cta p{display:none!important}
.how-hero{min-height:0}
.how-hero-copy{padding-bottom:28px}
}
.how-page .how-buy-btn .buy-main,.how-page .how-buy-btn .buy-sub{display:block;margin:0;color:#fff;letter-spacing:0;text-transform:none}
.how-page .how-buy-btn .buy-main{font-size:15px;font-weight:850}
.how-page .how-buy-btn .buy-sub{font-size:12px;font-weight:650;opacity:.9}
.how-page .portal-shot{transform:none}
.how-page .portal-shot>img{position:static!important;display:block;width:100%!important;height:auto!important;max-width:none;transform:none;filter:none;inset:auto;margin:0}
/* 2026-10-23 hiw2: homepage orange buy buttons, colourful proof row, explainer modal */
.how-page .how-buy-btn,.how-page .how-actions .how-buy-btn,.how-page .how-sticky-cta .how-buy-btn{background:linear-gradient(120deg,#C84A0C,#B93A07)!important;color:#fff!important;border-color:transparent!important;font-weight:800;box-shadow:0 10px 24px #b93a0740!important;min-height:56px;position:relative;overflow:hidden;isolation:isolate}
.how-page .how-buy-btn:hover{background:#A8360A!important;color:#fff!important}
.how-page .how-buy-btn:focus-visible{outline:3px solid #7c2d12!important;outline-offset:3px}
.how-page .how-buy-btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);pointer-events:none;z-index:-1;animation:howShine 4s ease-in-out 1.5s infinite}
@keyframes howShine{0%{left:-60%}35%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.how-page .how-buy-btn::before{animation:none;display:none}}
.how-proof b{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;border:1px solid transparent}
.how-proof b i{font-style:normal;font-size:11px}
.how-proof .p1{background:#fff6c9;color:#5b3b00;border-color:#ffe27a}.how-proof .p1 i{color:#d99a00}
.how-proof .p2{background:#ece6ff;color:#4a2aa8;border-color:#d5c8ff}.how-proof .p2 i{color:#7042ef}
.how-proof .p3{background:#ffe4f1;color:#8a1f55;border-color:#ffc2de}.how-proof .p3 i{color:#e054a3}
.how-demo[data-format="16x9"] .how-demo-card{width:min(960px,100%)}
.how-demo[data-format="16x9"] .how-demo-video{aspect-ratio:16/9;max-height:calc(100vh - 150px)}
@media(max-width:760px){.how-demo .how-demo-video{aspect-ratio:auto}}

/* step badge contrast: white bold number on every square (AA large text) */
.start-grid article>i{color:#fff!important;font-weight:900;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.start-grid article:nth-child(2)>i{background:#1f8a68}
.start-grid article:nth-child(3)>i{background:#b26a00}