@font-face{font-family:Instrument Sans;src:url(assets/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Instrument Serif;src:url(assets/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Instrument Serif;src:url(assets/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--paper:#f5f3ed;--ink:#232b25;--muted:#63685f;--green:#244b36;--sage:#dce5d9;--line:#d9dcd1;--sc-canvas:var(--paper);--sc-ink:var(--ink);--sc-font-display:"Instrument Sans",sans-serif;--sc-font-text:"Instrument Sans",sans-serif;--sc-section:100px;--sc-gutter:32px;--sc-surface:#eaece3;--sc-ink-soft:var(--muted);--sc-accent:var(--green);--sc-accent-ink:#fff;scroll-behavior:smooth;scroll-padding-top:32px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #68976f;outline-offset:6px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:500;line-height:1.08;text-wrap:balance}p{text-wrap:pretty}em{font-family:"Instrument Serif",Georgia,serif;font-weight:400}button{border:0}::selection{background:#c8dac3;color:#173321}.wrap{width:min(1264px,calc(100% - 112px));margin-inline:auto}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-80px;left:20px;padding:12px 20px;background:var(--ink);color:#fff;z-index:100}.skip-link:focus{top:10px}.section-space{padding-block:112px}.tiny-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:600}
.masthead{height:114px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:9px;font-size:35px;font-weight:600;letter-spacing:-1.8px;line-height:1}.orbit-mark{display:block;position:relative;width:27px;height:27px;border:1.8px solid currentColor;border-radius:50%;transform:rotate(-32deg);flex-shrink:0}.orbit-mark:after{content:"";position:absolute;inset:6px -6px;border:1.4px solid currentColor;border-radius:50%}.mac-tag{font-size:11px;letter-spacing:0;font-weight:400;padding:6px 9px;border:1px solid #d1d5c9;border-radius:5px;margin-left:10px;line-height:1}.masthead nav{display:flex;gap:34px;font-size:14px}.masthead nav a:hover{text-decoration:underline;text-underline-offset:6px}.header-cta{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:600}.header-cta svg{width:18px}
.hero{position:relative;padding-top:52px;padding-bottom:65px}.hero-top{display:flex;align-items:start;justify-content:space-between;margin-bottom:33px}.availability{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.02em}.availability i{width:7px;height:7px;border-radius:50%;background:#54774b}.hero-side{text-align:right;font-size:12px;line-height:1.5;color:var(--muted);position:absolute;top:52px;right:0}h1 .availability{line-height:1.5;font-weight:400}h1{font-size:clamp(64px,7.8vw,112px);letter-spacing:-.062em;line-height:1.02}h1 em{display:inline-block;color:var(--green);letter-spacing:-.032em;font-size:1.1em}.hero-bottom{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-top:40px}.hero-bottom p{font-size:16px;line-height:1.7;max-width:540px;color:var(--muted)}.hero-actions{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0}.button{display:inline-flex;justify-content:center;align-items:center;gap:27px;padding:16px 23px;font-size:14px;font-weight:500;line-height:1.4;border-radius:6px;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--green);color:#fff}.primary:hover{background:#183b28}.hero-actions>span{font-size:11px;color:var(--muted)}
.workspace-section{background:var(--sage);padding:35px 0 40px;overflow:clip}.workspace-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:26px}.account-dots{display:flex;padding-right:2px}.account-dots i{font-style:normal;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#376a55;color:#fff;border:2px solid var(--sage);font-size:10px;margin-left:-4px}.account-dots i:nth-child(2){background:#b78766}.account-dots i:nth-child(3){background:#817797}.app-figure{position:relative}.screenshot-frame{overflow:hidden;border-radius:10px;background:#eff2ec;box-shadow:0 22px 55px -25px #344c4547;border:1px solid #aebaaa;padding-top:28px;position:relative}.screenshot-frame:before{content:"";position:absolute;top:11px;left:14px;width:7px;height:7px;background:#c1c8bc;border-radius:50%;box-shadow:13px 0 #c1c8bc,26px 0 #c1c8bc}.screenshot-frame:after{content:"Orbit · Sample workspace";position:absolute;top:5px;left:50%;transform:translateX(-50%);font-size:10px;color:#626e5f}.screenshot-frame img{display:block;width:100%;height:auto}.app-figure figcaption{display:flex;justify-content:space-between;font-size:10px;margin-top:13px;color:#4e604e}.workspace-caption{display:flex;justify-content:space-between;align-items:end;margin-top:43px}.workspace-caption>p{font-size:28px;line-height:1.2;letter-spacing:-.03em}.workspace-caption>p>span{color:#596e57}.native-note{font-size:11px;display:flex;align-items:center;gap:9px}.native-note svg{width:17px}
.section-intro{display:flex;align-items:end;justify-content:space-between;gap:70px;margin-bottom:58px}.section-intro h2,h2{font-size:clamp(40px,4.5vw,62px);letter-spacing:-.045em}.section-intro h2 em{letter-spacing:-.018em}.section-intro>p{font-size:15px;line-height:1.7;color:var(--muted);max-width:355px}.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.benefit-grid article{min-width:0}.benefit-grid h3{font-size:20px;letter-spacing:-.025em;margin:25px 0 13px}.benefit-grid p{font-size:14px;line-height:1.8;color:var(--muted)}.mini-identities,.mini-search,.mini-privacy{height:128px;background:#e9ece3;border:1px solid #e0e4d9;border-radius:8px;display:flex;align-items:center;padding:22px;position:relative}.mini-identities{gap:9px;justify-content:center}.mini-identities>span{padding:9px 11px;border-radius:5px;background:#fff;font-size:11px;box-shadow:0 3px 8px #334b3210}.mini-identities b{display:block;font-size:9px;font-weight:400;color:#71826b;margin-top:3px}.mini-identities>span:nth-child(2){background:#294e38;color:#fff;transform:translateY(-8px)}.mini-identities>span:nth-child(2) b{color:#c3d6be}.mini-search{gap:8px}.mini-search svg{width:18px}.mini-search>span{font-size:11px;color:#66715f}.mini-search kbd{margin-left:auto;background:#f9faf6;font-family:inherit;font-size:10px;border:1px solid #d7ddcf;border-radius:4px;padding:4px 7px;white-space:nowrap}.mini-privacy{gap:10px}.mini-privacy svg{width:25px;color:#526f46}.mini-privacy>span{font-size:11px;line-height:1.6}.mini-privacy strong{display:block;font-size:11px;font-weight:500}.mini-privacy .toggle{width:29px;height:17px;background:#335a40;border-radius:20px;margin-left:auto}.toggle:after{content:"";display:block;width:11px;height:11px;background:#fff;border-radius:50%;margin:3px 3px 3px auto}
.quiet-band{padding:68px 0 73px;background:#eceee6;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.quiet-band .tiny-label{color:#526248;margin-bottom:22px}.quiet-band p{font-size:clamp(29px,3.25vw,45px);letter-spacing:-.035em;line-height:1.2}.quiet-band em{color:#526248}.quiet-footnote{display:block;font-size:12px;color:var(--muted);margin-top:25px}
.assistant-section{background:#202d27;color:#f3f4ea;position:relative}.assistant-intro{align-items:end;margin-bottom:52px}.assistant-intro h2{font-size:clamp(38px,4.5vw,62px)}.assistant-intro .tiny-label{color:#a8b9a1;margin-bottom:20px}.assistant-intro>p{color:#c0cabc;max-width:340px;line-height:1.8}.assistant-intro em{color:#c5d6b4}.demo{border:1px solid #65725c;border-radius:12px;overflow:hidden;background:#f6f5ef;color:var(--ink);box-shadow:0 25px 65px -40px #0a150a}.demo-top{height:64px;padding:0 26px;border-bottom:1px solid #dcdfd3;display:flex;justify-content:space-between;align-items:center;background:#eeefe8}.demo-top>span:first-child{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}.demo-top svg{width:18px}.sample-badge{font-size:10px;padding:4px 8px;border:1px solid #cbd2c3;border-radius:4px;color:#5b6756}.demo-columns{display:grid;grid-template-columns:1.25fr 1fr}.assistant-chat{padding:34px;min-height:530px;display:flex;flex-direction:column}.user-bubble{background:#e5e9de;padding:17px 20px;border-radius:15px 15px 2px 15px;font-size:13px;line-height:1.7;margin-left:42px}.assistant-answer{display:flex;gap:13px;margin-top:32px}.assistant-avatar{display:grid;place-items:center;border:1px solid #cbd4c1;border-radius:50%;flex:none;width:30px;height:30px;font-size:23px}.assistant-answer>div{flex:1;min-width:0}.assistant-answer strong{font-size:12px;font-weight:600}.assistant-answer p{font-size:13px;line-height:1.8;margin-top:10px;color:#596451;min-height:72px}.assistant-result{background:#eeefe8;border:1px solid #d8dfcf;border-radius:6px;padding:15px 17px;display:flex;flex-direction:column;gap:6px;margin-top:17px;min-height:110px}.assistant-result .result-label{text-transform:uppercase;letter-spacing:.09em;font-size:9px;color:#546749}.assistant-result strong{font-size:13px;line-height:1.6}.assistant-result>span:last-child{font-size:11px;color:#5e6856;line-height:1.65}.demo-controls{display:flex;gap:18px;align-items:center;margin-top:auto;padding-top:25px}.demo-next{background:var(--green);color:#fff;font-size:12px;padding:12px 15px;gap:12px;min-height:44px}.demo-next svg{width:17px}.reset-button{font-size:11px;white-space:nowrap;background:none;color:#58634f;padding:10px 0;min-height:44px}.reset-button:hover{text-decoration:underline}.demo-hint{font-size:10px;color:#62705c;margin-top:12px;min-height:32px}.tool-panel{background:#e9ede2;border-left:1px solid #d8dfcf;padding:30px}.tool-panel-heading{display:flex;align-items:center;gap:10px;font-size:13px;padding-bottom:21px;border-bottom:1px solid #ced7c3}.orbit-mark.small{width:17px;height:17px}.small:after{inset:4px -4px}.local-badge{margin-left:auto;font-size:9px;color:#516345;border:1px solid #c4d0bb;border-radius:4px;padding:2px 6px}.tool-steps{list-style:none;padding:24px 0 0;margin:0;display:flex;flex-direction:column;gap:21px}.tool-steps li{display:flex;gap:15px;align-items:start;opacity:.46;transition:opacity .3s}.tool-steps li.active,.tool-steps li.done{opacity:1}.step-dot{width:22px;height:22px;border:1px solid #91a47f;border-radius:50%;display:grid;place-items:center;font-size:10px;flex:none}.active .step-dot,.done .step-dot{background:#31553c;border-color:#31553c;color:#fff}.tool-steps li>div{display:flex;flex-direction:column;gap:5px}.tool-steps strong{font-size:12px;font-weight:600}.tool-steps li>div>span{font-size:11px;line-height:1.5}.tool-steps code{font-family:inherit;font-size:10px;color:#536e42;line-height:1.5;overflow-wrap:anywhere}.permission-note{border-top:1px solid #ced7c3;padding-top:20px;margin-top:24px;display:flex;align-items:start;gap:10px;color:#526745}.permission-note p{font-size:11px;line-height:1.7}.permission-note svg{width:18px}.demo-disclosure{font-size:11px;color:#b5c2ae;max-width:850px;margin:19px 0 0;line-height:1.9}.demo-disclosure a{text-decoration:underline;text-underline-offset:3px}.mcp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:50px}.mcp-benefits p{position:relative;padding-left:35px;display:flex;flex-direction:column;gap:7px}.mcp-benefits svg{position:absolute;left:0;top:2px;width:20px;color:#bccfa9}.mcp-benefits strong{font-size:13px;font-weight:500}.mcp-benefits span{color:#b7c4b0;font-size:12px}.noscript-note{padding:20px;font-size:13px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:60px;row-gap:42px}.detail-grid article{border-top:1px solid #d1d6c8;padding-top:22px;position:relative}.detail-grid article>span{font-size:28px;color:#476c38;display:block;line-height:1;margin-bottom:19px}.detail-grid h3{font-size:18px;letter-spacing:-.025em;margin-bottom:12px}.detail-grid p{font-size:13px;line-height:1.85;color:var(--muted)}
.pricing-section{background:#eceee6;border-block:1px solid var(--line)}.pricing-heading{text-align:center;margin-bottom:50px}.pricing-heading .tiny-label{color:#566a4d;margin-bottom:23px}.pricing-heading h2{font-size:clamp(40px,4.7vw,67px)}.pricing-heading p{font-size:15px;color:var(--muted);margin-top:22px}.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #cbd2c3;border-radius:9px;overflow:hidden;background:#f7f7f1}.plan{padding:25px 20px 22px;border-right:1px solid #d4dacb;min-width:0;display:flex;flex-direction:column}.plan:last-child{border-right:0}.plan-name{font-size:12px;font-weight:500;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:26px}.recommendation{font-size:8px;color:#c7dbb7;border:1px solid #638261;border-radius:3px;padding:1px 4px}.plan h3{font-size:13px;letter-spacing:-.025em;margin-top:14px}.price{font-size:36px;letter-spacing:-.06em;line-height:1.2;margin-top:28px;white-space:nowrap;font-variant-numeric:tabular-nums}.price>span{font-size:10px;letter-spacing:0;margin-left:3px;color:var(--muted)}.account-limit{font-size:12px;margin-top:12px;margin-bottom:30px}.plan-cta{display:flex;justify-content:space-between;align-items:center;border:1px solid #c5cfbb;border-radius:5px;font-size:11px;min-height:43px;padding:10px 12px}.plan-cta:hover{background:#e2e9d9}.plan-cta>span{font-size:17px}.plan-for{font-size:11px;color:var(--muted);margin-top:16px;line-height:1.8}.plan.featured{background:#2b4c37;color:#f6f7ec}.featured .price>span,.featured .plan-for{color:#f0f4ea}.featured .plan-cta{background:#dae7ce;border-color:#dae7ce;color:#213b29}.featured .plan-cta:hover{background:#f3f7eb}.pricing-note{font-size:10px;color:#5e6d54;max-width:830px;margin:22px auto 0;text-align:center;line-height:1.9}
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:100px}.faq h2{font-size:54px}.faq-list{border-top:1px solid #cfd6c6}.faq details{border-bottom:1px solid #cfd6c6}.faq summary{list-style:none;padding:23px 0;font-size:14px;cursor:pointer;display:flex;gap:15px;justify-content:space-between;align-items:center;line-height:1.6}.faq summary::-webkit-details-marker{display:none}.faq summary>span{font-size:22px;color:#607253;font-weight:400;flex:none}.faq details[open] summary>span{transform:rotate(45deg)}.faq details>p{font-size:13px;color:var(--muted);padding:0 28px 24px 0;line-height:1.85}.closing{background:#d9e4d2;padding:65px 0}.closing>.wrap{display:flex;align-items:center;gap:42px}.closing-mark{width:62px;height:62px;color:#45603c;border-width:2px}.closing-mark:after{inset:15px -12px;border-width:2px}.closing h2{font-size:48px}.closing p{font-size:13px;margin-top:17px;color:#516447}.closing .button{margin-left:auto;flex:none}.light{background:#f5f6ee;color:#294832}.light:hover{background:#fff}footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:40px}footer .wordmark{font-size:30px}footer p{font-size:10px;color:var(--muted);line-height:1.8}footer>span{font-size:10px;color:var(--muted)}
dialog{border:1px solid #cbd4c2;border-radius:14px;padding:40px;width:min(480px,calc(100% - 32px));background:var(--paper);color:var(--ink);box-shadow:0 30px 90px #172b2440}dialog::backdrop{background:#172b2480;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:14px;top:9px;font-size:28px;background:none;color:var(--ink);width:44px;height:44px}.dialog-close:hover{background:#e3e9dc;border-radius:50%}dialog>img{border-radius:14px;margin-bottom:24px}dialog .tiny-label{font-size:10px;color:#526b44}dialog h2{font-size:35px;line-height:1.15;margin-top:14px}dialog p{font-size:13px;line-height:1.8;color:var(--muted);margin-top:20px}dialog form{margin-top:27px}dialog .button{width:100%}
@media(min-width:1800px){.wrap{width:min(1440px,calc(100% - 160px))}h1{font-size:130px}}
@media(max-width:1100px){.wrap{width:calc(100% - 72px)}.masthead nav{gap:24px}.section-intro{gap:35px}.benefit-grid{gap:24px}.mini-identities,.mini-search,.mini-privacy{padding:14px}.mini-identities{gap:6px}.mini-identities>span{padding:8px}.demo-columns{grid-template-columns:1.1fr 1fr}.assistant-chat{padding:24px}.tool-panel{padding:24px}.demo-controls{gap:12px;flex-wrap:wrap}.plan{padding:22px 13px}.price{font-size:29px}.price>span{font-size:9px}.recommendation{font-size:7px}.plan h3{font-size:12px}.faq{gap:55px}.closing h2{font-size:42px}.closing>.wrap{gap:35px}}
@media(max-width:760px){:root{scroll-padding-top:20px}.wrap{width:calc(100% - 40px)}.section-space{padding-block:65px}.masthead{height:83px}.wordmark{font-size:29px;gap:8px}.orbit-mark{width:23px;height:23px}.mac-tag{font-size:9px;margin-left:5px;padding:4px 6px}.masthead nav{display:none}.header-cta{font-size:12px;gap:7px}.header-cta svg{width:16px}.hero{padding-top:32px;padding-bottom:37px}.hero-top{margin-bottom:29px}.availability{font-size:10px}.hero-side{display:none}h1{font-size:clamp(43px,8.9vw,66px);letter-spacing:-.06em;line-height:1.07}h1 em{font-size:1.17em;letter-spacing:-.035em}.hero-bottom{display:block;margin-top:27px}.hero-bottom p{font-size:14px;line-height:1.75;max-width:450px}.desktop-break{display:none}.hero-actions{align-items:start;margin-top:25px;gap:9px}.button{padding:15px 19px;font-size:13px;gap:26px}.hero-actions>span{font-size:10px}.workspace-section{padding-top:24px;padding-bottom:29px}.workspace-label{font-size:10px;margin-bottom:22px}.account-dots i{width:23px;height:23px;font-size:9px}.app-figure{width:calc(100% - 24px)}.screenshot-frame{padding-top:21px;border-radius:6px}.screenshot-frame:before{width:5px;height:5px;left:9px;top:8px;box-shadow:9px 0 #c1c8bc,18px 0 #c1c8bc}.screenshot-frame:after{font-size:8px;top:3px}.app-figure figcaption{display:block;font-size:9px;margin-top:10px;padding-inline:8px}.app-figure figcaption>span:last-child{display:none}.workspace-caption{margin-top:28px;gap:20px}.workspace-caption>p{font-size:24px}.native-note{font-size:9px;max-width:115px;gap:6px;line-height:1.6}.native-note svg{width:16px}.section-intro{display:block;margin-bottom:34px}.section-intro h2,h2{font-size:40px}.section-intro>p{max-width:440px;margin-top:24px;font-size:14px;line-height:1.8}.benefit-grid{grid-template-columns:1fr;gap:33px}.benefit-grid article{display:grid;grid-template-columns:1fr 1.3fr;column-gap:20px;align-items:center}.benefit-grid h3{font-size:18px;grid-column:2;margin:0 0 10px}.benefit-grid p{font-size:12px;line-height:1.8;grid-column:2}.mini-identities,.mini-search,.mini-privacy{grid-column:1;grid-row:1/3;height:100%;min-height:145px;padding:14px;flex-direction:column;justify-content:center;gap:8px}.mini-identities>span{font-size:10px;padding:5px 10px;width:100%;max-width:100px}.mini-identities b{display:none}.mini-identities>span:nth-child(2){transform:translateX(6px)}.mini-search>span{text-align:center;font-size:10px;max-width:100px}.mini-search kbd{margin:0}.mini-privacy>span{text-align:center;font-size:9px}.mini-privacy strong{font-size:10px}.mini-privacy .toggle{margin:0}.quiet-band{padding:45px 0}.quiet-band .tiny-label{font-size:10px;margin-bottom:20px}.quiet-band p{font-size:29px;line-height:1.2}.quiet-footnote{font-size:11px;line-height:1.8;max-width:320px}.assistant-intro .tiny-label{font-size:10px}.assistant-intro h2{font-size:38px}.assistant-intro>p{font-size:13px}.demo-top{padding:0 15px;height:58px;gap:10px}.demo-top>span:first-child{font-size:11px;gap:6px}.demo-top svg{width:15px}.sample-badge{font-size:8px;padding:4px}.demo-columns{grid-template-columns:1fr}.assistant-chat{padding:22px 18px;min-height:460px}.user-bubble{font-size:12px;margin-left:24px;padding:14px 15px}.assistant-answer{gap:10px;margin-top:25px}.assistant-avatar{width:26px;height:26px;font-size:20px}.assistant-answer p{font-size:12px;min-height:65px}.assistant-result{min-height:112px;padding:12px}.assistant-result strong{font-size:12px}.demo-controls{gap:15px;padding-top:22px}.demo-next{font-size:11px;padding:12px;gap:9px}.demo-hint{font-size:9px;min-height:31px}.tool-panel{border-left:0;border-top:1px solid #d1dac7;padding:22px}.tool-steps{display:grid;grid-template-columns:1fr 1fr;gap:22px 15px}.tool-steps li{gap:8px}.tool-steps strong{font-size:11px}.tool-steps li>div>span{font-size:10px}.tool-steps code{font-size:8px}.step-dot{width:19px;height:19px;font-size:9px}.permission-note{padding-top:17px;margin-top:20px}.permission-note p{font-size:10px}.demo-disclosure{font-size:10px;line-height:1.85}.mcp-benefits{grid-template-columns:1fr;gap:23px;margin-top:32px}.mcp-benefits p{gap:4px}.mcp-benefits strong{font-size:12px}.mcp-benefits span{font-size:11px}.detail-grid{grid-template-columns:1fr 1fr;gap:30px 22px}.detail-grid article{padding-top:20px}.detail-grid h3{font-size:16px;line-height:1.25}.detail-grid p{font-size:12px;line-height:1.8}.detail-grid article>span{font-size:24px;margin-bottom:16px}.pricing-heading{text-align:left;margin-bottom:30px}.pricing-heading .tiny-label{font-size:10px;margin-bottom:18px}.pricing-heading h2{font-size:43px}.pricing-heading p{font-size:13px;margin-top:19px}.pricing-grid{grid-template-columns:1fr;border:0;overflow:visible;border-radius:0;gap:12px;background:none}.plan{padding:21px;display:grid;grid-template-columns:1fr auto;column-gap:15px;border:1px solid #cbd2c3!important;border-radius:7px;position:relative}.plan-name{grid-column:1;grid-row:1;min-height:auto;font-size:12px}.plan h3{grid-column:1;grid-row:2;margin-top:5px;font-size:12px;color:var(--muted);font-weight:400}.price{grid-column:2;grid-row:1/3;font-size:30px;margin:0;align-self:center}.price>span{font-size:9px}.account-limit{grid-column:1;grid-row:3;margin:20px 0 0;font-size:13px}.plan-cta{grid-column:2;grid-row:3;margin-top:15px;padding:8px 12px;font-size:10px;gap:18px;min-height:40px}.plan-for{display:none}.featured h3{color:#f0f4ea}.recommendation{font-size:8px}.pricing-note{text-align:left;font-size:10px;margin-top:20px}.faq{display:block}.faq h2{font-size:42px;margin-bottom:32px}.faq summary{font-size:13px;padding:20px 0}.faq details>p{font-size:12px;padding-right:18px}.closing{padding:45px 0}.closing>.wrap{flex-wrap:wrap;gap:25px}.closing-mark{width:40px;height:40px;margin:0 5px}.closing-mark:after{inset:9px -9px}.closing h2{font-size:35px}.closing p{font-size:12px;margin-top:14px}.closing .button{margin:0}.closing>.wrap>div{flex:1 1 100%}footer{padding-block:30px;gap:20px;flex-wrap:wrap}footer .wordmark{font-size:27px}footer p{font-size:9px}footer>span{display:none}dialog{padding:30px}dialog h2{font-size:32px}}
@media(max-width:360px){h1{font-size:39px}.wrap{width:calc(100% - 32px)}.mac-tag{display:none}.benefit-grid article{grid-template-columns:1fr 1.4fr;gap:15px}.section-intro h2{font-size:36px}.demo-top{padding-inline:10px}.sample-badge{font-size:7px}.closing h2{font-size:30px}.closing .button{margin-left:0}.price{font-size:27px}.plan{padding:17px}.plan-cta{gap:10px}}
.live-proof{border:1px solid #54664b;padding:23px 26px;border-radius:8px;margin-top:30px;background:#27382c}.live-proof>div:first-child{display:flex;align-items:center;gap:10px}.live-proof h3{font-size:15px;line-height:1.6;letter-spacing:-.02em}.verified-dot{width:7px;height:7px;border-radius:50%;background:#c4dda6;flex:none}.live-proof>p{font-size:11px;line-height:1.8;color:#b6c8a8;margin-top:8px}.proof-results{display:flex;gap:40px;padding-block:20px}.proof-results>span{display:flex;flex-direction:column;gap:4px;color:#b6c8a8;font-size:10px}.proof-results strong{font-size:12px;color:#edf4e5;font-weight:500}.live-proof>a{display:inline-flex;gap:12px;align-items:center;font-size:11px;text-decoration:underline;text-underline-offset:4px}.live-proof>a svg{width:15px}.hero-line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}.hero-line>span,.hero-line>em{display:inline-block;animation:hero-enter 1.15s cubic-bezier(.16,1,.3,1) both}.hero-line>em{animation-delay:.14s}.hero-bottom{animation:soft-enter .9s .3s both}.hero-top,.hero-side{animation:soft-enter .8s .05s both}
@keyframes hero-enter{from{transform:translateY(110%) rotate(1.5deg)}to{transform:translateY(0) rotate(0)}}
.recorded-task-label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#627452;margin-bottom:5px}.assistant-chat{min-height:640px;padding:26px 30px}.user-bubble{font-size:12px;padding:12px 16px;margin-left:30px}.assistant-answer{margin-top:20px}.assistant-answer p{min-height:0;font-size:12px;line-height:1.75;margin-top:7px}.assistant-result{min-height:80px;padding:11px 14px;margin-top:11px;gap:4px}.assistant-result strong{font-size:12px}.assistant-result>span:last-child{font-size:10px}.native-run-preview{margin-top:16px;border:1px solid #d1dac7;border-radius:5px;overflow:hidden;background:#eeeee7}.native-run-preview>a{display:block}.native-run-preview img{width:100%;height:200px;object-fit:cover;object-position:center bottom;transition:opacity .3s}.native-run-preview figcaption{padding:5px 9px;font-size:9px;line-height:1.6;color:#5a6b4d;border-top:1px solid #d1dac7}.approval-preview img{object-fit:contain;background:#f6f5ef}.demo-controls{padding-top:18px}.recorded-response{border-top:1px solid #ced7c3;margin-top:24px;padding-top:17px}.recorded-response>.result-label{font-size:9px;color:#526b44;text-transform:uppercase;letter-spacing:.1em}.recorded-response pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:#335034;margin:10px 0 12px;min-height:105px}.recorded-response>a{font-size:9px;color:#426034;text-decoration:underline;text-underline-offset:3px}.tool-panel .permission-note{margin-top:18px;padding-top:15px}.demo-next:disabled,.reset-button:disabled{opacity:.65;cursor:wait}.demo-next:disabled:hover{transform:none}
.machine-summary{font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}footer p a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.assistant-chat{padding:20px 17px;min-height:0}.user-bubble{margin-left:20px;font-size:11px}.assistant-result{min-height:85px}.assistant-answer p{font-size:11px}.native-run-preview img{height:155px}.native-run-preview figcaption{font-size:8px}.recorded-response pre{font-size:10px;min-height:90px}.demo-controls{padding-top:20px}.assistant-result strong{font-size:11px}}
@keyframes soft-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.workspace-section{padding:0;overflow:visible}.workspace-stage{padding-block:30px;display:flex;flex-direction:column;justify-content:center;perspective:1600px;background:var(--sage)}.workspace-stage .workspace-label{margin-bottom:20px}.workspace-stage .app-figure{width:min(1160px,calc(100% - 140px));transform:translateY(calc((1 - var(--sc-p,0)) * 35px)) rotateX(calc((1 - var(--sc-p,0)) * 7deg)) scale(calc(.87 + var(--sc-p,0) * .13));transform-origin:center 60%;will-change:transform}.workspace-stage .workspace-caption{margin-top:25px}.workspace-stage .screenshot-frame{max-width:100%;margin-inline:auto;width:min(1160px,105vh)}.workspace-callout{position:absolute;z-index:4;display:flex;gap:15px;align-items:center;padding:17px 20px;border-radius:8px;background:#f8f9f2;color:#294732;box-shadow:0 12px 35px -15px #1b352b55;border:1px solid #d0d9c5;pointer-events:none}.workspace-callout>div{display:flex;flex-direction:column;gap:3px}.workspace-callout strong{font-size:12px;font-weight:600}.workspace-callout>div>span{font-size:10px;color:#617254}.identities-callout{top:27%;left:max(4%,calc((100vw - 1320px) / 2));opacity:clamp(0,calc(var(--sc-p,0) * 5 - .2),1);transform:translateX(calc((1 - var(--sc-p,0)) * -70px)) translateY(calc(var(--sc-p,0) * -20px))}.conversation-callout{right:5%;bottom:24%;opacity:clamp(0,calc(var(--sc-p,0) * 4 - 1.2),1);transform:translateX(calc((1 - var(--sc-p,0)) * 70px))}.workspace-stage[data-sc-stage]{overflow:clip}.workspace-callout svg{width:23px;height:23px}
.privacy-reveal .privacy-word{display:inline-block;color:#adb8a2;transition:color .18s}.privacy-reveal .privacy-word.lit{color:#283d2b}.privacy-reveal em .privacy-word.lit{color:#526248}.quiet-band{padding-block:95px}.quiet-band p{font-size:clamp(34px,3.8vw,53px);max-width:1050px}.assistant-section{border-radius:30px 30px 0 0;isolation:isolate}.mcp-story{position:relative}.mcp-stage{display:flex;flex-direction:column;justify-content:center;gap:24px;padding-block:24px;background:#202d27}.mcp-stage.sc-stage{overflow:visible}.mcp-stage>.demo{width:100%;flex-shrink:0}.mcp-scroll-caption{display:flex;align-items:center;gap:25px;color:#b6c7a8;font-size:10px;letter-spacing:.02em}.mcp-scroll-caption>span{flex:none}.story-track{height:1px;background:#617157;flex:1;overflow:hidden}.story-track i{display:block;height:100%;width:100%;background:#d0e2b9;transform:scaleX(var(--sc-p,0));transform-origin:left}.tool-steps li{opacity:1}.tool-steps li:not(.active):not(.done){color:#55664c}.active .step-dot{box-shadow:0 0 0 5px #31553c12}.tool-steps li.active{transform:translateX(3px)}.tool-steps li{transition:transform .35s,color .35s}.assistant-result{transition:background .25s,border-color .25s}.demo[data-phase="3"] .assistant-result,.demo[data-phase="4"] .assistant-result{background:#dfebd5;border-color:#a5bd92}.section-intro h2{overflow:hidden}.closing{position:relative;overflow:hidden}.closing:after{content:"";position:absolute;right:-90px;top:25px;width:350px;height:350px;border:1px solid #b4c9a8;border-radius:50%;pointer-events:none;transform:translateY(calc(var(--closing-p,0) * -100px))}.closing:before{content:"";position:absolute;right:-70px;top:105px;width:350px;height:150px;border:1px solid #b4c9a8;border-radius:50%;transform:rotate(-30deg);pointer-events:none}.closing>.wrap{position:relative;z-index:1}.plan-cta{transition:background .2s,transform .2s}.plan-cta:hover{transform:translateY(-2px)}
html:not(.sc-ready) [data-sc-in],html:not(.sc-ready) [data-sc-stagger]>*{opacity:1;transform:none}html:not(.sc-ready) .workspace-callout{display:none}html:not(.sc-ready) .workspace-stage .app-figure{transform:none}
@media(max-width:900px),(max-height:720px){.workspace-section,.mcp-story{height:auto!important}.workspace-stage.sc-stage,.mcp-stage.sc-stage{position:relative;height:auto;top:auto}.workspace-stage{padding-block:28px}.workspace-stage .app-figure{width:calc(100% - 40px);transform:none;will-change:auto}.workspace-stage .screenshot-frame{width:100%}.workspace-callout{display:none}.mcp-stage{padding-block:0;gap:17px}.mcp-scroll-caption{font-size:9px;gap:12px}.mcp-scroll-caption>span:last-child{display:none}.assistant-section{border-radius:18px 18px 0 0}.quiet-band{padding-block:60px}.quiet-band p{font-size:34px}}
@media(max-width:760px){.workspace-stage{padding-top:24px;padding-bottom:29px}.workspace-stage .app-figure{width:calc(100% - 24px)}.workspace-stage .workspace-label{margin-bottom:22px}.workspace-stage .workspace-caption{margin-top:28px}.quiet-band{padding-block:55px}.quiet-band p{font-size:30px}.closing:after{right:-220px;top:40px}.closing:before{right:-220px;top:120px}.mcp-scroll-caption{margin-top:4px}.live-proof{padding:20px}.live-proof h3{font-size:13px}.proof-results{flex-wrap:wrap;gap:15px 25px}.live-proof>p{font-size:10px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.app-figure{transform:none!important}[data-sc-in],[data-sc-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}.button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.workspace-section,.mcp-story{height:auto!important}.workspace-stage.sc-stage,.mcp-stage.sc-stage{position:relative;height:auto;top:auto}.workspace-stage .app-figure{transform:none;will-change:auto}.workspace-callout{display:none}.privacy-reveal .privacy-word{color:inherit}.mcp-stage{padding-block:0}.closing:after{transform:none}}
@media(max-height:850px){.mcp-story{height:auto!important}.mcp-stage.sc-stage{position:relative;height:auto;top:auto}.mcp-stage{padding-block:0}}

.footer-links{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:11px}.footer-links a:hover{text-decoration:underline}.policy-page{max-width:850px;padding-top:65px;padding-bottom:85px}.policy-page h1{font-size:clamp(38px,6vw,68px);line-height:1.08;letter-spacing:-.04em;margin:20px 0 30px}.policy-page h2{font-size:25px;line-height:1.25;margin:35px 0 13px}.policy-page p{margin:15px 0;font-size:16px;line-height:1.8}.policy-page a{text-decoration:underline;text-underline-offset:3px}.policy-notice{padding:22px;border:1px solid #cbd2c3;border-radius:7px}.policy-page+.wrap{border-top:1px solid #cbd2c3}@media(max-width:760px){.policy-page{padding-top:35px;padding-bottom:50px}.policy-page h1{font-size:39px}.policy-page p{font-size:15px}.footer-links{width:100%;font-size:11px;gap:12px 18px}}

.release-download{margin:10px 0 18px}.release-download[hidden]{display:none}

/* Centered native capture; scroll progress comes from the existing Scroll Craft act. */
.menubar-feature{padding-top:0;padding-bottom:0;scroll-margin-top:36px}
.menubar-intro{text-align:center;padding-bottom:54px}
.menubar-intro .tiny-label{color:var(--green);font-size:11px;margin-bottom:24px}
.menubar-intro h2 em{color:var(--green)}
.menubar-intro>p{font-size:15px;line-height:1.75;color:var(--muted);margin-top:25px}
.menubar-story{position:relative;background:var(--sage)}
.menubar-stage{display:flex;align-items:center;justify-content:center;padding:64px 24px 76px;min-height:780px;background:var(--sage);perspective:1500px;isolation:isolate;overflow:clip}
.menubar-stage.sc-stage{min-height:0}
.menubar-figure{position:relative;width:min(420px,calc(64vh * 420 / 620));max-width:100%;z-index:2;transform-origin:center;transform:translateY(calc((1 - var(--sc-p,1)) * 38px)) rotateX(calc((1 - var(--sc-p,1)) * 9deg)) scale(calc(.83 + var(--sc-p,1) * .17))}
.menubar-figure>a{display:block;border:1px solid #bac9b5;border-radius:11px;overflow:hidden;box-shadow:0 32px 65px -28px #29483266;background:#f5f5f3}
.menubar-figure img{display:block;width:100%;height:auto}
.menubar-figure figcaption{font-size:11px;line-height:1.6;color:#526248;text-align:center;margin-top:17px}
.menubar-orbit{position:absolute;z-index:0;width:75%;max-width:1050px;aspect-ratio:2.2;border:1px solid #bdcdb6;border-radius:50%;transform:rotate(calc(-18deg + var(--sc-p,0) * 12deg)) scale(calc(.85 + var(--sc-p,0) * .15));pointer-events:none}
.menubar-points{list-style:none;padding:0;margin:0}
.menubar-points li{position:absolute;z-index:3;max-width:240px;pointer-events:none}
.menubar-points .tiny-label{font-size:10px;color:#526248;margin-bottom:13px}
.menubar-points h3{font-size:26px;letter-spacing:-.025em;line-height:1.2}
.menubar-points em{color:var(--green);font-size:1.13em}
.menubar-glance{left:8%;top:25%;opacity:clamp(0,calc(var(--sc-p,1) * 5 - .3),1);transform:translateY(calc((1 - var(--sc-p,1)) * 40px))}
.menubar-reply{right:7%;top:40%;opacity:clamp(0,calc(var(--sc-p,1) * 5 - 1.4),1);transform:translateY(calc((1 - var(--sc-p,1)) * 65px))}
.menubar-draft{left:11%;bottom:19%;opacity:clamp(0,calc(var(--sc-p,1) * 5 - 2.5),1);transform:translateY(calc((1 - var(--sc-p,1)) * 85px))}
.menubar-scroll-note{position:absolute;bottom:30px;left:6%;right:6%;display:flex;align-items:center;gap:25px;color:#526248;font-size:10px}
.menubar-scroll-note>div{flex:1;height:1px;background:#b9cbb2;overflow:hidden}
.menubar-scroll-note i{display:block;height:100%;background:var(--green);transform:scaleX(var(--sc-p,0));transform-origin:left}
html:not(.sc-ready) .menubar-figure{transform:none}
html:not(.sc-ready) .menubar-points li{opacity:1;transform:none}
@media(max-width:1100px){.menubar-points h3{font-size:23px}.menubar-points li{max-width:195px}.menubar-glance{left:4%}.menubar-reply{right:4%}.menubar-draft{left:5%}}
@media(max-width:900px),(max-height:720px){.menubar-story{height:auto!important}.menubar-stage.sc-stage{position:relative;height:auto;top:auto}.menubar-stage{padding:44px 24px 34px;min-height:0;flex-direction:column;gap:38px}.menubar-figure{width:360px;transform:none}.menubar-orbit{width:110%;top:140px}.menubar-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:2;width:100%;max-width:780px;text-align:center}.menubar-points li{position:static;max-width:none;opacity:1;transform:none}.menubar-points h3{font-size:20px}.menubar-points .tiny-label{font-size:9px}.menubar-scroll-note{position:static;width:100%;max-width:780px}.menubar-scroll-note>span:last-child{display:none}}
@media(max-width:600px){.menubar-intro{padding-bottom:35px}.menubar-intro h2{font-size:clamp(34px,8vw,46px)}.menubar-intro .tiny-label{font-size:10px;margin-bottom:20px}.menubar-intro>p{font-size:14px;margin-top:22px}.menubar-stage{padding:35px 20px 28px;gap:30px}.menubar-figure{width:360px}.menubar-points{grid-template-columns:1fr;gap:24px}.menubar-points h3{font-size:23px}.menubar-points h3 br{display:none}.menubar-points .tiny-label{margin-bottom:7px}.menubar-scroll-note{font-size:10px;gap:15px}.menubar-figure figcaption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.menubar-story{height:auto!important}.menubar-stage.sc-stage{position:relative;height:auto;top:auto}.menubar-stage{min-height:780px}.menubar-figure,.menubar-orbit{transform:none}.menubar-points li{opacity:1;transform:none}.menubar-scroll-note i{transform:none}}

.plan-features{list-style:none;padding:0;margin:0 0 24px;font-size:11px;line-height:1.7;display:grid;gap:10px}.plan-features li{padding-left:14px;position:relative}.plan-features li::before{content:"·";position:absolute;left:0}.plan .plan-cta{margin-top:auto}.server-preview{display:flex;align-items:center;gap:32px;justify-content:space-between;border-top:1px solid #cbd2c3;margin-top:32px;padding-top:28px}.server-preview h3{font-size:24px;margin:9px 0}.server-preview p{font-size:13px;color:var(--muted);line-height:1.8;max-width:720px}.server-preview .plan-cta{flex-shrink:0;min-width:180px}.server-preview .tiny-label{font-size:10px}@media(max-width:600px){.server-preview{align-items:stretch;flex-direction:column;gap:18px}}
.waitlist{margin-top:22px;max-width:460px}.waitlist label{display:block;font-size:12px;color:#516447;margin-bottom:8px}.waitlist>div{display:flex;gap:8px}.waitlist input{flex:1;min-width:0;padding:11px 14px;border:1px solid #b4c9a8;border-radius:999px;background:#f5f6ee;color:var(--ink);font-size:13px}.waitlist input:focus-visible{outline:3px solid #68976f;outline-offset:2px}.waitlist button{padding:11px 18px;border-radius:999px;background:#294832;color:#f5f6ee;font-size:13px}.waitlist button:hover{background:#1d3624}.waitlist button:disabled{opacity:.6}.waitlist output{display:block;min-height:1.6em;font-size:11px;color:#516447;margin-top:6px}

/* --- workspace scroll scene --- */
/* P1 workspace scene.
   Default = ordinary flow (JS off, reduced motion): headline, the Studio native capture, the two callouts as
   plain cards, caption. Complete and static.
   Pinned (every width/height once scrollcraft runs, motion allowed) is driven by --sc-p plus --ws-a
   (approach, pins/workspace.js). The camera only crops/zooms/wipes the three real account captures. */

.workspace-label{flex-direction:column;align-items:center;text-align:center;gap:18px;font-size:inherit;margin-bottom:26px}
.workspace-title{font-size:clamp(38px,9vw,64px);letter-spacing:-.05em;line-height:1.04}
.workspace-title em{letter-spacing:-.02em;color:#3d5f45}
.workspace-stage .app-figure figcaption{font-size:11px}
html body .workspace-stage .workspace-callout{display:flex;position:static;opacity:1;transform:none;margin:12px auto 0;width:fit-content;max-width:calc(100% - 40px);pointer-events:auto}
html body .workspace-stage .workspace-callout strong{font-size:14px}
html body .workspace-stage .workspace-callout>div>span{font-size:12px}
.workspace-stage .workspace-caption{justify-content:center;flex-wrap:wrap;gap:12px 40px;text-align:center;margin-top:32px}
.workspace-stage .workspace-caption>p br{display:none}
.workspace-stage .workspace-caption>p>span{margin-left:.25em}
.workspace-stage:before,.workspace-stage:after{content:none}

/* Camera over the real per-account captures. Flow shows the Studio capture only. */
.screenshot-frame .ws-cam{position:relative;width:100%}
.screenshot-frame .ws-layer{display:block;width:100%;height:auto}
.screenshot-frame .ws-personal,.screenshot-frame .ws-projects,.ws-cam .ws-ring,.ws-cam .ws-edge{display:none}
.workspace-rail{list-style:none;margin:16px auto 0;padding:5px;display:flex;gap:4px;width:fit-content;border-radius:99px;background:#cfdacb;border:1px solid #b9c8b4}
.workspace-rail li{position:relative;padding:7px 16px;border-radius:99px;font-size:13px;font-weight:500;line-height:1;color:color-mix(in srgb,#fff calc(var(--s,0) * 100%),#4d6551);isolation:isolate}
.workspace-rail li:before{content:"";position:absolute;inset:0;border-radius:99px;background:#2b4c37;opacity:var(--s,0);z-index:-1}
.workspace-rail .r1{--s:var(--s1,1)}.workspace-rail .r2{--s:var(--s2,0)}.workspace-rail .r3{--s:var(--s3,0)}

@media(prefers-reduced-motion:no-preference){
  /* style.css releases this pin to flow at <=900px wide / <=720px tall; the pin now holds everywhere.
     Keep 290vh in step with data-sc-span="2.9" on #workspace. */
  #workspace.workspace-section.sc-act--pinned{height:290vh!important;padding:0;overflow:visible}
  #workspace.sc-act--pinned .workspace-stage.sc-stage{position:sticky;top:0;height:100vh;height:100svh}

  html.sc-ready .workspace-stage{
    --k:var(--sc-p,0);
    /* entrance: 45% during the approach slide, the rest in the first .06 of the pin; title clears by .07 */
    --e:min(1,calc(var(--ws-a,1) * .45 + clamp(0,calc(var(--k) / .06),1) * .55));
    --es:calc(var(--e) * var(--e) * (3 - 2 * var(--e)));
    --t:clamp(0,calc(var(--k) / .07),1);
    --r:clamp(0,calc((var(--k) - .04) / .06),1);
    /* camera: push in at the lock (0-.12), then a slow continuous drift; no pull-back, release from the crop */
    --zi:clamp(0,calc(var(--k) / .12),1);
    --z:calc(var(--zi) * var(--zi) * (3 - 2 * var(--zi)));
    --dr:var(--k);
    /* two scroll-scrubbed top->bottom wipes over the whole capture (everything above the edge is the next
       account, below it the previous one). Each: a = edge reaches the selected row, b = edge crosses the old and
       new selected rows (the real blue selection appears to travel down; the ring follows it), c = edge sweeps
       the chat list + thread to the bottom of the visible crop, then the hidden rest snaps on.
       Wipe 1 Studio->Personal .12-.50, wipe 2 Personal->Projects .52-.92. */
    --a1:clamp(0,calc((var(--k) - .12) / .06),1);
    --b1:clamp(0,calc((var(--k) - .18) / .14),1);
    --c1:clamp(0,calc((var(--k) - .32) / .18),1);
    --a2:clamp(0,calc((var(--k) - .52) / .05),1);
    --b2:clamp(0,calc((var(--k) - .57) / .15),1);
    --c2:clamp(0,calc((var(--k) - .72) / .20),1);
    --f1:clamp(0,calc((var(--c1) - .999) * 1000),1);--f2:clamp(0,calc((var(--c2) - .999) * 1000),1);
    /* rows (pixel-measured on all three captures): Studio y 9.30-15.35%, Personal -21.40%, Projects -27.44% */
    --ed1:calc(var(--a1) * 9.30% + var(--b1) * 12.10% + var(--c1) * (var(--vbot) - 21.40%));
    --ed2:calc(var(--a2) * 15.35% + var(--b2) * 12.09% + var(--c2) * (var(--vbot) - 27.44%));
    /* rail follows the selection continuously */
    --s1:calc(1 - var(--b1));--s2:calc(var(--b1) * (1 - var(--b2)));--s3:var(--b2);
    /* labels swap mid-switch (after the selection has moved) and drift slowly while shown */
    --cs:calc(clamp(0,calc((var(--k) - .05) / .06),1) * (1 - clamp(0,calc((var(--k) - .27) / .05),1)));
    --cp:calc(clamp(0,calc((var(--k) - .33) / .06),1) * (1 - clamp(0,calc((var(--k) - .67) / .05),1)));
    --cj:clamp(0,calc((var(--k) - .73) / .06),1);
    /* geometry */
    --top:clamp(100px,14svh,136px);
    --bot:76px;
    --avail:calc(100svh - var(--top) - var(--bot));
    --fw:min(92vw,calc((var(--avail) - 68px) * 1.628),1400px);
    --fh0:calc(var(--fw) / 1.628 + 28px);
    --fh1:var(--fh0);
    --Z:1.75;
    --D:70px;
    --tb:28px;
    --fhz:calc(var(--fh0) + var(--z) * (var(--fh1) - var(--fh0)));
    --vbot:calc(var(--fhz) - var(--tb) + var(--dr) * var(--z) * var(--D) + 6px);
    padding:0;display:block;overflow:clip;perspective:1800px;perspective-origin:50% 45%;
  }
  html.sc-ready .workspace-stage:before{
    content:"";position:absolute;z-index:0;left:50%;top:52%;width:calc(var(--fw) * 1.15);aspect-ratio:2.1;
    border:1px solid #aebfa8;border-radius:50%;pointer-events:none;
    transform:translate(-50%,-50%) rotate(calc(-22deg + var(--k) * 16deg)) scale(calc(.55 + var(--k) * .55));
    opacity:calc(.35 + var(--es) * .65);
  }
  html.sc-ready .workspace-stage .workspace-label{
    position:absolute;z-index:2;top:max(5vh,28px);left:50%;width:min(1100px,calc(100% - 48px));margin:0;gap:20px;
    transform:translate(-50%,calc(var(--t) * -60px));opacity:calc(1 - var(--t));
  }
  html.sc-ready .workspace-stage .workspace-title{font-size:clamp(40px,10.5svh,110px)}
  html.sc-ready .workspace-stage .app-figure{
    position:absolute;z-index:2;left:50%;top:var(--top);width:var(--fw);height:var(--avail);margin:0;
    display:flex;flex-direction:column;justify-content:center;
    transform-origin:50% 50%;
    transform:translateX(-50%) translateY(calc((1 - var(--es)) * 30svh)) rotateX(calc((1 - var(--es)) * 24deg)) scale(calc(.6 + var(--es) * .4));
  }
  html.sc-ready .workspace-stage .screenshot-frame{
    flex:none;width:100%;max-width:none;margin:0;
    height:var(--fhz);
    box-shadow:0 50px 90px -40px #1e3a2d80,0 12px 30px -18px #1e3a2d55;
  }
  /* the zoomed/drifting capture passes under an opaque title bar (style.css draws the bar text in :after) */
  html.sc-ready .workspace-stage .screenshot-frame:after{left:0;right:0;top:0;height:28px;line-height:28px;padding-top:0;text-align:center;transform:none;background:#eff2ec;border-bottom:1px solid #dfe3da;z-index:2}
  html.sc-ready .workspace-stage .screenshot-frame:before{z-index:3}
  html.sc-ready .workspace-stage .ws-cam{
    width:calc(100% * (1 + var(--z) * (var(--Z) - 1)));
    transform:translateY(calc(var(--dr) * var(--z) * var(--D) * -1));
  }
  html.sc-ready .workspace-stage .ws-personal,html.sc-ready .workspace-stage .ws-projects{display:block;position:absolute;left:0;top:0;width:100%;pointer-events:none}
  html.sc-ready .workspace-stage .ws-personal{clip-path:inset(0 0 max(0px,calc((100% - var(--ed1)) * (1 - var(--f1)))) 0)}
  html.sc-ready .workspace-stage .ws-projects{clip-path:inset(0 0 max(0px,calc((100% - var(--ed2)) * (1 - var(--f2)))) 0)}
  /* wipe leading edge (horizontal), visible only while that wipe is in progress */
  html.sc-ready .workspace-stage .ws-edge{display:block;position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 0 1px #2b4c3733,0 0 22px 6px #1e3a2d40;pointer-events:none}
  html.sc-ready .workspace-stage .ws-edge1{top:var(--ed1);opacity:calc(clamp(0,calc(var(--a1) * 40),1) * (1 - var(--f1)))}
  html.sc-ready .workspace-stage .ws-edge2{top:var(--ed2);opacity:calc(clamp(0,calc(var(--a2) * 40),1) * (1 - var(--f2)))}
  /* outline centred on the visible blue selection at every frame: while the edge crosses two rows (b), the
     selection block's centre moves at half the edge speed, i.e. exactly one row per wipe (x .7-14.3%) */
  html.sc-ready .workspace-stage .ws-ring{
    display:block;position:absolute;pointer-events:none;border:2px solid #2b4c37;border-radius:9px;
    left:calc(.7% - 4px);width:calc(13.6% + 8px);top:calc(9.30% + (var(--b1) + var(--b2)) * 6.05% - 4px);height:calc(6.05% + 8px);
    box-shadow:0 0 0 4px #f8f9f2b3;opacity:var(--z);
  }
  html.sc-ready .workspace-stage .app-figure figcaption{margin-top:10px;opacity:var(--es)}
  html.sc-ready .workspace-stage .workspace-rail{
    position:absolute;z-index:3;left:50%;bottom:22px;margin:0;
    transform:translate(-50%,calc((1 - var(--r)) * 24px));opacity:var(--r);
  }
  /* labels sit in the band above the window, one per settled account state */
  html.sc-ready body .workspace-stage .workspace-callout{
    position:absolute;z-index:4;top:calc(var(--top) / 2);left:50%;margin:0;width:max-content;max-width:calc(100% - 32px);
    padding:16px 24px;gap:16px;border-radius:12px;box-shadow:0 24px 50px -22px #1b352b88;
    transform:translate(-50%,calc(-50% + (1 - var(--c)) * 14px + (var(--kc) - var(--k)) * 90px));opacity:var(--c);
  }
  html.sc-ready body .workspace-stage .identities-callout{--c:var(--cs);--kc:.19}
  html.sc-ready body .workspace-stage .conversation-callout{--c:var(--cp);--kc:.5;right:auto;bottom:auto}
  html.sc-ready body .workspace-stage .workspace-callout strong{font-size:17px}
  html.sc-ready body .workspace-stage .workspace-callout>div>span{font-size:13px}
  html.sc-ready body .workspace-stage .workspace-callout svg,
  html.sc-ready body .workspace-stage .workspace-callout .orbit-mark{width:28px;height:28px;flex:none}
  html.sc-ready .workspace-stage .workspace-caption{
    position:absolute;z-index:3;top:calc(var(--top) / 2);left:50%;width:max-content;max-width:calc(100% - 32px);margin:0;
    flex-wrap:nowrap;gap:36px;align-items:center;
    transform:translate(-50%,calc(-50% + (1 - var(--cj)) * 14px + (.86 - var(--k)) * 90px));opacity:var(--cj);
  }
  html.sc-ready .workspace-stage .workspace-caption>p{font-size:26px;white-space:nowrap}
  html.sc-ready .workspace-stage .native-note{font-size:12px;max-width:none;white-space:nowrap}

  /* phones: the window zooms to the sidebar + chat list column (x 0-35% of the capture), the part that changes */
  @media(max-width:760px){
    html.sc-ready .workspace-stage{
      --top:118px;
      --bot:70px;
      --fw:calc(100vw - 24px);
      --fh0:calc(var(--fw) / 1.628 + 21px);
      --fh1:min(calc(var(--fw) * 2.84 / 1.628 * .815 + 21px),calc(var(--avail) - 30px));
      --Z:2.84;
      --D:24px;
      --tb:21px;
    }
    html.sc-ready .workspace-stage .workspace-label{top:max(4svh,24px);gap:14px}
    html.sc-ready .workspace-stage .workspace-title{font-size:clamp(36px,10.5vw,48px)}
    html.sc-ready .workspace-stage .app-figure figcaption{margin-top:8px;font-size:10px}
    html.sc-ready .workspace-stage .screenshot-frame:after{height:21px;line-height:21px}
    html.sc-ready body .workspace-stage .workspace-callout{padding:12px 16px;gap:12px}
    html.sc-ready body .workspace-stage .workspace-callout strong{font-size:15px}
    html.sc-ready body .workspace-stage .workspace-callout>div>span{font-size:12px}
    html.sc-ready body .workspace-stage .workspace-callout svg,
    html.sc-ready body .workspace-stage .workspace-callout .orbit-mark{width:24px;height:24px}
    html.sc-ready .workspace-stage .workspace-caption{flex-direction:column;flex-wrap:nowrap;gap:8px;width:calc(100% - 32px)}
    html.sc-ready .workspace-stage .workspace-caption>p{font-size:21px;white-space:normal}
    html.sc-ready .workspace-stage .native-note{font-size:11px}
    html.sc-ready .workspace-stage .workspace-rail{bottom:16px}
    html.sc-ready .workspace-stage .workspace-rail li{padding:7px 14px}
  }
}

/* --- menubar scroll scene --- */
/* P2 menubar (round 5). Four REAL native menu-bar captures (assets/native-menubar-*.png, 2x) inside ONE fixed
   card (same 420x620 box for every state; nothing invented). Story order ends on the richest state:
     Recent -> Unread filter -> Drafts filter -> quick reply on Maya's draft.
   Every change is scrubbed by scroll across ~.24 of the pin (~7 frames at 60px desktop, ~10 at 40px mobile),
   confined to the region that actually differs:
     filters: a soft mask edge sweeps the tab row while a green pill outline slides to the new filter, then a
              second edge sweeps the list (down for Unread, up for Drafts) with the list outline following it;
     reply:   the inbox pushes left and the real conversation slides in over it (a navigation push).
   Rests keep moving: monotonic push-in, frame un-tilting, ring, caption drift, outline morphs. One value --p:
     pinned (every width, motion allowed)  --p = --sc-p (engine); approach entrance = --mb-a (menubar.js)
     JS off / reduced motion                static: the Recent capture and all four captions in flow.
   Timeline: rest .00-.07 | Unread .07-.31 | rest | Drafts .38-.62 | rest (pick Maya) | Reply .69-.91 | composer
   outline .86-.97 | release. Keep 320vh in step with data-sc-span="3.2". */

.menubar-intro{padding-bottom:64px}

/* ---- layers: base flow shows the Recent capture only ---- */
.mb-cam,.mb-inbox{position:relative}
.mb-cam img{display:block;width:100%;height:auto}
.mb-cam .mb-l{position:absolute;left:0;top:0;width:100%;height:100%;display:none}
.mb-hl{display:none}

/* ---- static complete composition: JS off and reduced motion ---- */
html:not(.sc-ready) .menubar-story{height:auto!important}
html:not(.sc-ready) .menubar-stage{min-height:0;flex-direction:column;gap:38px;padding:48px 24px 40px;perspective:none}
html:not(.sc-ready) .menubar-figure{width:min(380px,100%);transform:none}
html:not(.sc-ready) .menubar-orbit{display:none}
html:not(.sc-ready) .menubar-points,
.menubar-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;text-align:center;width:100%;max-width:880px;position:relative;z-index:2}
html:not(.sc-ready) .menubar-points li,
.menubar-points li{position:static;width:auto;max-width:none;opacity:1;transform:none;text-align:center}
html:not(.sc-ready) .menubar-scroll-note{display:none}
@media(prefers-reduced-motion:reduce){
  .menubar-stage{min-height:0;flex-direction:column;gap:38px;padding:48px 24px 40px;perspective:none}
  .menubar-figure{width:min(380px,100%);transform:none}
  .menubar-orbit{width:min(130vw,900px);aspect-ratio:2;top:30%;transform:rotate(-14deg)}
  .menubar-scroll-note{display:none}
}
@media(max-width:600px){.menubar-points{grid-template-columns:1fr;gap:26px}.menubar-points h3{font-size:23px}}

/* ======================= pinned scene (every width once scrollcraft runs) ======================= */
@media(prefers-reduced-motion:no-preference){
  html.sc-ready .menubar-story{height:320vh!important}
  html.sc-ready .menubar-stage.sc-stage{position:sticky;top:0;height:100vh;height:100svh}

  html.sc-ready .menubar-stage{
    --p:var(--sc-p,0);
    --a:var(--mb-a,1);
    --ea:calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
    /* change 1: Recent -> Unread (tab sweep over the first 60%, list sweep over the last 75%) */
    --u1:clamp(0,calc((var(--p) - .07) / .24),1);
    --x1:clamp(0,calc(var(--u1) / .6),1);
    --y1:clamp(0,calc((var(--u1) - .25) / .75),1);
    --t1:calc(var(--x1) * var(--x1) * (3 - 2 * var(--x1)));
    --l1:calc(var(--y1) * var(--y1) * (3 - 2 * var(--y1)));
    /* change 2: Unread -> Drafts (tab sweep, then the list collapses upward) */
    --u2:clamp(0,calc((var(--p) - .38) / .24),1);
    --x2:clamp(0,calc(var(--u2) / .55),1);
    --y2:clamp(0,calc((var(--u2) - .15) / .85),1);
    --t2:calc(var(--x2) * var(--x2) * (3 - 2 * var(--x2)));
    --l2:calc(var(--y2) * var(--y2) * (3 - 2 * var(--y2)));
    /* rest: the list outline hands over from both drafts to Maya's row (the one the reply opens) */
    --xm:clamp(0,calc((var(--p) - .56) / .12),1);
    --m:calc(var(--xm) * var(--xm) * (3 - 2 * var(--xm)));
    /* change 3: push into the quick reply */
    --u3:clamp(0,calc((var(--p) - .69) / .22),1);
    --s3:calc(var(--u3) * var(--u3) * (3 - 2 * var(--u3)));
    /* outline draws */
    --d1:clamp(0,calc(var(--p) / .07),1);
    --dt:clamp(0,calc(var(--u1) / .12),1);
    --dc:clamp(0,calc((var(--p) - .86) / .11),1);
    /* list sweep edges, in % of the list band (y 162-620 of the 620 logical capture) */
    --e1:calc(26 + 70 * var(--l1));
    --e2:calc(66 - 72 * var(--l2));
    /* captions: one at a time, swapped mid-change */
    --i1:var(--ea);
    --o1:clamp(0,calc((var(--p) - .10) / .06),1);
    --i2:clamp(0,calc((var(--p) - .18) / .07),1);
    --o2:clamp(0,calc((var(--p) - .41) / .06),1);
    --i3:clamp(0,calc((var(--p) - .49) / .07),1);
    --o3:clamp(0,calc((var(--p) - .72) / .06),1);
    --i4:clamp(0,calc((var(--p) - .80) / .07),1);
    /* camera: one fixed card, a slow monotonic push-in for the whole pin (never a per-beat jump) */
    --cs:calc(1 + var(--p) * .1);
    --drift:55vh;
    /* geometry: frame = the 420x620 panel, as large as the viewport allows */
    --fh:min(calc(100svh - 160px),840px);
    --fw:calc(var(--fh) * 420 / 620);
    min-height:0;flex-direction:row;padding:0 24px;perspective:1700px;gap:0;
  }
  html.sc-ready .menubar-stage .menubar-figure{
    width:var(--fw);max-width:none;margin:0;
    transform-origin:50% 50%;
    transform:
      translateY(calc((1 - var(--ea)) * 22vh))
      rotateX(calc((1 - var(--ea)) * 18deg))
      rotateY(calc((1 - var(--p)) * -7deg))
      scale(calc((.84 + var(--ea) * .16) * var(--cs)));
    will-change:transform;
  }
  html.sc-ready .menubar-figure>a{border-radius:14px;box-shadow:0 50px 90px -40px #1f3a2899,0 14px 30px -18px #1f3a2866}
  html.sc-ready .menubar-figure figcaption{margin-top:14px;opacity:var(--ea)}

  html.sc-ready .mb-cam .mb-l,html.sc-ready .mb-hl{display:block}
  html.sc-ready .mb-inbox{transform:translateX(calc(var(--s3) * -30%))}
  /* Today stages (raw -> sorted on this Mac -> promises): the header count and the list both change, so each
     layer is revealed whole by its sweeps */
  html.sc-ready .mb-l--unread,html.sc-ready .mb-l--drafts{
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;
    -webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;
  }
  html.sc-ready .mb-l--unread{
    --te:calc(-2% + 42% * var(--t1));
    -webkit-mask-image:linear-gradient(to right,#000 calc(var(--te) - 3%),transparent calc(var(--te) + 3%)),
      linear-gradient(to bottom,#000 calc(var(--e1) * 1% - 1.5%),transparent calc(var(--e1) * 1% + 1.5%));
    mask-image:linear-gradient(to right,#000 calc(var(--te) - 3%),transparent calc(var(--te) + 3%)),
      linear-gradient(to bottom,#000 calc(var(--e1) * 1% - 1.5%),transparent calc(var(--e1) * 1% + 1.5%));
  }
  html.sc-ready .mb-l--drafts{
    --te:calc(15% + 54% * var(--t2));
    -webkit-mask-image:linear-gradient(to right,#000 calc(var(--te) - 3%),transparent calc(var(--te) + 3%)),
      linear-gradient(to bottom,transparent calc(var(--e2) * 1% - 1.5%),#000 calc(var(--e2) * 1% + 1.5%));
    mask-image:linear-gradient(to right,#000 calc(var(--te) - 3%),transparent calc(var(--te) + 3%)),
      linear-gradient(to bottom,transparent calc(var(--e2) * 1% - 1.5%),#000 calc(var(--e2) * 1% + 1.5%));
  }
  /* the real conversation slides in from the right over the inbox */
  html.sc-ready .mb-l--reply{transform:translateX(calc((1 - var(--s3)) * 100%));
    box-shadow:-18px 0 36px -14px #1f3a2840;opacity:clamp(0,calc(var(--u3) * 400),1)}

  /* outlines over measured regions of the 420x620 logical captures (px -> %), in the gaps between rows and
     controls so they never cross text; 2px on screen at any camera scale */
  .mb-hl{position:absolute;box-sizing:border-box;pointer-events:none;
    border:calc(2px / var(--cs)) solid var(--green);border-radius:calc(10px / var(--cs));
    left:calc(var(--x) / 4.2 * 1%);top:calc(var(--y) / 6.2 * 1%);width:calc(var(--w) / 4.2 * 1%);height:calc(var(--h) / 6.2 * 1%);
    clip-path:inset(-4px calc((1 - var(--d)) * (100% + 8px) - 4px) -4px -4px)}
  /* list: three rows/three accounts -> grows down with the Unread sweep (four rows) -> follows the Drafts
     sweep up (two rows); in the rest it retracts while a second outline draws round Maya's row (the one the
     reply opens), so no border ever slides through text; both push away with the inbox */
  .mb-hl--rows{--x:10;--y:171;--w:402;--d:calc(var(--d1) * (1 - var(--m)));
    --h:min(clamp(196,calc(162 + var(--e1) * 4.58 - 171),268),clamp(130,calc(162 + var(--e2) * 4.58 - 171),268))}
  .mb-hl--maya{--x:10;--y:294;--w:402;--h:60;--d:var(--m)}  /* Maya's row in the promises stage */
  /* filter pill: slides Recent -> Unread -> Drafts with the tab-row sweep */
  .mb-hl--tab{--x:calc(14.5 + 65 * var(--t1) + 132.5 * var(--t2));--y:124;--w:calc(64 + 2.5 * var(--t1) - 6.5 * var(--t2));--h:33;
    --d:1;opacity:var(--dt);border-radius:99px}
  /* Today has no filter row and its rows move between stages: only Maya's row and the composer are outlined */
  html.sc-ready .mb-hl--tab,html.sc-ready .mb-hl--rows{display:none}
  .mb-hl--composer{--x:calc(7 + (1 - var(--s3)) * 420);--y:539;--w:406;--h:52;--d:var(--dc);border-radius:calc(13px / var(--cs))}  /* rides in with the reply */

  /* orbit: tilted ellipse sweeping round the panel for the whole pin, a counter ring, a dot riding it */
  html.sc-ready .menubar-orbit{
    width:calc(var(--fw) * 3.2);max-width:none;aspect-ratio:2.4;top:auto;border-color:#a9bfa3;
    transform:rotate(calc(-34deg + var(--p) * 68deg)) scale(calc(.6 + var(--ea) * .4));
  }
  .menubar-orbit:before,.menubar-orbit:after{content:"";position:absolute}
  .menubar-orbit:before{inset:13% 9%;border:1px solid #c3d3bd;border-radius:50%;transform:rotate(calc(var(--p,0) * -50deg))}
  .menubar-orbit:after{width:11px;height:11px;border-radius:50%;background:var(--green);right:-6px;top:calc(50% - 5px);box-shadow:0 0 0 6px #5b7a5a22}

  /* captions beside the panel, alternating sides, one at a time, always drifting up with the scroll */
  html.sc-ready .menubar-points{position:static;display:block;width:auto;max-width:none}
  html.sc-ready .menubar-points li{
    position:absolute;top:50%;width:min(360px,calc(50vw - var(--fw) / 2 - 80px));max-width:none;
    opacity:calc(var(--in) * (1 - var(--out,0)));
    transform:translate(calc((1 - var(--in)) * var(--dir) * 40px),calc(-50% + (var(--mid) - var(--p)) * var(--drift)));
  }
  html.sc-ready .menubar-points h3{font-size:clamp(24px,2.7vw,38px)}
  html.sc-ready .menubar-glance,html.sc-ready .menubar-draft{right:calc(50% + var(--fw) / 2 + 52px);left:auto;bottom:auto;text-align:right;--dir:-1}
  html.sc-ready .menubar-unread,html.sc-ready .menubar-reply{left:calc(50% + var(--fw) / 2 + 52px);right:auto;bottom:auto;text-align:left;--dir:1}
  html.sc-ready .menubar-glance{--in:var(--i1);--out:var(--o1);--mid:.08}
  html.sc-ready .menubar-unread{--in:var(--i2);--out:var(--o2);--mid:.325}
  html.sc-ready .menubar-draft{--in:var(--i3);--out:var(--o3);--mid:.635}
  html.sc-ready .menubar-reply{--in:var(--i4);--mid:.92}
  html.sc-ready .menubar-scroll-note{display:flex;position:absolute;bottom:18px;left:6%;right:6%;width:auto;max-width:none}
  html.sc-ready .menubar-scroll-note>div{background:#b3c8ac}
  html.sc-ready .menubar-scroll-note i{transform:scaleX(var(--p))}

  /* narrow screens (phones, small tablets): caption above the panel, panel as wide as the screen allows.
     The whole panel stays in frame, so nothing is cropped; text sits at ~85% of native size on a 390px phone. */
  @media(max-width:900px){
    html.sc-ready .menubar-stage{
      --fw:min(calc(100vw - 40px),calc((100svh - 250px) * 420 / 620),460px);
      flex-direction:column;justify-content:center;padding:0 16px;gap:18px;
      --cs:calc(1 + var(--p) * .035);
      --drift:9vh;
    }
    html.sc-ready .menubar-points{position:relative;display:grid;width:100%;max-width:520px;order:-1;min-height:96px;align-items:end}
    html.sc-ready .menubar-points li{grid-area:1/1;position:relative;top:auto;left:auto;right:auto;width:auto;text-align:center;
      transform:translateY(calc((1 - var(--in)) * 18px + (var(--mid) - var(--p)) * var(--drift)))}
    html.sc-ready .menubar-points h3{font-size:clamp(21px,5.6vw,28px)}
    html.sc-ready .menubar-points .tiny-label{margin-bottom:8px}
    html.sc-ready .menubar-figure figcaption{margin-top:10px;font-size:10px}
    html.sc-ready .menubar-orbit{width:calc(var(--fw) * 2.6);top:30%}
    html.sc-ready .menubar-scroll-note{bottom:14px;left:16px;right:16px}
    html.sc-ready .menubar-scroll-note>span{display:none}
  }
}

/* --- mcp scroll scene --- */
/* P3 mcp: the pinned peak. The product is the hero: one camera over the real native
   captures, driven by scroll (pin progress on desktop, the frame's own travel in flow).
   Variables --mcp-* are set from pins/mcp.js; data-mcp-mode = pin | flow | step.
   Fallbacks below are the JS-off picture: before capture, Maya row ringed, nothing dimmed. */

/* ---- base: flow layout (mobile, short screens, reduced motion, JS-off) ---- */
.mcp-stage .demo{border:0;border-radius:0;background:none;overflow:visible;box-shadow:none;color:#f3f4ea;display:flex;flex-direction:column;gap:18px;--sp:.5}
.mcp-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;order:0}
.mcp-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#d3e3c3;letter-spacing:.01em}
.mcp-kicker svg{width:16px;height:16px}
.mcp-task{margin:0;flex:1 1 280px;font-size:12px;line-height:1.55;color:#aebda6}
.mcp-task .recorded-task-label{display:inline;margin:0 8px 0 0;color:#8fa583}
.mcp-head .sample-badge{border-color:#4d6048;color:#a8b9a1}

.mcp-copy{order:2;display:grid;gap:8px 36px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start}
.mcp-copy .assistant-result{display:contents}
.mcp-copy .result-label{grid-column:1;grid-row:1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a8c28f}
.mcp-copy .assistant-result strong{grid-column:1;grid-row:2 / span 2;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(30px,3vw,42px);line-height:1.04;letter-spacing:-.02em;color:#f6f7ee}
.mcp-copy .assistant-result>span:last-child{grid-column:2;grid-row:3;font-size:12px;line-height:1.5;color:#b6c7a8;border-left:2px solid #6f8a5c;padding-left:10px;max-width:56ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcp-copy>p{grid-column:2;grid-row:1 / span 2;margin:0;font-size:14px;line-height:1.55;color:#c9d4c3;max-width:46ch}
.demo[data-phase="3"] .assistant-result,.demo[data-phase="4"] .assistant-result{background:none;border:0}

/* receipt: the captured JSON. A column of the copy row, never on top of the capture. */
.mcp-receipt{position:relative;grid-column:1 / -1;grid-row:auto;margin:0;padding:11px 13px 10px;border:1px solid #3f523c;border-radius:11px;background:#161f19;color:#dbe6d0}
.mcp-receipt-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.recorded-response.mcp-receipt>.result-label,.mcp-receipt .result-label{grid-column:auto;grid-row:auto;font-size:9px;color:#a8c28f;letter-spacing:.1em;text-transform:uppercase}
.mcp-receipt .local-badge{margin:0;color:#b8cca6;border-color:#4a5e47;font-size:8px}
.mcp-receipt pre{margin:7px 0 7px;min-height:0;font-size:10px;line-height:1.55;color:#cfe3b9}
.mcp-receipt-foot{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#8fa583}
/* context step: the context tool answered, so its captured response is what lights up */
.mcp-receipt:after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid #b9e096;box-shadow:0 0 0 4px #b9e09626,0 0 44px #b9e09640;opacity:var(--mcp-rcpt,0);pointer-events:none}
.mcp-receipt-foot a{color:#c3d8ac;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* the frame: a camera window onto the actual captures.
   The camera is laid out at 1.6x the frame and scaled down (never up), so the 2800px
   capture is rasterised sharp at every zoom instead of a soft upscaled layer. */
.mcp-frame{order:1;margin:0;position:relative;display:flex;flex-direction:column;gap:8px;border:0;background:none;overflow:visible}
.mcp-frame>a{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#141c17;box-shadow:0 40px 90px -45px #000,0 0 0 1px #3a4b38}
.mcp-camera{position:absolute;display:block;left:50%;top:50%;width:160%;aspect-ratio:2800/1720;margin-left:-80%;margin-top:calc(-160% / 1.628 / 2);
  transform-origin:50% 50%;transform:translate(var(--mcp-tx,0%),var(--mcp-ty,0%)) scale(var(--mcp-z,.625));will-change:transform}
.mcp-frame .mcp-layer{display:block;position:absolute;max-width:none;object-fit:fill;background:none;border-radius:0;transition:none;image-rendering:auto}
.mcp-frame .mcp-win{left:0;top:0;width:100%;height:100%}
/* beat 4: the after capture opens from its composer (68%,92% of the capture), so the first
   pixels to change are the real drafted text; at 0 the clip is empty */
.mcp-frame .mcp-after{--r:calc(1 - var(--mcp-iris,0));clip-path:inset(calc(92% * var(--r)) calc(32% * var(--r)) calc(8% * var(--r)) calc(68% * var(--r)) round calc(2.4% * var(--r)))}
/* the approval sheet slides in opaque (no cross-dissolve of two captures) */
.mcp-frame .mcp-sheet{left:50%;top:50%;width:auto;height:88%;aspect-ratio:920/786;border-radius:14px;z-index:2;pointer-events:none;
  transform:translate(-50%,calc(-50% + (1 - var(--mcp-sheet,0)) * 118%)) scale(var(--mcp-sheet-s,1));box-shadow:0 50px 100px -30px #000,0 0 0 1px #0003}
.mcp-frame>a:after{content:"";position:absolute;inset:0;background:#0f1612;opacity:calc(var(--mcp-dim,0) * .6);pointer-events:none}
.mcp-frame .mcp-sheet{z-index:3}

/* callout rings sit on the capture and move with the camera. The row ring carries the beat-1
   spotlight: everything but the real matching row dims. */
.mcp-mark{position:absolute;border:3px solid #a6e07c;border-radius:14px;opacity:0;pointer-events:none}
.mcp-mark-row{left:15.4%;top:26.2%;width:20%;height:9.2%;opacity:var(--mcp-spot,1);
  box-shadow:0 0 0 8px #a6e07c22,0 0 50px #a6e07c40,0 0 0 400vmax rgb(10 16 12 / calc(var(--mcp-spot-dim,0) * .58))}
.mcp-mark-composer{left:37%;top:88%;width:61.8%;height:8.4%;border-radius:26px;opacity:var(--mcp-comp,0);box-shadow:0 0 0 8px #a6e07c22,0 0 50px #a6e07c40}

.mcp-frame figcaption{padding:0;border:0;font-size:11px;line-height:1.4;color:#aebda6}

/* rail: the four recorded steps */
.mcp-rail{order:3;display:flex;flex-direction:column;gap:6px}
.mcp-stage .tool-steps{padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 22px}
.mcp-stage .tool-steps li{opacity:1;color:#8fa386;align-items:flex-start;gap:10px;padding-top:10px;border-top:1px solid #3b4b39}
.mcp-stage .tool-steps li:not(.active):not(.done){color:#8fa386}
.mcp-stage .tool-steps li.active{color:#f3f4ea;border-top-color:#b9e096;transform:none}
/* scroll-driven: the active rule fills with that step's own progress (full when held by the buttons) */
.mcp-stage .tool-steps li{position:relative}
.demo[data-mcp-mode="pin"] .tool-steps li.active,.demo[data-mcp-mode="flow"] .tool-steps li.active{border-top-color:#4f6449}
.demo[data-mcp-mode="pin"] .tool-steps li.active:before,.demo[data-mcp-mode="flow"] .tool-steps li.active:before{content:"";position:absolute;left:0;right:0;top:-2px;height:3px;border-radius:2px;background:#b9e096;transform-origin:left;transform:scaleX(var(--mcp-sp,1))}
.mcp-stage .tool-steps li.done{color:#a8b9a1;border-top-color:#6f8a5c}
.mcp-stage .tool-steps strong{font-size:13px}
.mcp-stage .tool-steps li>div>span{font-size:11px;color:inherit;opacity:.85}
.mcp-stage .tool-steps code{color:#a8c28f;font-size:10px}
.mcp-stage .step-dot{border-color:currentColor;box-shadow:none}
.mcp-stage .active .step-dot{background:#b9e096;border-color:#b9e096;color:#18221b}
.mcp-stage .demo-controls{margin:0;padding:6px 0 0;flex-wrap:wrap;gap:6px 18px}
.mcp-stage .demo-next{background:#e9f0df;color:#1d2b21;min-height:40px;font-size:12px}
.mcp-stage .reset-button{color:#b8cca6;min-height:40px}
.mcp-stage .demo-hint{margin:0;min-height:0;color:#8fa583;font-size:11px;flex:1 1 220px}
.mcp-stage .noscript-note{color:#c9d4c3}
.mcp-stage .noscript-note a{text-decoration:underline}
.mcp-scroll-caption{color:#8fa583}

/* flow layout (mobile / short / reduced motion): frame first, then its copy */
@media(max-width:900px),(max-height:850px),(prefers-reduced-motion:reduce){
  .mcp-stage{padding-block:8px 0}
  .mcp-copy{grid-template-columns:1fr;grid-template-rows:none}
  .mcp-copy .result-label,.mcp-copy .assistant-result strong,.mcp-copy>p,.mcp-copy .assistant-result>span:last-child{grid-column:1;grid-row:auto}
  .mcp-copy>p{order:3}.mcp-copy .assistant-result>span:last-child{order:4}.mcp-receipt{order:5}
  .mcp-stage .tool-steps{grid-template-columns:1fr 1fr;gap:12px 16px}
  .mcp-stage .tool-steps code{overflow-wrap:anywhere}
}
@media(max-width:700px){
  .mcp-frame>a{aspect-ratio:5/4}
  .mcp-copy{min-height:300px;align-content:start}
  .mcp-copy .assistant-result strong{font-size:32px}
  .mcp-mark{border-width:2px;box-shadow:0 0 0 5px #a6e07c22}
}
@media(max-width:560px){.mcp-stage .tool-steps{grid-template-columns:1fr}}

/* Scroll-driven (pin/flow): no transitions, the scroll position is the timeline. Replay buttons
   (step) ease between the hold states instead. */
.demo[data-mcp-mode="step"] .mcp-camera{transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.demo[data-mcp-mode="step"] .mcp-frame .mcp-sheet{transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.demo[data-mcp-mode="step"] .mcp-frame .mcp-after{transition:clip-path .8s cubic-bezier(.3,.7,.2,1)}
.demo[data-mcp-mode="step"] .mcp-frame>a:after,.demo[data-mcp-mode="step"] .mcp-mark,.demo[data-mcp-mode="step"] .mcp-receipt:after{transition:opacity .5s,box-shadow .5s}
/* copy swap: a hard switch, the new text alone rises in; the JSON follows a beat later */
.demo[data-mcp-mode] .mcp-copy.swap>p,.demo[data-mcp-mode] .mcp-copy.swap .assistant-result>*{animation:mcp-rise .3s cubic-bezier(.2,.7,.2,1) both}
.demo[data-mcp-mode] .mcp-copy.swap .assistant-result>strong{animation-delay:.04s}
.demo[data-mcp-mode] .mcp-copy.swap>p{animation-delay:.08s}
.demo[data-mcp-mode] .mcp-copy.swap .mcp-receipt pre{animation:mcp-fade .3s .16s ease-out both}
@keyframes mcp-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes mcp-fade{from{opacity:.15}}
@media(prefers-reduced-motion:reduce){.demo[data-mcp-mode] *,.demo[data-mcp-mode] *:after{animation:none!important;transition:none!important}}

/* ---- pinned desktop: the full-viewport scene ---- */
@media(min-width:901px) and (min-height:851px) and (prefers-reduced-motion:no-preference){
  .mcp-stage.sc-stage{--fw:min(100%,calc((100svh - 338px) * 2));padding-block:12px 10px;gap:0;justify-content:center}
  .mcp-stage .demo{width:var(--fw);margin-inline:auto;gap:8px}
  .mcp-scroll-caption{display:none}
  .mcp-head{order:0;min-height:22px;flex-wrap:nowrap}
  .mcp-task{flex:1 1 auto}
  .mcp-frame>a{aspect-ratio:2/1}
  .mcp-frame figcaption{position:absolute;left:2px;top:calc(100% + 2px);font-size:10px}
  .mcp-frame{margin-bottom:12px}
  .mcp-copy{order:0;height:138px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 262px;align-content:start}
  .mcp-copy>p{grid-column:2}
  .mcp-receipt{grid-column:3;grid-row:1 / span 3;order:0;align-self:start;padding:9px 11px 8px}
  .mcp-receipt pre{max-height:76px;overflow:hidden}
  .mcp-receipt .local-badge,.mcp-receipt-foot>span{display:none}
  .mcp-receipt-foot{justify-content:flex-end}
  .mcp-rail{order:2;gap:2px}
  .mcp-stage .tool-steps li>div>span{display:none}
  .mcp-stage .demo-controls{padding-top:0}
  .mcp-stage .demo-next{min-height:34px;padding:8px 14px;font-size:11px}
  .mcp-stage .reset-button{min-height:34px}
  .mcp-stage .demo-hint{font-size:10px}
}

/* ---- pinned phone (operator decision 2026-10-28: pins allowed on small screens) ----
   Same scene as desktop, stacked to fit one screen: the frame takes whatever height the
   copy, receipt and rail leave (so a short svh with the iOS toolbar still fits), copy and
   stepper are compact. Gated on .sc-act--pinned so JS-off keeps the plain flow layout. */
@media(max-width:700px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  #assistant .mcp-story.sc-act--pinned{height:310vh!important}
  #assistant .mcp-stage.sc-stage{position:sticky;top:0;height:100vh;height:100svh;padding-block:12px 10px;gap:0;justify-content:flex-start;overflow:clip}
  .mcp-stage.sc-stage .mcp-scroll-caption{display:none}
  .mcp-stage.sc-stage .demo{flex:1 1 auto;min-height:0;gap:10px}
  .mcp-stage.sc-stage .mcp-head{gap:4px 10px}
  .mcp-stage.sc-stage .mcp-task{order:3;flex-basis:100%;font-size:11px;line-height:1.45}
  .mcp-stage.sc-stage .mcp-task .recorded-task-label{display:none}
  .mcp-stage.sc-stage .mcp-head .sample-badge{margin-left:auto;font-size:8px}
  .mcp-stage.sc-stage .mcp-frame{flex:1 1 0;min-height:150px;max-height:48svh;gap:4px}
  .mcp-stage.sc-stage .mcp-frame>a{aspect-ratio:auto;flex:1 1 0;min-height:0}
  .mcp-stage.sc-stage .mcp-frame figcaption{font-size:10px;flex:none}
  .mcp-stage.sc-stage .mcp-frame .mcp-sheet{width:94%;height:auto}
  .mcp-stage.sc-stage .mcp-copy{min-height:0;flex:none;gap:4px}
  .mcp-stage.sc-stage .mcp-copy .assistant-result strong{font-size:27px;line-height:1.02}
  .mcp-stage.sc-stage .mcp-copy>p{font-size:12.5px;line-height:1.45;height:calc(1.45em * 4);overflow:hidden}
  .mcp-stage.sc-stage .mcp-copy .assistant-result>span:last-child{display:none}
  .mcp-stage.sc-stage .mcp-receipt{margin-top:4px;padding:7px 10px 6px}
  .mcp-stage.sc-stage .mcp-receipt .local-badge,.mcp-stage.sc-stage .mcp-receipt-foot>span{display:none}
  .mcp-stage.sc-stage .mcp-receipt pre{margin:4px 0;height:calc(1.5em * 4);overflow:hidden;font-size:9.5px;line-height:1.5}
  .mcp-stage.sc-stage .mcp-receipt-foot{justify-content:flex-end;font-size:9px}
  .mcp-stage.sc-stage .mcp-rail{flex:none;gap:2px}
  .mcp-stage.sc-stage .tool-steps{grid-template-columns:repeat(4,1fr);gap:8px}
  .mcp-stage.sc-stage .tool-steps li{padding-top:6px;gap:6px}
  .mcp-stage.sc-stage .tool-steps li>div>span,.mcp-stage.sc-stage .tool-steps code{display:none}
  .mcp-stage.sc-stage .tool-steps strong{font-size:10px;line-height:1.25}
  .mcp-stage.sc-stage .step-dot{width:18px;height:18px;font-size:9px;flex:none}
  .mcp-stage.sc-stage .demo-controls{padding-top:4px;gap:4px 12px;flex-wrap:nowrap}
  .mcp-stage.sc-stage .demo-next{min-height:34px;padding:7px 12px;font-size:11px}
  .mcp-stage.sc-stage .reset-button{min-height:34px;font-size:11px}
  .mcp-stage.sc-stage .demo-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* --- pricing scroll scene --- */
/* P4 pricing. pins/pricing.js runs one scroll timeline (d, in viewport heights from the lock)
   and writes per-card custom properties; this file only draws them.
     Desktop (>=901 wide, >=851 tall), span 2.15 -> 1.15vh pinned travel:
       approach    Pro stands up from a tilt at 1.3x, its price/features/CTA build (--pr-a)
         0 -> .42  from the lock, Plus and Studio emerge from behind Pro
       .42 -> .46  3-card rest (Plus | Pro 1.1x | Studio) while the composition drifts
       .46 -> .90  Free emerges from behind Plus; the row shifts so Pro lands in column 3
       .80 -> 1.06 gaps close, the four cards lock into one table (--j)
       whole pin   composition drifts up 36px, heading 24px more (--pr-dr/--pr-dh)
       .98 ->      note (--pr-n) then Server (--pr-s) start on the last pinned frames and
                   finish with the release scroll; release at 1.15
     Phone (<=760 wide, >=700 tall): the stage sticks while a 140vh spacer scrolls under it;
       cards land on a deck (Free, Plus, Studio, Pro on top) with overlapping windows, Plus
       peeking at the bottom edge at the lock; each leaves a 58px tab (name, line, price) under
       the next; note and Server come in with the released page.
     Short phones keep a flow with per-card scroll-linked rises (--pr-v); 761-900 wide or
     short desktops use view-timeline entrances; reduced motion and no-JS show the plain grid. */

.pricing-stage{overflow:visible}

/* ---- flow fallback (narrow, short, reduced motion) ------------------------ */
@media(max-width:900px),(max-height:850px){
  .pricing-section{height:auto!important}
  .pricing-stage.sc-stage{position:relative;height:auto;top:auto;overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  .pricing-section{height:auto!important}
  .pricing-stage.sc-stage{position:relative;height:auto;top:auto;overflow:visible}
  .pricing-section [data-sc-in]{opacity:1!important;transform:none!important}
}

/* ---- phone pin: the deck --------------------------------------------------- */
@media(max-width:760px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  /* .sc-act--pinned/.sc-stage are set by the engine before it checks the stage is sticky */
  #pricing.sc-act--pinned{height:auto!important}
  /* pinned travel: the stage sticks while this spacer scrolls under it (read by pricing.js) */
  #pricing.sc-act--pinned::after{content:"";display:block;height:140vh}
  #pricing.sc-act--pinned .pricing-stage.sc-stage{position:sticky;top:0;height:auto;overflow:visible;padding-block:40px 56px}
  .sc-ready .pr-live .pricing-heading{margin-bottom:22px}
  .sc-ready .pr-live .pricing-grid{gap:0}
  .sc-ready .pr-live .plan[data-sc-in]{
    --k:0;
    grid-area:1/1;align-self:start;margin-top:calc(var(--k) * 58px);z-index:var(--k);
    background:#f7f7f1;
    box-shadow:0 -14px 30px -22px #1f3a2880;
    opacity:var(--o,1);
    transform:translateY(var(--y,0px)) scale(var(--sc,1));transform-origin:50% 0;
    transition:none}
  .sc-ready .pr-live .plan:nth-child(2){--k:1}
  .sc-ready .pr-live .plan:nth-child(3){--k:3}
  .sc-ready .pr-live .plan:nth-child(4){--k:2}
  /* a covered card keeps only its tab; the body under the next card fades out */
  .sc-ready .pr-live .plan :is(.account-limit,.plan-features,.plan-cta){opacity:calc(1 - var(--cv,0))}
  /* Pro lands last, on top: deepens from a lighter green to its forest green */
  .sc-ready .pr-live .plan.featured[data-sc-in]{
    background:color-mix(in oklab,#2b4c37 calc(var(--t,1) * 100%),#4a7556);
    box-shadow:0 -14px 30px -22px #1f3a2880,0 calc(var(--t,1) * 26px) calc(var(--t,1) * 50px) -28px #1f3a28b3}
  .sc-ready .pr-live .plan.featured .recommendation{opacity:clamp(0,calc((var(--t,1) - .5) / .3),1)}
  .sc-ready .pr-live .pricing-note[data-sc-in]{
    opacity:var(--pr-n,1);transform:translateY(calc((1 - var(--pr-n,1)) * 24px));transition:none}
  .sc-ready .pr-live .server-preview[data-sc-in]{
    opacity:var(--pr-s,1);transform:translateY(calc((1 - var(--pr-s,1)) * 30px));transition:none}
}

/* ---- short phones: flow, scroll-linked (--pr-v per card, 0 -> 1) ----------- */
@media(max-width:760px) and (max-height:699px) and (prefers-reduced-motion:no-preference){
  .sc-ready .pr-live .plan,.sc-ready .pr-live .pricing-note,.sc-ready .pr-live .server-preview{
    --v:var(--pr-v,1);
    --e:calc(var(--v) * var(--v) * (3 - 2 * var(--v)));
  }
  .sc-ready .pr-live .plan[data-sc-in],.sc-ready .pr-live .pricing-note[data-sc-in],.sc-ready .pr-live .server-preview[data-sc-in]{
    opacity:clamp(0,calc(var(--v) * 2.4),1);
    transform:translateY(calc((1 - var(--e)) * 46px));
    transition:none}
  .sc-ready .pr-live .plan.featured[data-sc-in]{
    opacity:clamp(0,calc(var(--v) * 3),1);
    transform:translateY(calc((1 - var(--e)) * 64px)) scale(calc(.84 + var(--e) * .16));
    transform-origin:50% 0;
    background:color-mix(in oklab,#2b4c37 calc(var(--e) * 100%),#4a7556);
    box-shadow:0 calc(var(--e) * 26px) calc(var(--e) * 50px) -28px #1f3a28b3}
}

/* ---- 761-900 wide or short screens: view-timeline entrances -------------- */
@supports (animation-timeline:view()){
@media(min-width:761px) and ((max-width:900px) or (max-height:850px)) and (prefers-reduced-motion:no-preference){
  @keyframes pr-in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  @keyframes pr-pro{from{opacity:0;transform:translateY(46px) scale(.93)}60%{opacity:1}to{opacity:1;transform:none}}
  .pricing-section .plan[data-sc-in],.pricing-section .pricing-note[data-sc-in],.pricing-section .server-preview[data-sc-in]{
    opacity:1;transform:none;transition:none;
    animation:pr-in linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  .pricing-section .plan.featured[data-sc-in]{animation-name:pr-pro;position:relative;
    box-shadow:0 26px 50px -28px #1f3a28b3}
}}

/* ---- desktop pin ------------------------------------------------------------ */
@media(min-width:901px) and (min-height:851px) and (prefers-reduced-motion:no-preference){
  html.sc-ready .pricing-stage{
    --a:var(--pr-a,1);
    display:flex;flex-direction:column;justify-content:center;
    padding-block:20px;
    overflow-x:clip;overflow-y:visible;
  }
  .sc-ready .pricing-stage .wrap{width:min(1180px,calc(100% - 72px));transform:translateY(var(--pr-dr,0px))}

  .sc-ready .pricing-heading{display:grid;grid-template-columns:1fr auto;column-gap:48px;align-items:end;text-align:left;margin-bottom:26px;position:relative;z-index:0;transform:translateY(var(--pr-dh,0px))}
  .sc-ready .pricing-heading .tiny-label{grid-column:1/-1;justify-self:start;margin-bottom:12px}
  .sc-ready .pricing-heading h2{text-align:left;font-size:clamp(34px,3.3vw,46px)}
  .sc-ready .pricing-heading p{max-width:340px;margin:0 0 8px;font-size:14px;line-height:1.6}

  .sc-ready .pricing-grid{overflow:visible;border:0;background:none;border-radius:0;position:relative;z-index:1}
  .sc-ready .plan{
    --b:1;
    --r:calc((1 - var(--j,1)) * 9px);
    padding:20px 18px 18px;
    border:1px solid #cbd2c3;margin-left:-1px;background:#f7f7f1;
    position:relative;z-index:2;
    border-radius:var(--r);
  }
  .sc-ready .plan:first-child{margin-left:0;border-radius:9px var(--r) var(--r) 9px;z-index:1}
  .sc-ready .plan:last-child{border-radius:var(--r) 9px 9px var(--r)}
  .sc-ready .plan h3{margin-top:10px}
  .sc-ready .price{margin-top:16px}
  .sc-ready .account-limit{margin:8px 0 14px}
  .sc-ready .plan-features{margin-bottom:16px;gap:7px}
  .sc-ready .plan-for{margin-top:12px;line-height:1.6}

  /* side cards: positions from pricing.js, content builds as each card comes out */
  .sc-ready .plan:not(.featured)[data-sc-in]{
    opacity:var(--o,1);
    transform:translate(var(--x,0px),var(--y,0px)) scale(var(--sc,1));
    transition:none}
  .sc-ready .plan:not(.featured) .price{
    --c:clamp(0,calc((var(--b) - .02) / .28),1);
    opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 12px))}
  .sc-ready .plan:not(.featured) .account-limit{opacity:clamp(0,calc((var(--b) - .08) / .28),1)}
  .sc-ready .plan:not(.featured) .plan-features li{
    --l:clamp(0,calc((var(--b) - .14 - var(--i,0) * .07) / .22),1);
    opacity:var(--l);transform:translateX(calc((1 - var(--l)) * -10px))}
  .sc-ready .plan:not(.featured) .plan-cta{opacity:clamp(0,calc((var(--b) - .4) / .3),1)}
  .sc-ready .plan:not(.featured) .plan-for{opacity:clamp(0,calc((var(--b) - .5) / .3),1)}
  .sc-ready .plan-features li:nth-child(2){--i:1}
  .sc-ready .plan-features li:nth-child(3){--i:2}
  .sc-ready .plan-features li:nth-child(4){--i:3}

  /* Pro: stands up and builds on the approach (--pr-a), position/scale from pricing.js */
  .sc-ready .plan.featured{
    --ar:clamp(0,calc((var(--a) - .1) / .9),1);
    --ea:calc(var(--ar) * var(--ar) * (3 - 2 * var(--ar)));
    z-index:3;border-color:#2b4c37;background:#2b4c37;color:#f6f7ec}
  .sc-ready .plan.featured[data-sc-in]{
    transform:
      translate(var(--x,0px),var(--y,0px))
      perspective(1400px) rotateX(calc((1 - var(--ea)) * 16deg))
      scale(calc(var(--sc,1) - (1 - var(--ea)) * .3));
    transform-origin:50% 18%;
    transition:none;opacity:1}
  .sc-ready .plan.featured::after{
    content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
    box-shadow:0 36px 70px -26px #1f3a28b3,0 10px 26px -14px #1f3a2899;
    opacity:calc(.35 + var(--ea) * .65)}
  .sc-ready .featured .price{
    --c:clamp(0,calc((var(--a) - .40) / .2),1);
    opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 14px))}
  .sc-ready .featured .account-limit{opacity:clamp(0,calc((var(--a) - .46) / .2),1)}
  .sc-ready .featured .plan-features li{
    --l:clamp(0,calc((var(--a) - .56 - var(--i,0) * .07) / .14),1);
    opacity:var(--l);transform:translateX(calc((1 - var(--l)) * -12px))}
  .sc-ready .featured .plan-cta{opacity:clamp(0,calc((var(--a) - .80) / .14),1)}
  .sc-ready .featured .plan-for{opacity:clamp(0,calc((var(--a) - .86) / .14),1)}

  /* note, then Server; they begin on the last pinned frames and land with the release */
  .sc-ready .pricing-note{margin-top:20px;max-width:1000px;line-height:1.7}
  .sc-ready .server-preview{margin-top:16px;padding-top:16px}
  .sc-ready .server-preview h3{font-size:20px;margin:6px 0}
  .sc-ready .server-preview p{line-height:1.6}
  .sc-ready .pricing-note[data-sc-in]{
    opacity:var(--pr-n,1);transform:translateY(calc((1 - var(--pr-n,1)) * 18px));transition:none}
  .sc-ready .server-preview[data-sc-in]{
    opacity:var(--pr-s,1);transform:translateY(calc((1 - var(--pr-s,1)) * 28px));transition:none}
}