.stepper{--phone-w:min(42vw, 210px);--tablet-w:100%;--pad:10px;--switch-h:40px;--stage-top:20px;--stage-h:calc(var(--phone-w) * 2.2445 + var(--pad) * 2)}.stepper-lead{margin-bottom:32px}.stepper-tabs{flex-wrap:wrap;gap:0 22px;display:flex}.stepper-tabs button{-webkit-appearance:none;appearance:none;min-height:44px;color:var(--body);cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;padding:0;font-size:16px;font-weight:600}.stepper-tabs button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.stepper-switch{height:var(--switch-h);background:var(--soft);border-radius:999px;align-items:center;padding:3px;display:inline-flex}.stepper-switch button{-webkit-appearance:none;appearance:none;height:100%;color:var(--body);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 18px;font-size:14px;font-weight:600}.stepper-switch button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line)}.case-screens{padding:var(--pad);background:var(--soft);border-radius:28px;align-items:center;gap:22px;display:flex;overflow-x:auto}.case-screens figure{flex:none;width:150px}.case-screens figure[data-device=tablet]{width:330px}.case-screens .media{box-shadow:0 0 0 5px var(--ink);border-radius:18px}.case-screens figure[data-device=tablet] .media{border-radius:10px}.stepper article+article{margin-top:72px}.case-text{margin-top:28px}.case-name{letter-spacing:-.02em;font-size:clamp(21px,2.2vw,26px);font-weight:800;line-height:1.3}.stepper ol[data-steps]{border-top:1px solid var(--line);counter-reset:step;margin-top:14px;padding:0;list-style:none}.stepper li[data-step]{border-bottom:1px solid var(--line);counter-increment:step;padding-left:38px;position:relative}.stepper li[data-step]:before{content:counter(step);text-align:right;font-variant-numeric:tabular-nums;width:24px;color:var(--body);font-size:14px;font-weight:600;line-height:25px;position:absolute;top:14px;left:0}.step-cell{padding:14px}.step-title{letter-spacing:-.01em;text-wrap:balance;font-size:17px;font-weight:600;line-height:25px}.step-title button{-webkit-appearance:none;appearance:none;width:100%;font-weight:inherit;letter-spacing:inherit;text-align:left;background:0 0;border:0;padding:0;display:block}.step-text{max-width:34em;color:var(--body);margin-top:4px;font-size:15px}.stepper-note{color:var(--body);flex-direction:column;align-items:center;margin-top:10px;font-size:13px;line-height:20px;display:flex}.stepper-frame-label{min-height:20px;color:var(--ink);font-weight:700}html:not(.js) .stepper-frame-label{display:none}.step-nav{justify-content:center;align-items:center;gap:20px;margin-top:14px;display:flex}.step-nav button{-webkit-appearance:none;appearance:none;border:1px solid var(--line);width:44px;height:44px;color:var(--body);cursor:pointer;background:0 0;border-radius:999px;padding:0;font-size:22px;line-height:1}.step-count{font-variant-numeric:tabular-nums;color:var(--body);font-size:15px;font-weight:600}@media (min-width:720px){.step-nav{display:none}}.stepper-controls{margin-top:18px}.stepper-controls button{-webkit-appearance:none;appearance:none;border:1px solid var(--line);min-height:40px;color:var(--body);cursor:pointer;background:0 0;border-radius:999px;padding:0 16px;font-size:14px;font-weight:600}.stepper-cta{margin-top:28px}html:not(.js) .stepper-tabs,html:not(.js) .stepper-switch,html:not(.js) .step-nav,html:not(.js) .stepper-controls{display:none}html.js .stepper{grid-template-columns:calc(var(--phone-w) + var(--pad) * 2) minmax(0, 1fr);grid-template-areas:"lead lead""tabs tabs""stage text""controls controls""cta cta";column-gap:14px;display:grid}html.js .stepper-lead{grid-area:lead}html.js .stepper-tabs{grid-area:tabs}html.js .stepper-controls{grid-area:controls}html.js .stepper-cta{grid-area:cta}html.js .stepper-switch{margin-top:var(--stage-top);grid-area:stage;place-self:start center}html.js .stepper .case-screens{height:var(--stage-h);margin-top:calc(var(--stage-top) + var(--switch-h) + 12px);grid-area:stage;align-self:start;place-items:center;display:grid;overflow:visible}html.js .stepper-note{margin-top:calc(var(--stage-top) + var(--switch-h) + 12px + var(--stage-h) + 10px);text-align:center;grid-area:stage;align-self:start}html.js .stepper .case-text{margin-top:var(--stage-top);grid-area:text}html.js .stepper article[data-case]{display:none}html.js .stepper[data-ready] article[data-case][data-active],html.js[data-start-case=elementary_school] .stepper:not([data-ready]) article[data-case=elementary_school],html.js[data-start-case=middle_school] .stepper:not([data-ready]) article[data-case=middle_school],html.js[data-start-case=high_school] .stepper:not([data-ready]) article[data-case=high_school],html.js[data-start-case=university] .stepper:not([data-ready]) article[data-case=university],html.js[data-start-case=after_school] .stepper:not([data-ready]) article[data-case=after_school],html.js[data-start-case=lessons] .stepper:not([data-ready]) article[data-case=lessons],html.js:not([data-start-case]) .stepper:not([data-ready]) article[data-case]:first-of-type{display:contents}html.js[data-start-case=elementary_school] .stepper:not([data-ready]) .stepper-tabs button[data-case=elementary_school],html.js[data-start-case=middle_school] .stepper:not([data-ready]) .stepper-tabs button[data-case=middle_school],html.js[data-start-case=high_school] .stepper:not([data-ready]) .stepper-tabs button[data-case=high_school],html.js[data-start-case=university] .stepper:not([data-ready]) .stepper-tabs button[data-case=university],html.js[data-start-case=after_school] .stepper:not([data-ready]) .stepper-tabs button[data-case=after_school],html.js[data-start-case=lessons] .stepper:not([data-ready]) .stepper-tabs button[data-case=lessons]{color:var(--ink);border-bottom-color:var(--ink)}html.js .stepper figure[data-media]{width:var(--phone-w);grid-area:1/1;display:none}html.js .stepper figure[data-media][data-device=tablet]{width:min(100%, var(--tablet-w))}html.js .stepper figure[data-media][data-active]{display:block}html.js .stepper .case-screens .media{box-shadow:0 0 0 7px var(--ink);border-radius:26px}html.js .stepper .case-screens figure[data-device=tablet] .media{border-radius:14px}html.js .stepper li[data-step],html.js .stepper .step-title button{cursor:pointer}html.js .stepper li[data-step]:not([data-active]) .step-text{display:none}html.js .stepper li[data-step][data-active]:before{color:var(--brand);top:20px}html.js .stepper li[data-step][data-active] .step-cell{background:var(--brand-tint);border-radius:12px;margin:6px 0;position:relative;overflow:hidden}html.js .stepper li[data-step][data-active] .step-cell:after{content:"";width:3px;height:calc(var(--p,0) * 100%);background:var(--now);position:absolute;top:0;left:0}html.js .stepper li[data-step][data-active] .step-text{color:var(--ink)}@media (min-width:720px) and (max-width:959.98px){.stepper{--phone-w:300px;--pad:0px}html.js .stepper:not([data-device=tablet]){--stage-h:480px;--screen-r:22px}html.js .stepper:not([data-device=tablet]) .case-screens{place-items:center;padding:0;overflow:visible}html.js .stepper:not([data-device=tablet]) figure[data-media]{width:min(100%, calc(var(--stage-h) / (2.2445 * var(--show))));height:var(--stage-h)}html.js .stepper:not([data-device=tablet]) .media{height:100%;box-shadow:none;border-radius:0}html.js .stepper:not([data-device=tablet]) figure[data-cut=bottom] .media{border-radius:var(--screen-r) var(--screen-r) 0 0;-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),#0000);mask-image:linear-gradient(#000 calc(100% - 48px),#0000)}html.js .stepper:not([data-device=tablet]) figure[data-cut=both] .media{-webkit-mask-image:linear-gradient(#0000,#000 30px calc(100% - 30px),#0000);mask-image:linear-gradient(#0000,#000 30px calc(100% - 30px),#0000)}html.js .stepper:not([data-device=tablet]) figure[data-cut=top] .media{border-radius:0 0 var(--screen-r) var(--screen-r);-webkit-mask-image:linear-gradient(#0000,#000 48px);mask-image:linear-gradient(#0000,#000 48px)}html.js .stepper:not([data-device=tablet]) figure[data-focus=whole] .media{border-radius:var(--screen-r);box-shadow:0 0 0 6px var(--ink)}html.js .stepper:not([data-device=tablet]) figure[data-media] .media :is(img,video){object-position:center var(--focus-y)}}@media (max-width:959.98px){html.js .stepper .case-screens{background:0 0;border-radius:0}html.js .stepper li[data-step]{padding-left:24px}html.js .stepper li[data-step]:before{width:16px;font-size:13px}html.js .stepper .step-cell{padding:11px 10px}html.js .stepper .step-title{font-size:15px;line-height:22px}html.js .stepper li[data-step]:before{line-height:22px;top:11px}html.js .stepper li[data-step][data-active]:before{top:17px}html.js .stepper .step-text{font-size:13.5px;line-height:1.5}html.js .stepper[data-device=tablet]{--stage-h:calc((100vw - var(--gutter) * 2 - var(--pad) * 2) * .625 + var(--pad) * 2);grid-template-columns:minmax(0,1fr);grid-template-areas:"lead""tabs""stage""text""controls""cta"}html.js .stepper[data-device=tablet] .case-text{margin-top:20px}}@media (max-width:719.98px){html.js .stepper{--stage-top:12px;flex-direction:column;display:flex}html.js .stepper:not([data-device=tablet]){--phone-w:100%;--screen-r:24px;--stage-h:calc((100vw - var(--gutter) * 2) * 2.2445 * .7)}html.js .stepper:not([data-device=tablet]) .case-screens{place-items:center;padding:0;overflow:visible}html.js .stepper:not([data-device=tablet]) figure[data-media]{width:min(100%, calc(var(--stage-h) / (2.2445 * var(--show))));height:var(--stage-h)}html.js .stepper:not([data-device=tablet]) .media{height:100%;box-shadow:none;border-radius:0}html.js .stepper:not([data-device=tablet]) figure[data-cut=bottom] .media{border-radius:var(--screen-r) var(--screen-r) 0 0;-webkit-mask-image:linear-gradient(#000 calc(100% - 48px),#0000);mask-image:linear-gradient(#000 calc(100% - 48px),#0000)}html.js .stepper:not([data-device=tablet]) figure[data-cut=both] .media{-webkit-mask-image:linear-gradient(#0000,#000 30px calc(100% - 30px),#0000);mask-image:linear-gradient(#0000,#000 30px calc(100% - 30px),#0000)}html.js .stepper:not([data-device=tablet]) figure[data-cut=top] .media{border-radius:0 0 var(--screen-r) var(--screen-r);-webkit-mask-image:linear-gradient(#0000,#000 48px);mask-image:linear-gradient(#0000,#000 48px)}html.js .stepper:not([data-device=tablet]) figure[data-focus=whole] .media{border-radius:var(--screen-r);box-shadow:0 0 0 6px var(--ink)}html.js .stepper:not([data-device=tablet]) figure[data-media] .media :is(img,video){object-position:center var(--focus-y)}html.js .stepper .stepper-lead{order:1}html.js .stepper .stepper-tabs{order:2}html.js .stepper .stepper-switch{order:7;width:max-content;margin:16px auto 0;display:flex}html.js .stepper .case-screens{margin-top:var(--stage-top);order:4;align-self:stretch}html.js .stepper .case-text{order:5;margin-top:12px}html.js .stepper .step-nav{order:6;margin-top:10px}html.js .stepper .stepper-note{order:8;align-self:stretch;margin-top:10px}html.js .stepper .stepper-controls{text-align:center;order:9;margin-top:12px}html.js .stepper .stepper-cta{order:10}html.js .stepper li[data-step]:not([data-active]){display:none}html.js .stepper .case-name{font-size:18px}html.js .stepper ol[data-steps]{border-top:0;margin-top:8px}html.js .stepper li[data-step]{border-bottom:0;padding-left:0}html.js .stepper li[data-step]:before{display:none}html.js .stepper li[data-step][data-active] .step-cell{margin:0}html.js .stepper .step-text{max-width:none}}@media (min-width:960px){.stepper{--phone-w:280px;--tablet-w:472px;--pad:24px;--stage-top:0px}html.js .stepper{grid-template:"stage lead""stage tabs""stage text""stage controls""stage cta"1fr/minmax(0,520px) minmax(0,1fr);column-gap:clamp(40px,6vw,96px)}html.js .stepper .case-text{margin-top:28px}}.media-zoom{display:none}html.js .stepper figure[data-media]{position:relative}html.js .stepper[data-zoom-ready] .media-zoom{z-index:2;background:var(--ink);min-height:32px;color:var(--paper);font:inherit;cursor:zoom-in;border:0;border-radius:999px;align-items:center;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex;position:absolute;bottom:12px;right:12px}@media (max-width:959.98px){html.js .stepper:not([data-device=tablet])[data-zoom-ready] .media-zoom{top:10px;bottom:auto;right:10px}}.zoom:not([open]){display:none}.zoom{background:var(--ink);width:100%;max-width:none;height:100%;max-height:none;color:var(--paper);border:0;margin:0;padding:0;position:fixed;top:0;bottom:0;left:0;right:0}.zoom[open]{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr);display:grid}.zoom::backdrop{background:var(--ink)}.zoom-bar{justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.zoom-title{overflow-wrap:anywhere;margin:0;font-weight:600}.zoom-bar button{border:1px solid var(--paper);min-height:36px;color:var(--paper);font:inherit;cursor:pointer;background:0 0;border-radius:999px;flex:none;padding:0 16px;font-weight:600}.zoom-body{overscroll-behavior:contain;padding:0 16px 16px;display:flex;overflow:auto}.zoom-body img{max-width:none;height:auto;width:max(var(--zoom-min), min(100%, (100vh - 76px) * var(--zoom-ratio)));flex:none;margin:auto}.zoom[data-device=tablet]{--zoom-min:1024px;--zoom-ratio:1.6}.zoom[data-device=phone]{--zoom-min:min(100%, 540px);--zoom-ratio:.4455}.zoom :focus-visible{outline-color:var(--paper)}.media[data-astro-cid-ptvei53w]{background:var(--soft);width:100%;position:relative;overflow:hidden}.media[data-astro-cid-ptvei53w] img[data-astro-cid-ptvei53w]{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.media[data-astro-cid-ptvei53w] img[data-astro-cid-ptvei53w][data-on]{opacity:1}.media[data-astro-cid-ptvei53w] img[data-astro-cid-ptvei53w],.media[data-astro-cid-ptvei53w] video[data-astro-cid-ptvei53w]{transition:opacity .2s}.media[data-astro-cid-ptvei53w] video[data-astro-cid-ptvei53w]{object-fit:cover;opacity:0;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.media[data-astro-cid-ptvei53w] video[data-astro-cid-ptvei53w][data-playing]{opacity:1}.media-note[data-astro-cid-ptvei53w]{background:var(--ink);color:var(--paper);white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px;position:absolute;bottom:8%;left:50%;transform:translate(-50%)}