.hero{grid-template-columns:1fr 1.08fr;gap:50px;align-items:center;padding-top:55px;padding-bottom:60px}.hero h1{font-size:53px}.hero-copy>p{font-size:14px;line-height:2}.hero-demo{min-width:0}.demo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:11px;color:#657a59}.demo-badge{padding:6px 10px;background:#e9eddf;border-radius:20px;font-size:10px}.compare{--split:50%;position:relative;overflow:hidden;isolation:isolate;background:#fffefa;border-radius:12px;border:1px solid #dfe4d5;touch-action:pan-y}.hero-compare{aspect-ratio:1/1;box-shadow:0 16px 35px #43573e0b;border-radius:15px}.compare-layer{position:absolute;inset:0;overflow:hidden;background:#fffefa}.compare-layer.before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:2}.compare-layer img{width:100%;height:100%;object-fit:contain;display:block}.compare-tag{position:absolute;top:13px;background:#fffef5e8;padding:5px 10px;border-radius:5px;font-size:10px;color:#526348;z-index:3;pointer-events:none}.tag-left{left:13px}.tag-right{right:13px}.compare-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 4px #0003;z-index:4;pointer-events:none;transform:translateX(-50%)}.compare-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:43px;height:43px;border:3px solid #fff;border-radius:50%;background:#345b42;color:white;display:grid;place-items:center;font-size:24px;letter-spacing:2px;box-shadow:0 2px 10px #0002}.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:5;cursor:ew-resize;touch-action:pan-y}.compare:focus-within{outline:3px solid #d3ac65;outline-offset:4px}.sprite{position:absolute;inset:0;background-image:url('/assets/cat-comparison.png');background-size:200% 100%;background-repeat:no-repeat}.sprite-photo{background-position:left center}.sprite-line{background-position:right center}.demo-caption{margin:15px 0;text-align:center;font-size:11px;color:#607954}.demo-caption small{display:block;font-size:9px;color:#98a18d;margin-top:7px}.journey-mini{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;padding-top:8px;color:#65785b}.journey-mini b{color:#b09a60;margin-right:4px}.journey-mini i{font-style:normal;color:#bbc4ad}.discovery{padding-top:70px;padding-bottom:55px}.discovery-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:65px;align-items:center;background:#f0f1e7;border-radius:17px;padding:34px}.sample-display{text-align:center}.demo-scenes{display:flex;justify-content:center;gap:8px;margin-bottom:17px}.demo-scenes button{font-size:11px;background:transparent;border:1px solid #d8dfcc;border-radius:30px;padding:7px 15px}.demo-scenes button.active{background:#fffefa;color:#3c633f;border-color:#a8b49a}.tool-compare{aspect-ratio:1.12/1;border-color:#e1e2d6;background:white}.tool-compare .compare-layer{padding:20px 40px}.tool-compare svg{display:block}.sample-display>small{display:block;font-size:9px;color:#919b83;margin-top:15px}.medium-tabs{display:flex;gap:7px;margin-bottom:26px}.medium-tabs button,.finish-tools button{border:1px solid #d3dcc5;background:transparent;border-radius:7px;padding:11px 16px;font-size:12px}.medium-tabs button.active,.finish-tools button.active{border-color:#315d47;background:#315d47;color:white}.medium-panel h3{white-space:pre-line;font-size:29px;line-height:1.5;letter-spacing:-1px;margin:15px 0}.medium-panel>p{font-size:12px;line-height:1.95;max-width:330px}.medium-values{display:flex;gap:10px;margin:18px 0}.medium-values>div{text-align:center}.medium-values span{display:block;width:39px;height:26px;border-radius:4px}.medium-values small{font-size:9px;color:#8c987e}.mini-lesson{border-top:1px solid #d5deca;padding-top:16px;margin-top:20px}.mini-lesson>span{display:block;font-size:9px;color:#9aa78b;letter-spacing:1px}.mini-lesson strong{display:block;font-size:12px;font-weight:600;margin-top:7px}.mini-lesson p{font-size:11px;line-height:1.8;margin:8px 0 17px}.medium-panel .primary{font-size:12px;padding:13px 18px}.medium-panel .no-wait{font-size:9px;color:#96a088;margin-top:12px}.why-learn{display:grid;grid-template-columns:.8fr 1.6fr;gap:40px;padding-top:10px;padding-bottom:55px}.why-learn h2{font-size:27px}.teaching-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.teaching-promises>div{border-top:1px solid #dbe1d1;padding-top:14px}.teaching-promises b{font-size:12px;color:#b1aa83;font-weight:500}.teaching-promises h3{font-size:13px;line-height:1.7;margin-top:13px}.teaching-promises p{font-size:11px;color:#929b88;line-height:1.9}.output-compare{aspect-ratio:2/3;max-height:440px;width:auto;max-width:100%;margin:24px auto;min-width:250px}.finish-preview{border:1px solid #dce2d1;border-radius:15px;background:#f1f3e9;padding:30px;margin-top:35px}.finish-preview h3{font-size:24px;margin:12px 0}.finish-preview p{font-size:12px}.finish-tools{display:flex;gap:8px;margin:20px 0}.finish-preview>.primary{font-size:12px}.finish-preview>small{display:block;font-size:10px;color:#8d9b80;margin-top:17px}.finish-preview .output-compare{max-height:500px;width:333px;min-width:0;margin:22px 0}.finish-download{display:inline-block;padding:10px 16px;font-size:11px}.finish-status{color:#ad7950;font-size:11px}@media(max-width:950px){.hero{gap:25px}.hero h1{font-size:42px}.hero-compare{aspect-ratio:.9/1}.discovery-grid{gap:30px;padding:25px}.medium-tabs button{font-size:10px;padding:9px 11px}.medium-panel h3{font-size:26px}.why-learn{grid-template-columns:1fr;gap:20px}.teaching-promises{gap:25px}}@media(max-width:650px){.hero{grid-template-columns:1fr;gap:30px;padding-top:35px}.hero h1{font-size:42px}.hero-demo{margin-top:0}.hero-compare{aspect-ratio:1/1}.journey-mini{font-size:9px}.discovery{padding-top:40px}.discovery-grid{grid-template-columns:1fr;gap:30px;padding:20px}.medium-panel h3{font-size:28px}.medium-tabs{gap:10px;margin-bottom:23px}.medium-tabs button{flex:1;font-size:12px;padding:10px}.tool-compare .compare-layer{padding:15px 25px}.teaching-promises{grid-template-columns:1fr;gap:15px}.teaching-promises>div{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;padding-top:15px}.teaching-promises h3{margin:0}.teaching-promises p{grid-column:2;margin:0}.why-learn{padding-top:0;padding-bottom:15px}.finish-preview{padding:20px}.finish-preview .output-compare{max-width:100%;width:100%;max-height:440px}.output-compare{min-width:200px}.demo-top{font-size:10px}.finish-preview h3{font-size:22px}}@media print{.compare{display:none}.canvas-wrap[hidden]{display:flex!important}.finish-preview{display:none!important}.print-lesson .canvas-wrap{display:none!important}}
