/* Opening composition. The product illustration uses local HTML and CSS. */
.hero-band{background:#102b25;background-image:radial-gradient(ellipse at 84% 16%,#49634d16,transparent 46%)}
.hero{grid-template-columns:1fr 1fr;gap:88px;padding-block:68px 78px;align-items:center;position:relative}
.hero .eyebrow{font-size:9px;letter-spacing:.065em;gap:13px;margin-bottom:28px;color:#99b5a3}
.launch-badge{display:inline-flex;gap:8px;align-items:center;border:1px solid #4b6452;padding:7px 9px;border-radius:4px;font-size:8px;letter-spacing:.06em;color:#d3e2cb;background:#29433670}
.launch-badge .status-dot{width:5px;height:5px;background:#bdd5b1}
.hero h1{font-weight:600;font-size:clamp(64px,6.1vw,91px);line-height:.99;letter-spacing:-.058em;color:#f1f3ec}
.hero h1 .hero-highlight{color:#c3d7b6;letter-spacing:-.058em;white-space:normal}
.hero-description{font-size:15px;line-height:1.8;max-width:440px;margin-top:26px;color:#aac2ae}
.hero-actions{gap:13px;margin-top:28px;flex-wrap:wrap}
.hero .button-primary{min-height:53px;padding:15px 21px;font-size:12px;background:#c3d7b6;color:#213b28;border:1px solid #c3d7b6;gap:24px;border-radius:5px;box-shadow:0 2px 0 #d5e5c733 inset}
.hero .button-primary:hover{background:#d9e7d0;border-color:#d9e7d0}
.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:19px;border:1px solid #4b6452;min-height:53px;border-radius:5px;padding:15px 19px;font-size:12px;color:#d5e2ce;background:#233c2b45;transition:background .2s,border-color .2s}
.hero-secondary:hover{background:#35533a;border-color:#71886d}
.hero-footnote{font-size:10px;color:#8faf98;margin-top:16px}
.hero-sponsor-link{display:flex;gap:10px;align-items:center;width:fit-content;color:#a4bba0;font-size:10px;line-height:1.5;margin-top:31px;padding-top:20px;border-top:1px solid #35523d}
.hero-sponsor-link .mono{font-size:7px;color:#719179;letter-spacing:.05em;white-space:nowrap}
.hero-sponsor-link:hover{color:#d8e5c7}.hero-sponsor-link>span:last-child{font-size:14px;margin-left:2px}
.hero-product-scene{min-width:0;position:relative;isolation:isolate;padding:10px 0 45px}
.hero-product-scene:before{content:"";position:absolute;inset:-24px -27px 0;background-image:linear-gradient(#63766013 1px,transparent 1px),linear-gradient(90deg,#63766013 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,#000 35%,transparent 72%);z-index:-1}
.scene-overline{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:17px;padding-inline:4px}
.scene-overline>.mono{font-size:8px;color:#779780;letter-spacing:.12em}
.concept-chip{font-size:6px;font-family:var(--mono);color:#89a68d;letter-spacing:.09em;border:1px solid #425e47;border-radius:3px;padding:4px 6px}
.hero-workspace{background:#eaf0e1;border:1px solid #8a9e7a;border-radius:9px;box-shadow:0 30px 50px #021a1440;transform:rotate(-1.5deg);overflow:hidden;color:#37502c}
.hero-workspace-top{background:#f0f4e9;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 22px;border-bottom:1px solid #ccd9bf}
.workspace-mini-brand{font-size:17px;font-weight:600;letter-spacing:-.8px;display:flex;align-items:center;gap:6px;color:#24432a}
.workspace-preview-label{font-size:8px;font-family:var(--mono);color:#7a9168;display:flex;gap:6px;align-items:center}
.workspace-preview-label>span{width:5px;height:5px;background:#8caa71;border-radius:50%}
.hero-workspace-content{padding:25px 22px 20px}
.workspace-intro>.mono{font-size:7px;letter-spacing:.07em;color:#7c916b}
.workspace-intro h2{font-size:26px;letter-spacing:-1px;font-weight:500;line-height:1.15;margin-top:10px;color:#3c582f}
.workspace-intro p{font-size:10px;line-height:1.7;color:#7c906d;margin-top:9px}
.hero-showcase{margin-top:21px;background:#fbfcf7;border:1px solid #c9d7ba;border-radius:5px;overflow:hidden}
.showcase-art{height:183px;position:relative;display:flex;align-items:center;justify-content:center;background:#b9cc9f;overflow:hidden}
.showcase-art:before{content:"";position:absolute;width:300px;height:300px;left:-95px;top:-123px;border:1px solid #a6bd8d;border-radius:50%}
.showcase-art:after{content:"";position:absolute;width:255px;height:255px;right:-95px;bottom:-140px;border:1px solid #a6bd8d;border-radius:50%}
.showcase-browser{width:78%;max-width:337px;transform:rotate(5deg);background:#f4f6e9;border:1px solid #8ca473;border-radius:5px;overflow:hidden;box-shadow:0 14px 20px #54733e20;z-index:1}
.showcase-browser-top{height:21px;background:#e4ecd6;border-bottom:1px solid #d1dfbd;padding-inline:9px;display:flex;align-items:center;gap:4px}
.showcase-browser-top>span{width:3px;height:3px;background:#a0b487;border-radius:50%}
.showcase-browser-top>i{font-style:normal;font-family:var(--mono);font-size:5px;color:#8fa277;margin:auto;transform:translateX(-10px)}
.showcase-app{display:flex;min-height:121px}
.showcase-app-sidebar{width:39px;border-right:1px solid #dce5ce;padding:9px;background:#edf2e1}
.showcase-app-sidebar b{font-size:19px;letter-spacing:-2px;color:#788f5a;line-height:1;display:block;margin-bottom:14px}
.showcase-app-sidebar i{display:block;height:3px;border-radius:1px;background:#d2debd;margin:9px 0;width:90%}
.showcase-app-body{flex:1;min-width:0;padding:13px 16px}
.showcase-app-body>span{display:block;font-family:var(--mono);font-size:5px;letter-spacing:.07em;color:#9aae83}
.showcase-app-body>strong{display:block;font-size:24px;letter-spacing:-.9px;font-weight:500;line-height:1.05;margin-top:8px;color:#647e47}
.showcase-app-cards{display:flex;gap:6px;margin-top:10px}
.showcase-app-cards>i{height:16px;flex:1;border:1px solid #d1dfba;background:#e6edd8;border-radius:2px}
.showcase-app-cards>i:nth-child(2){background:#dce8c9}.showcase-app-cards>i:last-child{background:#cbdcb3}
.showcase-art-index{position:absolute;bottom:11px;left:14px;color:#6f8950;font-family:var(--mono);font-size:5px;letter-spacing:.09em}
.showcase-description{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:16px}
.showcase-description .mono{font-size:6px;color:#899c72;letter-spacing:.04em}
.showcase-description h3{font-size:19px;font-weight:500;color:#56713d;letter-spacing:-.6px;line-height:1.3;margin-top:5px}
.showcase-description h3>span{font-size:12px;color:#a2b989;margin-left:9px}
.showcase-description p{font-size:8px;line-height:1.7;color:#8a9c77;margin-top:5px}
.showcase-stack{font-size:6px;font-family:var(--mono);color:#8a9f72;white-space:nowrap;padding-bottom:2px}
.hero-workspace-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hero-workspace-actions a{display:flex;align-items:center;gap:7px;border:1px solid #c9d8b8;background:#e2ebd5;padding:11px 10px;border-radius:3px;color:#718959;font-size:8px;transition:background .2s}
.hero-workspace-actions a:hover{background:#d4e3c3;color:#435f2e}
.workspace-action-icon{font-family:var(--mono);font-size:12px;color:#8fa776;flex:none}.hero-workspace-actions a>span:last-child{margin-left:auto;font-size:11px}
.hero-workspace-footer{font-family:var(--mono);font-size:6px;line-height:1.7;color:#82996b;border-top:1px solid #ccd9bf;display:flex;align-items:center;gap:6px;padding:11px 22px;background:#e4ecd9}
.hero-workspace-footer .tiny-square{background:#96af7b}
.hero-learning-card{display:flex;align-items:center;gap:13px;position:absolute;bottom:27px;left:-36px;right:50px;z-index:2;padding:17px 19px;background:#29452d;border:1px solid #77936c;border-radius:6px;box-shadow:0 15px 24px #041a1150;transform:rotate(1.5deg)}
.hero-learning-card:hover{background:#355138;border-color:#9eb48c}
.learning-note-icon{font-family:var(--mono);font-size:24px;color:#bbd3a3;background:#3b5738;border:1px solid #607e4f;display:grid;place-items:center;width:43px;height:43px;border-radius:5px;flex:none}
.hero-learning-card .mono{display:block;color:#8da978;font-size:6px;letter-spacing:.12em}
.hero-learning-card strong{display:block;color:#d2e3be;font-size:13px;font-weight:500;letter-spacing:-.2px;line-height:1.5;margin-top:3px}
.learning-note-caption{display:block;font-size:8px;color:#8eab7a;margin-top:3px;line-height:1.5}
.learning-note-arrow{margin-left:auto;color:#9ab681;font-size:18px;flex:none}
.hero-scene-caption{display:flex;align-items:center;justify-content:flex-end;gap:10px;position:absolute;bottom:0;right:5px}
.scene-caption-line{height:1px;width:25px;background:#426248}
.hero-scene-caption .mono{font-size:6px;letter-spacing:.1em;color:#658770}
.studio-caption{border-top:1px solid #3a5540;padding-top:27px;margin-bottom:23px}.studio-caption h2{font-size:22px;letter-spacing:-.04em;color:#c3d7b6}.caption-index{font-size:8px}.preview-disclosure{font-size:9px;color:#94b297;border-color:#3d5a42}
@media(min-width:1600px){.hero.container{width:min(1400px,calc(100% - 128px))}.hero{grid-template-columns:1.15fr 1fr;gap:115px;padding-block:78px 82px}.hero h1{font-size:102px}.hero-description{font-size:16px;max-width:460px}.hero-workspace-content{padding:29px 26px 24px}.hero-workspace-top{padding-inline:26px}.showcase-art{height:202px}.showcase-browser{max-width:367px}.showcase-app{min-height:138px}.showcase-app-body{padding:17px 18px}.showcase-app-body>strong{font-size:29px}.hero-workspace-actions a{font-size:9px;padding:12px}.showcase-description{padding:18px}.workspace-intro h2{font-size:29px}.hero-learning-card{bottom:28px;left:-42px;right:65px;padding:19px 22px}.hero-learning-card strong{font-size:14px}}
@media(max-width:1200px){.hero{gap:61px;padding-block:59px 66px}.hero h1{font-size:7.3vw}.hero .eyebrow{font-size:7px;gap:10px}.launch-badge{font-size:7px}.hero-description{font-size:14px;max-width:400px}.hero .button-primary{font-size:11px;padding:14px 17px;gap:18px}.hero-secondary{font-size:11px;padding:14px 16px;gap:12px}.hero-actions{gap:10px}.hero-sponsor-link{font-size:9px;gap:8px}.hero-workspace-content{padding:22px 19px 19px}.hero-workspace-top{padding-inline:19px}.workspace-intro h2{font-size:24px}.showcase-art{height:166px}.showcase-description{padding:14px}.showcase-description h3{font-size:17px}.showcase-stack{font-size:5px}.hero-workspace-actions a{font-size:7px;gap:6px;padding:10px 8px}.hero-learning-card{left:-25px;right:28px;bottom:26px;padding:15px}.hero-learning-card strong{font-size:12px}.learning-note-icon{width:37px;height:37px;font-size:20px}}
@media(max-width:1000px){.hero{gap:41px}.hero h1{font-size:7.5vw}.hero-sponsor-link{flex-wrap:wrap;max-width:330px;row-gap:5px;margin-top:26px}.hero-sponsor-link .mono{flex-basis:100%}.hero-product-scene{padding-bottom:42px}.scene-overline>.mono{font-size:6px}.concept-chip{font-size:5px}.workspace-mini-brand{font-size:15px}.workspace-preview-label{font-size:7px}.hero-workspace-top{padding:13px 16px}.hero-workspace-content{padding:21px 16px 17px}.workspace-intro h2{font-size:21px}.workspace-intro>.mono{font-size:6px}.workspace-intro p{font-size:9px}.showcase-art{height:145px}.showcase-browser{width:80%}.showcase-app-body{padding:12px}.showcase-app-body>strong{font-size:21px}.showcase-app-sidebar{width:30px;padding:7px}.showcase-app{min-height:111px}.showcase-description h3{font-size:15px}.showcase-stack{display:none}.hero-workspace-actions{gap:6px}.hero-workspace-actions a{font-size:6px;padding:9px 7px}.workspace-action-icon{font-size:10px}.hero-workspace-footer{font-size:5px;padding:10px 16px}.hero-learning-card{left:-19px;right:13px;padding:13px 14px;gap:10px}.hero-learning-card strong{font-size:11px}.learning-note-caption{font-size:7px}.learning-note-icon{width:34px;height:34px;font-size:17px}.hero .eyebrow{flex-wrap:wrap;row-gap:9px}.hero-description{font-size:13px}.hero-actions{gap:10px}.hero .button-primary,.hero-secondary{font-size:10px;min-height:49px;padding:13px 14px;gap:12px}.hero-footnote{font-size:9px}}
@media(max-width:800px){.hero{grid-template-columns:1.15fr 1fr;gap:32px;padding-block:50px 58px}.hero h1{font-size:8.3vw}.hero-secondary{width:fit-content;min-height:0!important;border:0;background:none;padding:5px 0!important;font-size:11px!important;gap:17px!important}.hero-actions{align-items:start;flex-direction:column;gap:14px}.hero-secondary:hover{background:transparent;color:#d5e3bd}.hero .button-primary{font-size:11px;padding:13px 17px}.hero-description{font-size:13px}.hero-product-scene{padding-top:0}.scene-overline .concept-chip{display:none}.workspace-intro h2{font-size:19px}.hero-workspace-actions{grid-template-columns:1fr}.hero-workspace-actions a{font-size:8px;padding:9px}.hero-workspace-actions a:last-child{display:none}.showcase-art{height:140px}.showcase-browser{width:85%}.showcase-app-body>strong{font-size:19px}.showcase-description{padding:11px}.showcase-description p{font-size:7px}.hero-learning-card{left:-17px;right:0;padding:13px 12px;gap:9px}.learning-note-icon{width:30px;height:30px;font-size:15px}.hero-learning-card strong{font-size:10px}.learning-note-caption{font-size:6px}.hero-learning-card .mono{font-size:5px}.hero-workspace-footer{font-size:4px;line-height:1.7}.hero-sponsor-link{font-size:8px}.hero-scene-caption .mono{font-size:5px}.studio-caption h2{font-size:20px}}
@media(max-width:680px){.hero{grid-template-columns:1fr;gap:38px;padding-block:34px 42px}.hero .eyebrow{font-size:7px;gap:10px;row-gap:10px;margin-bottom:25px}.launch-badge{font-size:6px;padding:6px 8px}.hero h1{font-size:clamp(54px,15.6vw,82px);line-height:1.01;letter-spacing:-.055em}.hero h1 .hero-highlight{letter-spacing:-.055em}.hero-description{font-size:13px;line-height:1.85;max-width:400px;margin-top:23px}.hero-actions{flex-direction:row;align-items:center;gap:20px;margin-top:24px}.hero .button-primary{font-size:11px;min-height:49px;padding:13px 16px;gap:16px}.hero-secondary{font-size:10px!important;gap:7px!important;padding:10px 0!important}.hero-footnote{font-size:9px;margin-top:14px}.hero-sponsor-link{margin-top:24px;font-size:9px;max-width:none;gap:8px;padding-top:17px;flex-wrap:wrap}.hero-sponsor-link .mono{flex-basis:auto;font-size:6px}.hero-sponsor-link>span:last-child{font-size:12px;margin-left:0}.hero-product-scene{max-width:480px;width:100%;margin-inline:auto;padding:0 5px 52px}.scene-overline{margin-bottom:15px;padding-inline:2px}.scene-overline>.mono{font-size:7px}.scene-overline .concept-chip{display:inline-block;font-size:5px}.hero-workspace{transform:rotate(-1deg)}.hero-workspace-top{padding:14px 17px}.workspace-mini-brand{font-size:17px}.workspace-preview-label{font-size:7px}.hero-workspace-content{padding:22px 17px 17px}.workspace-intro>.mono{font-size:6px}.workspace-intro h2{font-size:23px}.workspace-intro p{font-size:9px}.showcase-art{height:161px}.showcase-browser{width:82%;max-width:280px}.showcase-app{min-height:114px}.showcase-app-body{padding:13px 15px}.showcase-app-body>strong{font-size:24px}.showcase-app-sidebar{width:32px}.showcase-art-index{font-size:4px}.showcase-description{padding:14px}.showcase-description h3{font-size:17px}.showcase-description p{font-size:8px}.showcase-stack{display:block;font-size:5px}.hero-workspace-actions{grid-template-columns:1fr 1fr;gap:8px}.hero-workspace-actions a{font-size:7px;padding:10px 8px;gap:5px}.hero-workspace-actions a:last-child{display:flex}.workspace-action-icon{font-size:10px}.hero-workspace-footer{font-size:5px;line-height:1.7;padding:10px 17px}.hero-learning-card{left:0;right:26px;bottom:31px;padding:14px 16px;gap:11px}.learning-note-icon{width:35px;height:35px;font-size:18px}.hero-learning-card .mono{font-size:5px}.hero-learning-card strong{font-size:11px}.learning-note-caption{font-size:7px}.learning-note-arrow{font-size:15px}.hero-scene-caption{bottom:3px;right:7px}.hero-scene-caption .mono{font-size:5px}.studio-caption{padding-top:23px;gap:12px}.studio-caption h2{font-size:20px;line-height:1.2;max-width:310px}.preview-disclosure{font-size:8px}.caption-index{font-size:7px}}
@media(max-width:360px){.hero{padding-top:29px}.hero h1{font-size:53px}.hero .eyebrow{font-size:6px;gap:8px}.hero .button-primary{font-size:10px;padding:12px 13px;gap:12px}.hero-actions{gap:16px}.hero-secondary{font-size:9px!important}.hero-sponsor-link .mono{flex-basis:100%}.hero-product-scene{padding-inline:2px}.hero-workspace-content{padding:19px 14px 15px}.workspace-intro h2{font-size:21px}.workspace-intro p{font-size:8px}.showcase-art{height:143px}.showcase-app-body>strong{font-size:21px}.showcase-stack{display:none}.hero-workspace-actions a{font-size:6px;padding:9px 7px}.hero-workspace-footer{padding-inline:14px;font-size:4px}.hero-learning-card{padding:12px;right:17px;gap:9px}.hero-learning-card strong{font-size:10px}.learning-note-caption{font-size:6px}}
@media(prefers-reduced-motion:reduce){.hero-secondary,.hero-workspace-actions a{transition:none}}
/* Keep the floating learning preview clear of the workspace controls. */
.hero-product-scene{padding-bottom:100px}.hero-learning-card{bottom:18px;padding:13px 18px}.learning-note-icon{width:35px;height:35px;font-size:20px}.hero-scene-caption{bottom:-3px}
@media(min-width:1600px){.showcase-art{height:180px}.hero-learning-card strong{font-size:13px}}
@media(max-width:680px){.hero-product-scene{padding-bottom:91px}.hero-learning-card{bottom:17px;padding:12px 15px}.learning-note-icon{width:32px;height:32px;font-size:18px}.hero-scene-caption{bottom:-1px}}
.preview-disclosure{max-width:390px;white-space:normal;line-height:1.7}
@media(max-width:680px){.preview-disclosure{max-width:100%}}