@font-face{font-family:"Host Grotesk";src:url('/assets/fonts/HostGrotesk-latin.woff2') format('woff2');font-style:normal;font-weight:300 800;font-display:swap}
:root{--paper:#f5f4f0;--white:#fffefa;--ink:#1f3a33;--text:#303b35;--muted:#66716b;--green:#2e5a4c;--sage:#e4ebe4;--line:#dce0d8;--yellow:#f2c14e;--token-99edf686-c53d-4a5e-b8c3-b3d42b3b42fd:var(--paper);--token-5444e3f4-9fb4-490e-a54e-6c3359c5ae56:var(--ink);--token-64b23c4d-147b-4be8-a4fc-3a48bd96a76a:var(--muted);--token-b4ca2c46-a064-4b89-bae9-7bbbf96d9f20:var(--green);--token-01a83edb-f6e1-4e72-9f06-233aac894ba3:var(--ink);--token-64a170ca-04de-4c23-8bb0-4c88a2ea7b1e:var(--line);font-family:"Host Grotesk",Arial,sans-serif;color:var(--text);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:108px}body{margin:0;background:var(--paper);font-family:"Host Grotesk",Arial,sans-serif;font-size:17px;line-height:1.55;color:var(--text)}
body,button,a,input,summary{font-family:"Host Grotesk",Arial,sans-serif}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit;text-decoration:none}button,summary{cursor:pointer}img{display:block;max-width:100%}svg{display:block;flex-shrink:0}h1,h2,h3,p,figure{margin:0}
h1,h2,h3{color:var(--ink);font-weight:500;text-wrap:balance}h1{font-size:clamp(64px,6.5vw,96px);line-height:1.01;letter-spacing:-.059em}h2{font-size:clamp(36px,3.35vw,50px);line-height:1.12;letter-spacing:-.041em}h3{font-size:25px;line-height:1.24;letter-spacing:-.028em}
::selection{background:#dbe7c8;color:var(--ink)}:focus-visible{outline:3px solid #739481;outline-offset:5px;border-radius:4px}[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:12px;padding:12px 20px;background:var(--ink);color:white;border-radius:6px;z-index:1000;transform:translateY(-160%)}.skip-link:focus{transform:none}
.chalk-page{display:block;width:100%;min-height:100vh;overflow:clip;background:var(--paper)}.chalk-content{display:block;width:100%;min-height:0}.section-width{width:min(1200px,calc(100% - 96px));margin-inline:auto;max-width:none}.text-soft{color:#718779}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--green)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:48px;padding:13px 21px;border:1px solid transparent;border-radius:7px;font-size:15px;line-height:1.35;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s}.button svg{width:19px;height:19px;transition:transform .2s}.button:hover svg{transform:translateX(3px)}
.button--primary{color:#fff;background:var(--green);box-shadow:0 2px 2px #203a3310,inset 0 1px 0 #ffffff15}.button--primary:hover{background:#214637;box-shadow:0 4px 12px #203a331c;transform:translateY(-1px)}.button--secondary{background:#fffefc;color:var(--ink);border-color:#dce1d8;box-shadow:0 2px 2px #203a3306}.button--secondary:hover{background:#fff;border-color:#aabcb0}.button--text{padding:0;min-height:42px;justify-content:flex-start;gap:12px;border:0;border-radius:0;color:var(--green);background:transparent;box-shadow:none}
.brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--ink);width:max-content;white-space:nowrap}.brand img{width:37px;height:37px}.brand>span{font-size:27px;line-height:1;letter-spacing:-1.2px;font-weight:400}.brand b{font-weight:750}
.announcement{min-height:39px;background:#e3e9df;border-bottom:1px solid #d9e0d4;display:flex;align-items:center;justify-content:center;gap:25px;padding:8px 24px;color:var(--green);font-size:12px;line-height:1.6}.announcement>span,.announcement a{display:flex;align-items:center;gap:9px}.announcement a{font-weight:600;gap:6px}.announcement svg{width:14px;height:14px}.announce-dot{width:6px;height:6px;border-radius:100%;background:#688061}.announcement .announce-description{margin-left:-7px}
.site-header{position:sticky;top:0;z-index:50;width:100%;background:#f5f4f0ee;backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .2s}.site-header.is-scrolled{border-color:#dce0d8aa}
.site-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;max-width:1512px;height:86px;padding:0 44px;margin:auto;background:transparent;border-radius:0;overflow:visible}.site-nav>.framer-1j05p92{display:flex;align-items:center;width:auto;flex:none;padding:0}.site-nav>.framer-9l88wu{display:flex;position:static;align-items:center;justify-content:center;gap:30px;flex:1;width:auto;height:auto;background:transparent;padding:0;overflow:visible}.site-nav>.framer-9l88wu>a{font-size:14px;color:#5e685f;transition:color .2s}.site-nav>.framer-9l88wu>a:hover{color:var(--ink)}.site-nav>.framer-hvx0up{display:flex;flex:none;width:auto;padding:0}.site-nav .button{min-height:43px;padding:11px 17px;font-size:13px;gap:21px}.mobile-menu{display:none}
.hero{position:relative;display:block;padding:65px 0 0;width:100%;height:auto;overflow:visible}.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:58px;width:100%;max-width:none;padding:0}.hero .framer-1l7ejz7{display:flex;align-items:center;justify-content:center;width:100%;padding:0 24px;height:auto;overflow:visible}.hero .framer-neebsg{display:flex;align-items:center;flex-direction:column;gap:0;width:100%;max-width:1060px;opacity:1;transform:none}.hero .framer-163udps-container{width:auto;height:auto;margin:0 0 26px}
.product-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 10px 7px 9px;background:#ffffffd9;border:1px solid #dfe3d9;border-radius:30px;box-shadow:0 3px 9px #1e392707;font-size:12px;color:#547160;line-height:1.4}.product-pill>b{font-weight:600}.product-pill>svg{width:17px;height:17px;margin-left:5px}.product-pill>img{width:18px;height:18px}
.hero .framer-1vo474e{width:100%;height:auto;flex:none;text-align:center;overflow:visible}.hero h1 span{color:#647e67}.hero .framer-1bc6hz6{width:100%;max-width:590px;margin:24px 0 0;text-align:center;height:auto;flex:none}.hero .framer-1bc6hz6 p{font-size:19px;line-height:1.5;letter-spacing:-.018em;color:var(--muted);text-wrap:pretty}.hero .framer-1jrormh{display:flex;flex-direction:row;gap:12px;margin:27px 0 0;padding:0;width:auto;height:auto}.hero-note{display:flex;align-items:center;gap:7px;font-size:12px;color:#788077;margin-top:16px;line-height:1.5}.small-check{color:#67856a;font-size:13px}
.hero-screen{display:block;position:relative;width:min(1320px,calc(100% - 72px));max-width:none;height:auto;padding:9px;border-radius:20px;background:#e0e7dc;box-shadow:0 1px 0 #ffffff inset,0 22px 50px -35px #17332250;overflow:visible;margin:0 auto}.hero-screen::before{content:"";position:absolute;inset:-16px 32px 50%;border:1px solid #d4decf;border-bottom:0;border-radius:24px 24px 0 0;z-index:-1}.hero-screen::after{content:"";position:absolute;inset:-29px 70px 50%;border:1px solid #e0e6db;border-bottom:0;border-radius:26px 26px 0 0;z-index:-1}
.product-window{position:relative;width:100%;margin:0;overflow:hidden;border:1px solid #d7ded5;border-radius:12px;background:#fffefa;box-shadow:0 7px 25px #193b2310}.window-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;height:42px;padding:0 16px;border-bottom:1px solid #e0e5db;background:#fafbf7}.window-dots{display:flex;align-items:center;gap:5px;width:68px}.window-dots i{width:6px;height:6px;border-radius:50%;background:#d5dccf}.window-title{display:flex;align-items:center;gap:7px;font-size:10px;color:#6c7b6b;line-height:1}.window-title img{width:13px;height:13px}.window-title b{font-weight:600;color:#45614b}.window-divider{color:#c4cfc2;margin:0 3px}.window-label{font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:#859380}
.product-image{width:100%;height:auto;max-width:100%;object-fit:cover;object-position:top}.screen-open{display:block;position:relative;border:0;border-radius:0;background:#f6f6f2;margin:0;padding:0;width:100%;overflow:hidden;line-height:0;text-align:initial}.screen-enlarge{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:#fffefaef;border:1px solid #dce4d7;box-shadow:0 3px 10px #263f2020;border-radius:5px;padding:10px 13px;color:var(--ink);font-size:11px;line-height:1;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s}.screen-enlarge svg{width:14px;height:14px}.screen-open:hover .screen-enlarge,.screen-open:focus-visible .screen-enlarge{opacity:1;transform:none}.product-window>figcaption{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e2e6de;padding:9px 15px;font-size:10px;line-height:1.3;color:#7e897b;background:#fafbf7}
.hero-screen .screen-open{max-height:660px}.hero-screen .product-image{aspect-ratio:1.75;object-fit:cover;object-position:top}
.workflow-section{display:block;width:100%;gap:0;padding:0;margin:0;height:auto}.product-facts{display:flex;align-items:center;justify-content:center;gap:70px;width:min(1080px,calc(100% - 96px));padding:39px 0 40px;margin:0 auto;border-bottom:1px solid var(--line);height:auto;flex:none}.product-facts>div{display:flex;align-items:center;gap:12px;font-size:14px;color:#65705e}.line-icon{width:25px;height:25px;color:#6c886d;flex-shrink:0}.product-facts .line-icon{width:19px;height:19px}
.workflow{position:relative;display:block;padding:108px 0 0;height:auto;overflow:visible}.section-heading{display:flex;align-items:flex-start;flex-direction:column;gap:19px;max-width:740px;width:auto;height:auto;margin-bottom:44px;padding:0;overflow:visible}.section-heading h2{font-size:48px}.section-heading>p:not(.eyebrow){font-size:18px;max-width:580px;line-height:1.5;color:var(--muted);letter-spacing:-.012em}
.product-tabs{width:100%;height:auto}.product-tabs>.framer-tTE6F{display:flex;flex-direction:column;width:100%;height:auto;gap:0;overflow:visible}.tab-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;height:auto;gap:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:visible}.product-tab{display:flex;align-items:center;justify-content:flex-start;gap:11px;position:relative;min-height:72px;padding:19px 16px;border:0;background:transparent;border-bottom:2px solid transparent;border-radius:0;color:#798477;font-size:14px;text-align:left;transition:color .2s,background .2s,border .2s}.product-tab+.product-tab{border-left:1px solid var(--line)}.product-tab .line-icon{width:21px;height:21px;color:inherit}.product-tab[aria-selected="true"]{background:#e9ede4;color:var(--green);border-bottom-color:var(--green)}.product-tab:hover{background:#ecefe8;color:var(--green)}.tab-arrow{margin-left:auto;font-size:18px;opacity:0;color:var(--green)}.product-tab[aria-selected="true"] .tab-arrow{opacity:1}
.tab-screens{position:relative;display:block;align-items:initial;width:100%;height:auto;min-height:0;overflow:visible;margin-top:25px}.tab-panel{padding:25px 28px 28px;border:1px solid #e0e5da;background:#e9ede4;border-radius:15px}.panel-intro{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:23px;padding:0 3px}.panel-intro h3{font-size:21px;max-width:390px;letter-spacing:-.025em;line-height:1.3}.panel-intro p{font-size:14px;line-height:1.45;max-width:440px;color:#697563}.tab-panel .screen-open{height:550px}.tab-panel .product-image{min-height:100%;object-fit:cover;object-position:top}
.school-section{display:block;width:100%;height:auto;padding:120px 0 125px}.school-section .framer-5hmv9p{display:flex;flex-direction:column;align-items:stretch;gap:100px;height:auto;padding:0}.split-mount{width:100%;height:auto}.split-card{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:95px;width:100%;height:auto;min-height:460px;overflow:visible}.split-card--reverse{grid-template-columns:1.15fr 1fr;direction:rtl}.split-card--reverse>*{direction:ltr}
.split-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:auto;height:auto;padding:0;max-width:none}.split-copy h2{font-size:46px}.split-copy>p:not(.eyebrow){color:var(--muted);max-width:425px;font-size:18px;line-height:1.55}.subject-chips{display:flex;flex-wrap:wrap;gap:8px}.subject-chips span{font-size:12px;padding:5px 12px;border:1px solid #dbe1d4;background:#f1f3eb;border-radius:24px;color:#63735f}.quiet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;color:#677362;font-size:14px}.quiet-list li::before{content:"✓";color:#66855f;margin-right:11px}
.split-visual{position:relative;display:flex;align-items:center;justify-content:center;border-radius:20px;width:100%;height:480px;overflow:hidden;background:#e2e8da}.rubric-visual{padding:38px 0 0 35px;background:#e1e8dc;align-items:flex-start}.scheme-window{width:640px;max-width:none;flex-shrink:0;transform:rotate(-2deg);transform-origin:left top;box-shadow:0 20px 45px #2b472323;border-radius:10px}.scheme-window .window-bar{height:37px}.scheme-window .screen-open{height:535px}.scheme-window .product-image{width:100%;height:auto;object-fit:cover}
.student-visual{align-items:center;justify-content:center;padding:0;background:#e9e6d8;isolation:isolate}.student-visual::before{content:"";position:absolute;inset:0;z-index:0;background:url('/assets/decor/teaching-page-landscape.webp') center/cover no-repeat;opacity:.16;filter:saturate(.85);pointer-events:none}.student-visual::after{content:none}.phone-window{position:relative;z-index:1;flex:none;min-width:0;margin:0;width:208px;height:392px;border:9px solid #2f4a3c;border-radius:40px;overflow:visible;background:#fffefa;box-shadow:0 22px 48px #233c2230}.phone-window .product-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:31px}.phone-window figcaption{position:absolute;left:50%;bottom:-25px;transform:translateX(-50%);white-space:nowrap;font-size:10px;line-height:1;padding:0;color:#6f7a66}
.student-note{position:absolute;display:flex;align-items:center;gap:11px;left:23px;bottom:60px;padding:14px 18px;border-radius:9px;background:#fffef9;box-shadow:0 5px 25px #33422618;z-index:2;transform:rotate(-4deg)}.student-note .line-icon{width:24px;height:24px}.student-note span{display:flex;flex-direction:column;gap:3px}.student-note b{font-weight:500;font-size:13px;color:#426348}.student-note small{font-size:11px;color:#7b856e}.visual-caption{position:absolute;right:20px;top:22px;font-size:10px;letter-spacing:.015em;color:#848b70;writing-mode:vertical-rl}
.control-section{display:block;width:100%;height:auto;padding:0 26px}.control-section>.framer-tou0v4-container{width:100%;height:auto;max-width:1460px;margin:auto}.control-panel{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:52px;width:100%;height:auto;min-height:655px;padding:72px;border-radius:34px;background:var(--ink);overflow:hidden}
.control-copy{display:flex;flex-direction:column;align-items:flex-start;gap:25px;width:auto;height:auto;padding:0;max-width:450px;border:none}.control-copy::after{display:none}.control-copy .eyebrow{color:#a9c7a8;font-size:11px}.control-copy h2{color:#f3f4e9;font-size:45px;line-height:1.12;letter-spacing:-.044em}.control-copy h2 span{color:#a9bd9e}.control-copy>p:not(.eyebrow){color:#bfcbc0;font-size:16px;line-height:1.6}.control-copy .control-guarantee{color:#e0e8d8!important;font-size:14px!important;max-width:325px;padding-left:15px;border-left:2px solid #91af80}
.approval-steps{display:flex;list-style:none;margin:3px 0 0;padding:0;gap:20px;width:100%}.approval-steps li{display:flex;flex-direction:column;gap:8px;color:#dce5d5;font-size:13px;flex:1;padding-top:12px;border-top:1px solid #688273}.approval-steps li>span{font-size:10px;color:#95b094}
.control-visual{position:relative;display:block;width:100%;min-width:0;height:auto;overflow:visible;transform:none}.control-visual .product-window{width:100%;max-width:100%;transform:none;box-shadow:0 20px 40px #0c221e40;border:6px solid #527261;border-radius:17px}.control-visual .screen-open{height:auto}.control-visual .product-image{width:100%;height:auto;object-fit:contain;object-position:center top}.control-visual .window-bar{height:39px}.control-visual .product-window>figcaption{padding:8px 15px}.control-visual .screen-enlarge{right:16px}
.detail-section{display:block;width:100%;height:auto;padding:120px 0 0}.detail-section .framer-o6rbe2-container{display:block;height:auto;width:100%}.detail-component{display:block;height:auto;background:transparent;padding:0}.detail-component .section-heading{max-width:760px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;height:auto;width:100%;gap:0;align-items:stretch;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.detail-grid::after,.detail-card::after{display:none}
.detail-card{display:flex;flex-direction:column;align-items:flex-start;width:100%;height:auto;padding:34px 35px 40px 0;gap:15px;overflow:hidden}.detail-card+.detail-card{padding:34px 0 40px 35px;border-left:1px solid var(--line)}.detail-card>.line-icon{margin-bottom:6px;width:25px;height:25px}.detail-card>h3{font-size:25px;max-width:420px;line-height:1.3}.detail-card>p{color:var(--muted);font-size:16px;line-height:1.5;max-width:440px;margin-bottom:18px}.detail-window{margin-top:auto;border-radius:9px}.detail-window .screen-open{height:315px}.detail-window .product-image{height:100%;object-fit:cover;object-position:left top}.detail-window .window-bar{height:34px;padding:0 10px}.detail-window .window-label,.detail-window .window-dots{display:none}.detail-window .window-title{font-size:9px}.detail-window>figcaption{font-size:9px;padding:8px 10px}
.feature-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:37px 0 0}.feature-notes>div{display:grid;grid-template-columns:22px 1fr;column-gap:13px;row-gap:10px;align-items:center}.feature-notes .line-icon{width:21px;height:21px}.feature-notes h3{font-size:17px;letter-spacing:-.015em}.feature-notes p{grid-column:2;font-size:14px;line-height:1.5;color:#788273}
.about-section{display:grid;grid-template-columns:1fr 1.65fr;gap:80px;align-items:start;margin-top:120px;margin-bottom:110px;padding:60px 0 0;border-top:1px solid var(--line);height:auto}.about-brand{display:flex;align-items:flex-start;flex-direction:column;gap:18px;padding-top:5px}.about-brand>span{color:#788274;font-size:14px;margin-left:46px}.about-section>div:last-child{display:flex;flex-direction:column;gap:24px}.about-section h2{font-size:37px;line-height:1.16}.about-section p:not(.eyebrow){font-size:17px;color:var(--muted);max-width:600px;line-height:1.6}.about-section .about-legal{font-size:12px!important;color:#879080!important}
.faq-section{display:block;height:auto;width:100%;background:#eeefe8;padding:82px 0 88px}.faq-section>.framer-vmqZz{display:block;padding:0;width:100%;height:auto;background:transparent}.faq-layout{display:grid;grid-template-columns:.85fr 1.2fr;gap:100px;align-items:start;height:auto;padding:0}.faq-title{display:flex;flex-direction:column;gap:22px;align-items:flex-start;width:auto;height:auto}.faq-title h2{font-size:47px;line-height:1.08}.faq-title>p:not(.eyebrow){font-size:16px;max-width:280px;color:var(--muted)}.faq-list{display:block;width:100%;height:auto}
.faq-item{border-bottom:1px solid #d7ddcf;padding:0}.faq-item:first-child{border-top:1px solid #d7ddcf}.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:30px;list-style:none;padding:22px 0;color:#3e5140;font-size:16px;font-weight:500;line-height:1.4}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary>span{position:relative;display:block;width:17px;height:17px;flex:none}.faq-item summary>span::before,.faq-item summary>span::after{content:"";position:absolute;left:2px;top:8px;width:13px;height:1px;background:#6d8464}.faq-item summary>span::after{transform:rotate(90deg);transition:transform .2s}.faq-item[open] summary>span::after{transform:rotate(0)}.faq-item>div{padding:0 38px 24px 0;color:#6e7967;font-size:15px;line-height:1.65}
.cta-section{width:100%;height:auto;padding:80px 26px 0;overflow:visible}.cta-panel{display:block;position:relative;overflow:hidden;width:100%;height:auto;max-width:1460px;margin:0 auto;border-radius:28px;padding:69px 24px 75px;background:#e1e8d8}.cta-panel::before,.cta-panel::after{content:"";position:absolute;pointer-events:none;border:1px solid #c8d5bd;border-radius:50%;width:610px;height:610px;left:-365px;top:-30px}.cta-panel::after{left:auto;right:-335px;top:100px;width:560px;height:560px}.cta-panel>.framer-1d6f31s{display:block;width:100%;height:auto;padding:0;max-width:none;position:relative;z-index:1}.cta-content{display:flex;align-items:center;flex-direction:column;gap:22px;text-align:center;width:100%;height:auto;max-width:none}.cta-product-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #bdcdb4;background:#ecf0e3;border-radius:12px;box-shadow:0 3px 7px #25412507;margin-bottom:-3px}.cta-product-mark img{width:26px;height:26px}.cta-content .eyebrow{font-size:10px}.cta-content h2{font-size:64px;line-height:1.03;letter-spacing:-.05em}.cta-content>p:not(.eyebrow){font-size:17px;line-height:1.5;color:#6a7b5e}.cta-content>.button{margin-top:4px}.cta-note{font-size:11px;color:#7f8c71;margin-top:-8px}
.footer-mount{width:100%;height:auto;padding:70px 0 0}.site-footer{display:block;width:min(1320px,calc(100% - 96px));height:auto;max-width:none;margin:auto;padding:0;background:transparent}.site-footer>.framer-17nfjq0{display:grid;grid-template-columns:1fr 2.3fr;gap:85px;width:100%;height:auto;align-items:start;padding:0;max-width:none}.footer-brand{display:flex;flex-direction:column;gap:18px}.footer-brand>p{font-size:14px;line-height:1.6;color:#7a8474;padding-left:46px}.footer-links{display:grid;grid-template-columns:1fr 1.25fr 1.35fr;gap:36px;width:100%;height:auto;padding:0}.footer-links>div{display:flex;flex-direction:column;gap:13px;align-items:flex-start;min-width:0}.footer-links h2{font-size:13px;font-weight:600;letter-spacing:0;margin-bottom:4px;color:#53634d}.footer-links a,.footer-links p{font-size:12px;color:#7b8573;line-height:1.55}.footer-links a{display:inline-flex;align-items:center;gap:5px}.footer-links a:hover{color:var(--green)}.footer-links a svg{width:12px;height:12px}.footer-links p{max-width:180px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;margin-top:55px;padding:22px 0 26px;border-top:1px solid var(--line);font-size:10px;color:#8a9382;line-height:1.5}
.screen-dialog{border:1px solid #acb9a7;border-radius:13px;padding:0;width:min(1450px,94vw);max-width:94vw;height:auto;max-height:92vh;background:var(--white);color:var(--ink);box-shadow:0 20px 120px #172f2ab0}.screen-dialog::backdrop{background:#172f2adc;backdrop-filter:blur(4px)}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 18px;border-bottom:1px solid var(--line);font-size:13px}.dialog-close{display:flex;align-items:center;gap:14px;background:var(--green);color:white;border:0;border-radius:5px;padding:8px 13px;font-size:12px;min-height:35px}.dialog-close span{font-size:20px;line-height:1}.dialog-image-wrap{max-height:calc(92vh - 95px);overflow:auto;background:#f6f5f1}.dialog-image-wrap>img{display:block;width:100%;height:auto;min-width:700px;max-width:none}.screen-dialog>p{padding:8px 18px;font-size:10px;color:var(--muted)}.dialog-open{overflow:hidden}.not-found{max-width:680px;padding:100px 28px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:26px;min-height:80vh}.not-found h1{font-size:65px}.not-found p{color:var(--muted)}
/* Adapt original component flex rules to the new screenshot contents. */
.split-copy,.split-visual{flex:none;order:0}
.split-card--reverse{direction:ltr}
.split-card--reverse .split-visual{order:-1}
.visual-data-label{position:absolute;right:12px;bottom:11px;font-size:9px;line-height:1.3;z-index:3;padding:5px 8px;border-radius:4px;background:#fffefae8;color:#586950}
.hero-note,.window-label,.product-window>figcaption,.phone-window figcaption,.visual-caption,.student-note small,.feature-notes p,.about-brand>span,.about-section .about-legal,.cta-note,.footer-brand>p,.footer-links a,.footer-links p,.footer-bottom{color:#64715f}
.about-section .about-legal{color:#64715f!important}
@media(min-width:1700px){.hero{padding-top:85px}.hero-inner{gap:70px}.hero .framer-1vo474e{max-width:1100px}.hero-screen{width:1400px}.hero-screen .screen-open{max-height:750px}.hero-screen .product-image{aspect-ratio:1.8}}
@media(max-width:1199px){
  .site-nav{padding-inline:28px;gap:24px}.site-nav>.framer-9l88wu{gap:22px}.brand>span{font-size:25px}.hero{padding-top:55px}.hero-inner{gap:52px}.hero-screen{width:calc(100% - 48px)}.hero .framer-1bc6hz6{max-width:540px}.hero .framer-1bc6hz6 p{font-size:18px}.section-width{width:calc(100% - 72px)}.section-heading h2{font-size:42px}
  .product-facts{gap:40px}.product-facts>div{font-size:12px;gap:9px}.workflow{padding-top:85px}.product-tab{font-size:12px;gap:8px;padding-inline:12px}.tab-arrow{display:none}.tab-panel .screen-open{height:460px}.panel-intro h3{max-width:330px;font-size:20px}.panel-intro p{font-size:13px;max-width:350px}
  .school-section{padding:95px 0}.split-card{gap:52px;min-height:420px}.split-copy h2{font-size:39px}.split-copy>p:not(.eyebrow){font-size:16px}.split-visual{height:435px}.scheme-window{width:560px}.student-note{left:10px;padding:12px}.student-note b{font-size:11px}.student-note small{font-size:10px}.phone-window{width:186px;height:350px}
  .control-panel{padding:52px 48px;min-height:560px;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}.control-copy h2{font-size:37px}.control-copy>p:not(.eyebrow){font-size:15px}.control-visual .product-window{width:100%}.control-visual .screen-open{height:auto}
  .detail-section{padding-top:95px}.detail-card>h3{font-size:22px}.detail-card>p{font-size:15px}.detail-window .screen-open{height:270px}.feature-notes{gap:25px}.feature-notes h3{font-size:15px}.feature-notes p{font-size:13px}.about-section{gap:50px;grid-template-columns:1fr 1.7fr;margin-top:95px;margin-bottom:90px}.about-section h2{font-size:32px}.faq-layout{gap:70px}.faq-title h2{font-size:42px}.faq-item summary{font-size:15px}.site-footer{width:calc(100% - 72px)}.site-footer>.framer-17nfjq0{gap:45px;grid-template-columns:1fr 2.5fr}.footer-links{gap:24px}
}
@media(max-width:900px){
  .site-nav>.framer-9l88wu{display:none}.site-nav>.framer-hvx0up{margin-left:auto}.mobile-menu{display:block;position:relative;flex-shrink:0}.mobile-menu>summary{display:flex;flex-direction:column;justify-content:center;gap:6px;list-style:none;width:40px;height:44px;padding:10px}.mobile-menu>summary::-webkit-details-marker{display:none}.mobile-menu>summary span{height:1.5px;background:var(--ink);width:21px;transition:transform .2s}.mobile-menu[open]>summary span:first-child{transform:translateY(3.75px) rotate(45deg)}.mobile-menu[open]>summary span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .mobile-menu-panel{position:absolute;top:58px;right:0;width:min(340px,calc(100vw - 40px));display:flex;flex-direction:column;gap:0;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:17px;box-shadow:0 20px 40px #1f3a3320}.mobile-menu-panel>a:not(.button){padding:12px;font-size:15px}.mobile-menu-panel .button{margin-top:12px}
  .split-card{gap:35px;grid-template-columns:1fr 1fr}.split-copy h2{font-size:34px}.split-visual{height:395px}.scheme-window{width:485px}.phone-window{width:176px;height:330px;border-width:8px;border-radius:36px}.phone-window .product-image{border-radius:28px}.student-note{bottom:30px;left:8px}.visual-caption{display:none}.control-panel{display:flex;align-items:flex-start;flex-direction:column;gap:34px;padding:44px 35px;min-height:0}.control-copy h2{font-size:32px}.control-visual{width:100%}.control-copy .eyebrow{font-size:10px}.footer-links{grid-template-columns:1fr 1.15fr}.footer-links>div:last-child{grid-column:1/-1}.footer-links>div:last-child p{max-width:none}
}
@media(max-width:700px){
  .split-card--reverse .split-visual{order:0}
  html{scroll-padding-top:88px}body{font-size:16px}h1{font-size:clamp(42px,10.8vw,65px);line-height:1.04;letter-spacing:-.054em}h2{font-size:36px;line-height:1.13;letter-spacing:-.042em}h3{font-size:22px}
  .announcement{min-height:34px;padding:8px 16px;gap:0;font-size:10px;justify-content:space-between}.announcement>a{font-size:10px}.announce-description{display:none!important}.announcement>span{gap:7px}.announcement a svg{width:12px;height:12px}.site-nav{height:73px;padding:0 20px;gap:9px}.brand img{width:31px;height:31px}.brand>span{font-size:23px;letter-spacing:-.9px}.brand{gap:5px}.site-nav .button{font-size:11px;min-height:37px;padding:9px 11px;gap:8px}.site-nav>.framer-hvx0up .button svg{width:13px;height:13px}.mobile-menu>summary{width:34px;padding:8px}.mobile-menu-panel{top:54px;right:0}.site-nav .mobile-menu-panel .button{font-size:14px;min-height:45px}
  .hero{padding:38px 0 0}.hero-inner{gap:42px}.hero .framer-1l7ejz7{padding:0 18px}.hero .framer-163udps-container{margin-bottom:24px}.product-pill{font-size:10px;padding:6px 8px;gap:7px}.product-pill>img{width:16px;height:16px}.product-pill>svg{width:14px;height:14px}.hero .framer-1bc6hz6{max-width:390px;margin-top:20px}.hero .framer-1bc6hz6 p{font-size:15px;line-height:1.55;letter-spacing:-.01em}.hero .framer-1jrormh{gap:8px;margin-top:24px}.hero .button{font-size:12px;padding:12px 14px;gap:11px;min-height:43px}.hero .button svg{width:15px;height:15px}.hero-note{font-size:10px;margin-top:14px}
  .hero-screen{width:calc(100% - 24px);padding:5px;border-radius:13px}.hero-screen::before{inset:-10px 17px 50%;border-radius:15px 15px 0 0}.hero-screen::after{inset:-19px 35px 50%;border-radius:18px 18px 0 0}.hero-screen .product-window{border-radius:8px}.hero-screen .screen-open{height:auto;max-height:none}.hero-screen .product-image{aspect-ratio:1.35;object-fit:cover;object-position:left top;width:100%;height:auto}.window-bar{height:31px;padding:0 9px;gap:5px}.window-dots{gap:3px;width:27px}.window-dots i{width:4px;height:4px}.window-title{font-size:8px;gap:5px}.window-title img{width:10px;height:10px}.window-label{display:none}.window-divider{margin:0 1px}.product-window>figcaption{font-size:8px;padding:7px 10px}.screen-enlarge{opacity:1;transform:none;bottom:8px;right:8px;padding:7px 9px;font-size:9px;gap:7px;background:#fffefada}.screen-enlarge svg{width:12px;height:12px}
  .section-width{width:calc(100% - 40px)}.product-facts{width:calc(100% - 40px);display:grid;grid-template-columns:1fr;gap:15px;padding:29px 0 31px;justify-items:center}.product-facts>div{font-size:12px;gap:9px}.product-facts .line-icon{width:17px;height:17px}.workflow{padding-top:66px}.section-heading{gap:17px;margin-bottom:29px}.eyebrow{font-size:10px;letter-spacing:.105em}.section-heading h2{font-size:35px}.section-heading>p:not(.eyebrow){font-size:16px;line-height:1.5;max-width:330px}
  .tab-list{grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:8px;overflow:hidden}.product-tab{padding:15px 11px;gap:8px;min-height:55px;font-size:11px}.product-tab .line-icon{width:17px;height:17px}.product-tab:nth-child(3){border-left:0}.product-tab:nth-child(n+3){border-top:1px solid var(--line)}.tab-screens{margin-top:17px}.tab-panel{padding:17px 12px 12px;border-radius:10px}.panel-intro{flex-direction:column;gap:10px;margin-bottom:17px;padding:0 3px}.panel-intro h3{font-size:19px;line-height:1.25}.panel-intro p{font-size:13px;line-height:1.5;max-width:350px}.tab-panel .product-window{border-radius:7px}.tab-panel .screen-open{height:280px}.tab-panel .product-image{width:100%;height:100%;min-height:0;object-fit:cover;object-position:left top}
  .school-section{padding:74px 0}.school-section .framer-5hmv9p{gap:70px}.split-card,.split-card--reverse{display:flex;flex-direction:column;direction:ltr;gap:28px;min-height:0}.split-copy{width:100%;gap:19px}.split-copy h2{font-size:37px}.split-copy>p:not(.eyebrow){font-size:16px;max-width:420px}.split-copy .button{font-size:13px;min-height:35px}.subject-chips span{font-size:11px}.split-visual{height:385px;border-radius:15px}.rubric-visual{padding-top:28px;padding-left:25px}.scheme-window{width:475px}.scheme-window .window-bar{height:30px}.scheme-window .screen-open{height:460px}.scheme-window .screen-enlarge{bottom:105px;right:calc(100% - 205px)}
  .student-visual{height:415px;padding-top:0}.phone-window{width:188px;height:355px;border-width:8px;border-radius:36px}.phone-window .product-image{border-radius:28px}.student-note{left:15px;bottom:36px;padding:12px 14px}.student-note b{font-size:12px}.student-note small{font-size:10px}.student-note .line-icon{width:21px;height:21px}.quiet-list{font-size:13px;gap:8px}
  .control-section{padding:0 12px}.control-panel{display:flex;align-items:flex-start;flex-direction:column;gap:34px;border-radius:23px;padding:40px 25px 36px;min-height:0}.control-copy{max-width:100%;gap:22px}.control-copy .eyebrow{font-size:9px;letter-spacing:.09em}.control-copy h2{font-size:34px;line-height:1.15;max-width:350px}.control-copy>p:not(.eyebrow){font-size:15px}.control-copy .control-guarantee{font-size:13px!important}.approval-steps{gap:18px;margin-top:0}.approval-steps li{font-size:12px}.approval-steps li>span{font-size:9px}.control-visual{width:100%;transform:none}.control-visual .product-window{width:100%;max-width:100%;border-width:4px;border-radius:11px;transform:none}.control-visual .screen-open{height:auto}.control-visual .window-bar{height:30px}.control-visual .product-window>figcaption{padding:6px 10px}.control-visual .screen-enlarge{right:10px}
  .detail-section{padding-top:74px}.detail-grid{grid-template-columns:1fr;border-bottom:0;gap:0}.detail-card{padding:28px 0 30px;gap:14px;border-bottom:1px solid var(--line)}.detail-card+.detail-card{padding:28px 0 30px;border-left:0}.detail-card>h3{font-size:23px;max-width:330px}.detail-card>p{font-size:15px;margin-bottom:7px}.detail-window .screen-open{height:280px}.detail-window .window-bar{height:30px}.detail-window .window-title{font-size:8px}.detail-window>figcaption{font-size:8px}.feature-notes{grid-template-columns:1fr;gap:25px;padding-top:31px}.feature-notes h3{font-size:16px}.feature-notes p{font-size:14px;max-width:350px}.feature-notes>div{column-gap:13px;row-gap:7px}
  .about-section{grid-template-columns:1fr;gap:40px;margin-top:73px;margin-bottom:70px;padding-top:40px}.about-brand{gap:12px}.about-brand>span{font-size:12px;margin-left:37px}.about-section>div:last-child{gap:19px}.about-section h2{font-size:31px}.about-section p:not(.eyebrow){font-size:16px}.about-section .about-legal{font-size:11px!important}.faq-section{padding:56px 0}.faq-layout{grid-template-columns:1fr;gap:33px}.faq-title{gap:16px}.faq-title h2{font-size:38px}.faq-title>p:not(.eyebrow){max-width:320px;font-size:15px}.faq-title .button{font-size:13px;min-height:30px}.faq-item summary{font-size:15px;padding:20px 0;gap:23px}.faq-item>div{padding:0 25px 23px 0;font-size:14px}
  .cta-section{padding:50px 12px 0}.cta-panel{border-radius:21px;padding:45px 17px 44px}.cta-content{gap:20px}.cta-content h2{font-size:43px;line-height:1.06}.cta-content .eyebrow{font-size:8px;letter-spacing:.095em}.cta-content>p:not(.eyebrow){font-size:15px}.cta-content>.button{font-size:13px;min-height:44px;gap:18px}.cta-note{font-size:10px;max-width:270px;line-height:1.4}.cta-panel::before{left:-520px}.cta-panel::after{right:-480px;top:80px}
  .footer-mount{padding-top:46px}.site-footer{width:calc(100% - 40px)}.site-footer>.framer-17nfjq0{grid-template-columns:1fr;gap:38px}.footer-brand{gap:12px}.footer-brand>p{font-size:13px;padding-left:37px}.footer-links{grid-template-columns:1fr 1.1fr;gap:30px 17px}.footer-links h2{font-size:12px}.footer-links a,.footer-links p{font-size:12px}.footer-links>div{gap:12px}.footer-links>div:last-child{grid-column:1/-1}.footer-links>div:last-child p{max-width:none}.footer-bottom{display:flex;align-items:flex-start;flex-direction:column;gap:10px;margin-top:35px;padding:20px 0 24px;font-size:9px}
  .screen-dialog{width:96vw;max-width:96vw;max-height:92vh;border-radius:9px}.dialog-toolbar{padding:10px;font-size:11px;gap:8px}.dialog-close{font-size:11px;padding:7px 10px;gap:10px}.dialog-image-wrap{max-height:calc(92vh - 98px)}.dialog-image-wrap>img{min-width:900px}.screen-dialog>p{padding:9px 10px;font-size:9px}
}
@media(max-width:370px){.site-nav{padding-inline:14px}.brand>span{font-size:21px}.brand img{width:27px;height:27px}.site-nav>.framer-hvx0up .button{font-size:10px;padding:9px}.site-nav>.framer-hvx0up .button svg{display:none}.hero .button{font-size:11px;padding-inline:12px;gap:9px}.product-tab{font-size:10px;gap:7px}.section-heading h2{font-size:32px}.control-copy h2{font-size:30px}.cta-content h2{font-size:39px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.announcement,.site-header,.screen-dialog,.screen-enlarge,.mobile-menu{display:none!important}.chalk-page{overflow:visible}.tab-panel[hidden]{display:block!important;margin-top:24px}.control-panel{background:#e8ede4}.control-copy h2,.control-copy p{color:#21392a!important}a{color:inherit!important}.cta-section,.product-window{break-inside:avoid}}

/* The original animated panel had an 800px minimum width. Product imagery
   should fit its actual grid track at every breakpoint. */
.control-panel{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr)}
.control-copy,.control-visual{min-width:0;min-height:0}
.control-visual{flex:none;padding:0}
.control-visual .product-window{width:100%}
.control-visual .window-label{display:none}
.control-visual .window-title{white-space:nowrap}
.control-visual .window-dots{width:30px}
.control-visual .product-image{width:100%;height:auto;object-fit:contain;object-position:center top}

/* The hero's independently moving layers sit behind the real product UI. */
.hero{isolation:isolate}
.hero-backdrop{position:absolute;inset:-125px 0 -110px;z-index:-1;pointer-events:none;user-select:none;overflow:clip;mask-image:linear-gradient(#000 72%,transparent)}
.hero-book{position:absolute;top:290px;right:-90px;width:min(58vw,780px);aspect-ratio:1;transform:rotate(-16deg)}
.hero-book img{width:100%;height:auto;--reveal-opacity:.64;opacity:var(--reveal-opacity)}
.hero-chalk{position:absolute;top:780px;left:-160px;width:570px;transform:rotate(12deg)}
.hero-chalk img{width:100%;height:auto;--reveal-opacity:.58;opacity:var(--reveal-opacity)}
.workflow{isolation:isolate}
.workflow-backdrop{position:absolute;top:210px;right:-32px;width:330px;height:560px;border-radius:110px 0 0 0;overflow:hidden;z-index:-1;pointer-events:none;translate:0 var(--workflow-backdrop-y,0px)}
.workflow-backdrop img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:68% center}
@media(max-width:1199px){.workflow-backdrop{width:260px;right:-24px;top:245px;height:480px}}
@media(max-width:700px){.workflow-backdrop{width:150px;height:310px;right:-20px;top:290px;border-radius:65px 0 0 0}}
@media(prefers-reduced-motion:reduce){.workflow-backdrop{translate:none!important}}
@media print{.workflow-backdrop{display:none}}
[data-parallax]{translate:0 var(--parallax-y,0px)}
/* JS opts into pending state only after its observer is ready. Without JS,
   unsupported animation APIs, or reduced motion, all content stays visible. */
@media(prefers-reduced-motion:no-preference){:root [data-reveal-state="pending"]{opacity:0}}
@media(max-width:1199px){.hero-book{width:550px;right:-120px;top:310px}.hero-chalk{width:430px;left:-145px;top:700px}}
@media(max-width:700px){.hero-backdrop{inset:-100px 0 -50px}.hero-book{width:360px;right:-170px;top:265px}.hero-book img{--reveal-opacity:.3}.hero-chalk{display:none}}
@media(prefers-reduced-motion:reduce){[data-parallax]{translate:none!important}[data-reveal]{opacity:var(--reveal-opacity,1)!important;translate:none!important}}
@media print{.hero-backdrop{display:none}[data-parallax]{translate:none!important}[data-reveal]{opacity:1!important;translate:none!important}}
@media(max-width:700px){
  h1{font-size:clamp(34px,10.8vw,65px)}
  .control-visual .product-window{width:100%;transform:none}
  .control-visual .screen-open{height:auto}
  .control-visual .screen-enlarge{right:8px}
  .site-nav>.framer-hvx0up .button{min-height:42px}
}

/* ScriptMark workflow showcase — motion and editorial layout for the four
   animated workflow scenes. Every rule is scoped to .workflow-showcase or
   .workflow-scene so the other product windows stay untouched. Base states are
   the finished, readable diagrams; animation is only added while a scene is
   both active AND revealed, so the first choreography waits for viewport entry
   instead of playing while offscreen, and the global reduced-motion rules keep
   that motion off.

   The analytics scene carries no diagram markup: its real raster bars are
   revealed in place by temporary masks whose geometry was measured from the
   source screenshot. The cohort scene is a plain screenshot. */

.workflow-showcase{
  --wf-green:#2e5a4c;
  --wf-ink:#1f3a33;
  --wf-paper:#f5f4f0;
  --wf-line:#d7ded5;
  --wf-soft:#e9ede4;
  --wf-muted:#697563;
  --wf-shadow:0 14px 34px rgba(25,59,35,.16);
  --wf-ease:cubic-bezier(.22,1,.36,1);
  --wf-bar-ease:cubic-bezier(.4,0,.2,1);
}

/* --- Scene frame -------------------------------------------------------- */
.workflow-showcase .panel-intro{min-height:60px}
.workflow-showcase .workflow-scene{position:relative;width:100%;isolation:isolate}
.workflow-showcase .workflow-scene>.product-window{position:relative;z-index:0}
.workflow-showcase .workflow-scene-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.workflow-showcase .workflow-scene-note{position:absolute;z-index:3;top:-15px;right:2px;margin:0;padding:0;color:var(--wf-muted);font-size:8px;line-height:1;letter-spacing:.07em;text-transform:uppercase;pointer-events:none}

/* --- Shared illustrative card ------------------------------------------ */
.workflow-showcase .wf-card{position:absolute;box-sizing:border-box;padding:13px 14px;border:1px solid var(--wf-line);border-radius:12px;background:#fffefa;box-shadow:var(--wf-shadow);color:var(--wf-ink);font-size:clamp(11px,1vw,13px);line-height:1.4;letter-spacing:-.008em}
.workflow-showcase .wf-card p{margin:6px 0 0}
.workflow-showcase .wf-tag{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--wf-green)}
.workflow-showcase .wf-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:none;border-radius:50%;background:var(--wf-green);color:#fff}
.workflow-showcase .wf-check svg{width:11px;height:11px}
.workflow-showcase .wf-check path{stroke-dasharray:1;stroke-dashoffset:0}

/* --- Review: suggestion becomes teacher-reviewed ------------------------ */
.workflow-showcase .wf-review .wf-feedback-card{left:4%;bottom:11%;width:min(310px,36%)}
.workflow-showcase .wf-feedback-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.workflow-showcase .wf-badge{padding:2px 8px;border-radius:999px;background:var(--wf-soft);color:var(--wf-green);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.workflow-showcase .wf-feedback-meta{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--wf-muted)}
.workflow-showcase .wf-feedback-text{margin:9px 0 12px;font-size:clamp(11.5px,1.02vw,13.5px);color:var(--wf-ink)}
.workflow-showcase .wf-review-status{display:inline-flex;align-items:center;gap:8px;padding:6px 11px 6px 7px;border:1px solid #cfe0c6;border-radius:999px;background:#eaf1e6;color:var(--wf-green)}
.workflow-showcase .wf-review-status b{font-size:11.5px;font-weight:600}

/* --- On script: highlight, pin and connected comment -------------------- */
.workflow-showcase .wf-onscript .wf-script-card{left:4%;top:15%;width:min(380px,46%)}
.workflow-showcase .wf-script-line{margin:8px 0 0;font-size:clamp(11.5px,1.02vw,13.5px);line-height:1.5}
.workflow-showcase .wf-script-muted{color:var(--wf-muted)}
.workflow-showcase .wf-highlight{position:relative;display:inline-block;white-space:nowrap}
.workflow-showcase .wf-highlight>i{position:absolute;inset:-1px -3px;z-index:0;border-radius:4px;background:#dbe8cf;transform-origin:left center;transform:scaleX(1)}
.workflow-showcase .wf-highlight>span{position:relative;z-index:1}
.workflow-showcase .wf-pin{position:absolute;right:12%;bottom:16%;width:11px;height:11px;border-radius:50%;background:var(--wf-green);box-shadow:0 0 0 4px rgba(46,90,76,.16)}
.workflow-showcase .wf-onscript .wf-comment-card{right:4%;bottom:9%;width:min(260px,32%)}
.workflow-showcase .wf-connector{position:absolute;left:24%;top:34%;width:52%;height:46%;overflow:visible;color:var(--wf-green);opacity:.6}
.workflow-showcase .wf-connector path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}

/* --- Analytics: reveal the real raster bars in place --------------------
   The masks share the screenshot's pixel space (viewBox 0 0 2880 3034 with
   "xMinYMin slice") so they line up with the raster under the product image's
   cover/top-left crop at every breakpoint. Base state is fully receded, so
   no-JS and reduced-motion show the untouched screenshot. A mask receding
   from the top uncovers the histogram bottom-up; a track-coloured mask
   receding to the right uncovers the real green bars left-to-right. */
.workflow-showcase .wf-mask-layer{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.workflow-showcase .wf-mask-layer .wf-hist-cover{transform-box:fill-box;transform-origin:top center;transform:scaleY(0)}
.workflow-showcase .wf-mask-layer .wf-bar-cover{transform-box:fill-box;transform-origin:right center;transform:scaleX(0)}

/* --- Staged playback: active + revealed scene only ----------------------
   .is-active lives on the .workflow-scene root and .is-revealed is added the
   first time the showcase enters the viewport, so the internal choreography
   never plays while offscreen. Both classes stay on a previously-seen scene,
   so re-selecting it (manual or autoplay) restarts these animations. */
.workflow-showcase .workflow-scene.is-active.is-revealed .wf-review .wf-feedback-card{animation:wf-rise .7s var(--wf-ease) both}
.workflow-showcase .workflow-scene.is-active.is-revealed .wf-review .wf-review-status{animation:wf-pop .55s var(--wf-ease) .62s both}
.workflow-showcase .workflow-scene.is-active.is-revealed .wf-review .wf-review-status .wf-check path{animation:wf-draw .5s ease-out .78s both}

.workflow-showcase .workflow-scene.is-active.is-revealed .wf-onscript .wf-highlight>i{animation:wf-sweep .6s var(--wf-ease) .12s both}
.workflow-showcase .workflow-scene.is-active.is-revealed .wf-onscript .wf-pin{animation:wf-pop .4s var(--wf-ease) .55s both}
.workflow-showcase .workflow-scene.is-active.is-revealed .wf-onscript .wf-connector path{animation:wf-draw .6s ease-out .6s both}
.workflow-showcase .workflow-scene.is-active.is-revealed .wf-onscript .wf-comment-card{animation:wf-slide-x .65s var(--wf-ease) .72s both}

@media (prefers-reduced-motion: no-preference){
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-hist-cover{animation:wf-hist-reveal 1.05s var(--wf-ease) both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(1){animation:wf-bar-reveal .6s var(--wf-bar-ease) .10s both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(2){animation:wf-bar-reveal .6s var(--wf-bar-ease) .20s both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(3){animation:wf-bar-reveal .6s var(--wf-bar-ease) .30s both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(4){animation:wf-bar-reveal .6s var(--wf-bar-ease) .40s both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(5){animation:wf-bar-reveal .6s var(--wf-bar-ease) .50s both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(6){animation:wf-bar-reveal .6s var(--wf-bar-ease) .60s both}
  .workflow-showcase .workflow-scene[data-scene="analytics"].is-active.is-revealed .wf-mask-layer .wf-bar-cover:nth-child(7){animation:wf-bar-reveal .6s var(--wf-bar-ease) .70s both}
}

/* --- Editorial feature tabs with timed progress ------------------------- */
.workflow-showcase .tab-list{margin-top:28px;gap:24px;border:0}
.workflow-showcase .product-tab{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"prog prog prog" "icon label arrow" "desc desc desc";align-content:start;align-items:center;gap:8px 10px;min-height:0;padding:0 0 12px;border:0;border-radius:0;background:transparent;color:#798477;font-size:16px;text-align:left;transition:color .25s,background .25s}
.workflow-showcase .product-tab:first-child{border-left:0}
.workflow-showcase .product-tab .line-icon{grid-area:icon;width:20px;height:20px;color:inherit}
.workflow-showcase .product-tab>span:not([class]){grid-area:label;font-weight:500;letter-spacing:-.01em}
.workflow-showcase .product-tab .tab-arrow{grid-area:arrow;justify-self:end;margin:0;font-size:16px;color:var(--wf-green);opacity:0}
.workflow-showcase .product-tab .workflow-tab-description{grid-area:desc;font-size:14px;line-height:1.4;color:inherit;opacity:.85}
.workflow-showcase .product-tab .workflow-tab-progress{grid-area:prog;position:relative;display:block;width:100%;height:2px;margin:0 0 10px;border-radius:2px;background:rgba(31,58,51,.14);overflow:hidden}
.workflow-showcase .product-tab .workflow-tab-progress>span{position:absolute;inset:0;display:block;border-radius:2px;background:var(--wf-green);transform:scaleX(0);transform-origin:left center;will-change:transform}
.workflow-showcase .product-tab[aria-selected="true"]{background:transparent;color:var(--wf-green)}
.workflow-showcase .product-tab[aria-selected="true"] .tab-arrow{opacity:1}
.workflow-showcase .product-tab:hover{background:transparent;color:var(--wf-green)}
.workflow-showcase .product-tab:focus-visible{outline:2px solid var(--wf-green);outline-offset:-2px}

/* --- Playback control beneath the feature tabs -------------------------- */
.workflow-showcase .workflow-playback{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding:0 3px;font-size:12.5px;line-height:1.4;color:var(--wf-muted)}
.workflow-showcase .workflow-playback>span{letter-spacing:-.005em}
.workflow-showcase .workflow-play-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:6px 14px;border:1px solid var(--wf-line);border-radius:999px;background:transparent;color:var(--wf-green);font:inherit;font-size:12.5px;font-weight:500;letter-spacing:-.01em;line-height:1;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.workflow-showcase .workflow-play-toggle:hover{background:#eef2ea;border-color:#c9d6c6}
.workflow-showcase .workflow-play-toggle:focus-visible{outline:2px solid var(--wf-green);outline-offset:2px}
.workflow-showcase .workflow-play-toggle:disabled{cursor:default;opacity:.6;background:transparent;border-color:var(--wf-line);color:var(--wf-muted)}

/* --- Scroll reveal for the scene --------------------------------------- */
.workflow-showcase.wf-motion-ready .workflow-scene[data-workflow-reveal="pending"]{opacity:0}
.workflow-showcase .workflow-scene.is-revealed{animation:wf-scene-in .85s var(--wf-ease) both}

/* --- Keyframes ---------------------------------------------------------- */
@keyframes wf-rise{from{opacity:0;transform:translate3d(-10px,18px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes wf-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes wf-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes wf-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wf-slide-x{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes wf-scene-in{from{opacity:0;transform:translate3d(0,22px,0) scale(.99)}to{opacity:1;transform:none}}
@keyframes wf-hist-reveal{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes wf-bar-reveal{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* --- Compact scene and 2x2 tabs at 390px ------------------------------- */
@media (max-width:700px){
  .workflow-showcase .tab-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-top:22px;border:0;border-radius:0;overflow:visible}
  .workflow-showcase .product-tab{padding:0;gap:6px 8px;font-size:12px}
  .workflow-showcase .panel-intro{min-height:116px}
  .workflow-showcase .product-tab .workflow-tab-progress{margin-bottom:6px}
  .workflow-showcase .product-tab:nth-child(3),.workflow-showcase .product-tab:nth-child(4){border-top:0}
  .workflow-showcase .product-tab:nth-child(odd){border-left:0}
  .workflow-showcase .product-tab .workflow-tab-description{font-size:11.5px}
  .workflow-showcase .workflow-playback{margin-top:12px;gap:6px 10px}
  .workflow-showcase .workflow-playback>span{flex:1 1 100%}
  .workflow-showcase .workflow-scene-note{top:-14px;right:2px}
  .workflow-showcase .wf-card{padding:10px 11px;border-radius:10px;font-size:11px}
  .workflow-showcase .wf-review .wf-feedback-card{left:3%;bottom:9%;width:min(240px,68%)}
  .workflow-showcase .wf-onscript .wf-script-card{left:3%;top:12%;width:min(250px,72%)}
  .workflow-showcase .wf-onscript .wf-comment-card{right:3%;bottom:8%;width:min(200px,60%)}
  .workflow-showcase .wf-connector{left:20%;top:32%;width:56%;height:44%}
}

/* --- Reduced motion: readable, static diagrams -------------------------- */
@media (prefers-reduced-motion: reduce){
  .workflow-showcase .workflow-scene[data-workflow-reveal="pending"]{opacity:1!important}
  .workflow-showcase .product-tab .workflow-tab-progress>span{transform:scaleX(0)!important}
  .workflow-showcase .wf-mask-layer{display:none!important}
  .workflow-showcase .workflow-scene,.workflow-showcase .workflow-scene-stage *,.workflow-showcase .wf-mask-layer *{animation:none!important}
}