:root{color-scheme:dark;--bg:#08090b;--surface:#111217;--text:#f3f3f6;--muted:#9b9ba8;--accent:#c5b3f7;--line:#27272f;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--text);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img{max-width:100%;height:auto;display:block}.skip{position:fixed;top:-100px;z-index:20;background:white;color:black;padding:12px}.skip:focus{top:10px}.header{height:88px;max-width:1400px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0c;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:650;letter-spacing:-.7px;white-space:nowrap}.brand img{border-radius:10px}.version{font-size:12px;font-weight:500;letter-spacing:0;border:1px solid #494252;color:#d6c9f7;border-radius:5px;padding:1px 6px;margin-left:2px}.header nav{display:flex;gap:32px;font-size:14px;color:#babac4}.header nav a:hover,footer a:hover{color:var(--accent)}.button{border:1px solid #e3d7ff5e;background:var(--accent);color:#181022;border-radius:8px;min-height:52px;padding:12px 23px;display:inline-flex;justify-content:center;align-items:center;gap:24px;font-weight:600;font-size:15px;transition:background .2s,transform .2s}.button:hover{background:#dfd2ff;transform:translateY(-2px)}.button.small{min-height:40px;padding:8px 15px;font-size:14px;gap:17px}.eyebrow{font-size:12px;letter-spacing:2.5px;font-weight:600;color:var(--accent);margin:0 0 24px}.hero{text-align:center;padding-top:64px;overflow:hidden}.hero .eyebrow{display:flex;align-items:center;justify-content:center;gap:12px}.line{display:inline-block;width:25px;height:1px;background:var(--accent)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(72px,7.8vw,116px);line-height:1.02;letter-spacing:-6px;font-weight:550;margin-bottom:24px}h1 span{background:linear-gradient(110deg,#e5dcff 10%,#b5a0ed 80%);background-clip:text;color:transparent}.hero-copy{font-size:20px;line-height:1.65;color:#aaaab6;margin-bottom:26px}.actions{display:flex;align-items:center;justify-content:center;gap:28px}.text-button{display:flex;align-items:center;gap:9px;font-size:14px;color:#d7d5dd}.text-button:hover{color:var(--accent)}.play{font-size:24px;line-height:1}.platforms{font-size:12px;color:#7f7f8d;margin:17px 0 32px;letter-spacing:.3px}.hero-media{max-width:1090px;margin:0 auto;padding:0 25px;position:relative}.hero-media>img{width:100%;border:1px solid #313039;border-radius:12px;box-shadow:0 -25px 130px -65px #8a6bc3}.hero-media.mac>img{border:0;border-radius:0;box-shadow:none}.hero-media.mac{max-width:1190px;margin-top:-14px}.hero-media figcaption{display:flex;align-items:center;justify-content:space-between;margin:18px 8px 0;color:#d2cfd9;font-size:11px;letter-spacing:2px}.hero-media figcaption span{font-size:11px;color:#73737f;letter-spacing:.5px}.intro-strip{max-width:1200px;margin:72px auto 0;padding:35px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:40px}.intro-strip p{margin:0;font-size:16px;color:var(--muted)}.intro-strip p:first-child{font-size:22px;line-height:1.45;letter-spacing:-.5px;color:#f1eef8}.intro-strip strong{font-weight:400;color:var(--muted)}.section{max-width:1264px;padding:110px 32px 0;margin:auto}.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:70px;margin-bottom:45px}h2{font-size:clamp(36px,4.1vw,57px);line-height:1.12;font-weight:500;letter-spacing:-2.2px;margin:0}h2 span{color:#92919f}.section-description{max-width:325px;color:var(--muted);margin:0 0 5px;font-size:16px}.mode-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:0;gap:45px}.mode-tabs button{display:flex;align-items:center;gap:12px;border:0;background:none;color:#71717f;padding:17px 3px;border-bottom:2px solid transparent;font-size:12px}.mode-tabs strong{font-weight:500;font-size:17px}.mode-tabs [aria-selected=true]{border-color:var(--accent);color:var(--accent)}.mode-panel{display:grid;grid-template-columns:.8fr 1.2fr;background:linear-gradient(120deg,#19171f,#101116);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;overflow:hidden;min-height:400px}.mode-copy{padding:45px}.pill{display:inline-flex;border:1px solid #bda5f32c;border-radius:4px;padding:4px 8px;font-size:10px;letter-spacing:1.2px;color:var(--accent)}.mode-copy h3{font-size:35px;font-weight:500;line-height:1.15;letter-spacing:-1px;margin:23px 0 18px}.mode-copy>p{font-size:15px;max-width:330px;color:var(--muted)}.mode-note{display:flex;gap:12px;align-items:flex-start;border-top:1px solid #ffffff14;padding-top:18px;margin-top:25px;color:var(--accent)}.mode-note p{font-size:13px;color:#b8b3c7;margin:0}.mode-visual{position:relative;display:flex;align-items:center;overflow:hidden;min-width:0}.mode-visual>img{max-width:none;width:120%;margin-left:12px;border-radius:7px;border:1px solid #52505e;box-shadow:0 14px 60px #0008}.image-caption{position:absolute;bottom:14px;right:18px;font-size:10px;letter-spacing:1.7px;color:#a5a0b4;background:#0b0b0ecd;border:1px solid #ffffff10;border-radius:3px;padding:4px 7px}.academy-visual{position:relative;height:460px;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#121315}.academy-visual img{width:100%;height:100%;object-fit:cover;object-position:center 70%;opacity:.8}.academy-overlay{position:absolute;top:0;left:0;right:0;padding:30px 38px;background:linear-gradient(#0d0d11 45%,#0d0d11db 80%,transparent);height:43%}.academy-overlay p{font-size:29px;line-height:1.2;font-weight:500;letter-spacing:-.8px;margin:15px 0}.three-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:35px}.three-columns article>span{font-size:12px;color:var(--accent);display:block;margin-bottom:14px}.three-columns h3{font-size:19px;font-weight:500;letter-spacing:-.4px;margin-bottom:12px}.three-columns p{color:var(--muted);font-size:15px;margin-bottom:0;line-height:1.7}.workspace{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px;align-items:center;overflow:hidden;padding-top:130px}.workspace-copy>p:not(.eyebrow){max-width:310px;margin-top:23px;color:var(--muted);font-size:16px}.underlined{border-bottom:1px solid #5f556f;padding-bottom:8px;font-size:14px;color:var(--accent);display:inline-flex;gap:30px;margin-top:8px}.workspace-image{position:relative;min-width:0;padding:35px 0}.workspace-image img{max-width:none;width:125%;border:1px solid #51475e;border-radius:10px;box-shadow:-30px 30px 100px -40px #593d79}.compatibility{padding-top:130px}.compatibility .three-columns{border-top:1px solid var(--line);padding-top:32px;margin-top:35px}.three-columns .feature-icon{font-size:30px;line-height:1.3}.pricing{display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:90px;margin-top:110px;padding-top:80px;padding-bottom:80px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 85% 65%,#7760a31b,transparent 65%)}.pricing-description{color:var(--muted);font-size:17px;margin:24px 0 0}.price-card{background:linear-gradient(130deg,#1c1924,#111216);border:1px solid #494052;border-radius:12px;padding:30px}.price-top{display:flex;align-items:center;gap:12px}.price-top img{border-radius:12px}.price-top h3{font-size:19px;font-weight:500;margin:0}.price-top p{font-size:12px;color:var(--muted);margin:0}.price-top .pill{margin-left:auto;font-size:9px;padding:4px 6px}.price{font-size:58px;line-height:1.1;letter-spacing:-2px;margin:32px 0 25px}.price>span{font-size:15px;color:var(--muted);letter-spacing:0;margin-left:9px}.price-card ul{list-style:none;padding:23px 0 0;margin:0 0 25px;border-top:1px solid #ffffff12}.price-card li{font-size:14px;color:#cbc8d3;margin-bottom:11px}.price-card li:before{content:'✓';color:var(--accent);margin-right:12px}.full{width:100%}.price-note{font-size:11px;color:#8f889c;text-align:center;margin:15px 0 0}.faq{max-width:900px;padding-bottom:100px}.faq h2{font-size:43px;margin-bottom:35px}.faq details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:22px 0;font-size:16px;display:flex;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}summary>span{font-size:22px;font-weight:300;color:var(--accent)}details[open] summary>span{transform:rotate(45deg)}details>p{color:var(--muted);font-size:15px;padding-right:40px;margin-bottom:23px}footer{max-width:1200px;margin:auto;border-top:1px solid var(--line);padding:35px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}footer>p{grid-column:1;color:var(--muted);font-size:14px;margin:0}footer>div{grid-column:2;grid-row:1;display:flex;justify-content:flex-end;gap:25px;font-size:13px;color:#bbb8c3}footer small{grid-column:2;text-align:right;color:#71707d;font-size:12px}dialog{background:#15131c;color:var(--text);border:1px solid #57496b;border-radius:16px;width:min(460px,calc(100% - 32px));padding:38px;box-shadow:0 25px 100px #000b}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog>img{margin-bottom:24px;border-radius:12px}dialog h2{font-size:40px;margin-bottom:20px}dialog>p:not(.eyebrow){color:var(--muted);font-size:16px}.close-dialog{position:absolute;right:18px;top:12px;background:none;border:0;color:#c9c4d2;font-size:28px}.close-action{margin-top:12px}
@media(min-width:1600px){.hero{padding-top:80px}}@media(max-width:900px){.header nav{gap:18px}.section-top{gap:30px}.section-description{max-width:260px}.mode-copy{padding:28px}.mode-copy h3{font-size:29px}.workspace{gap:30px}.pricing{gap:40px}.price-top .pill{display:none}footer{margin:0 32px}.hero-media{max-width:95%}}
@media(max-width:650px){html{scroll-padding-top:30px}.header{height:74px;padding:0 20px;gap:10px}.brand{font-size:20px;gap:8px}.brand img{width:30px;height:30px}.header nav{display:none}.header .button{font-size:12px;padding:8px 12px;gap:8px}.version{display:none}.hero{padding-top:49px}.hero .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:23px}h1{font-size:72px;letter-spacing:-4px}.hero-copy{font-size:17px;margin-bottom:25px}.actions{flex-direction:column;gap:17px}.actions>.button{min-height:50px}.platforms{font-size:11px;margin-top:20px}.hero-media{padding:0 15px;max-width:100%;margin-top:32px}.hero-media.mac{max-width:110%;width:110%;margin-left:-5%;padding:0}.hero-media figcaption{font-size:9px;letter-spacing:1px;margin-top:12px;gap:12px}.hero-media.mac figcaption{margin:12px 8% 0}.hero-media figcaption span{font-size:9px}.intro-strip{margin:42px 20px 0;padding:24px 0;flex-direction:column;gap:20px}.intro-strip p:first-child{font-size:20px}.intro-strip p{font-size:14px}.section{padding:72px 20px 0}.section-top{display:block;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:1.8px;margin-bottom:18px}h2{font-size:37px;letter-spacing:-1.5px}.section-description{max-width:100%;margin-top:20px;font-size:15px}.mode-tabs{gap:0;justify-content:space-between}.mode-tabs button{gap:8px;padding:16px 10px}.mode-tabs strong{font-size:16px}.mode-panel{grid-template-columns:1fr}.mode-copy{padding:27px}.mode-copy h3{font-size:30px}.mode-visual{min-height:225px;padding-bottom:35px}.mode-visual>img{width:105%;margin-left:20px}.academy-visual{height:350px}.academy-visual img{object-fit:cover;object-position:50% 75%}.academy-overlay{padding:24px;height:46%}.academy-overlay p{font-size:23px}.three-columns{grid-template-columns:1fr;gap:25px;margin-top:27px}.three-columns article{padding-bottom:24px;border-bottom:1px solid var(--line)}.three-columns article:last-child{border:0;padding-bottom:0}.three-columns article>span{margin-bottom:8px}.three-columns h3{margin-bottom:9px}.workspace{grid-template-columns:1fr;gap:15px}.workspace h2 br:nth-child(2){display:none}.workspace-copy>p:not(.eyebrow){max-width:100%}.workspace-image img{width:110%}.workspace-image{padding:20px 0}.compatibility .three-columns{margin-top:30px}.pricing{grid-template-columns:1fr;gap:30px;margin:65px 20px 0;padding:42px 0}.price-card{padding:25px}.price-top .pill{display:inline-flex}.faq{padding-top:65px;padding-bottom:65px}.faq h2{font-size:33px}.faq summary{font-size:15px}.faq details p{padding-right:10px;font-size:14px}footer{margin:0 20px;padding:28px 0;grid-template-columns:1fr;gap:16px}footer>div,footer small,footer>p{grid-column:1;grid-row:auto;text-align:left;justify-content:flex-start}footer small{margin-top:8px}.button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Performance-space direction: a photographed device with a hinged screen. */
.hero-stage{position:relative;text-align:left;padding:48px max(5%,calc((100vw - 1200px)/2)) 0;isolation:isolate;background:radial-gradient(ellipse at 50% 75%,#21172d4d,transparent 58%)}
.hero-stage-copy{max-width:1200px;margin:auto;position:relative;z-index:2}.hero-stage .eyebrow{justify-content:flex-start;margin-bottom:24px;font-size:11px;letter-spacing:2.4px}.hero-stage h1{font-size:clamp(72px,8.6vw,128px);letter-spacing:-7px;line-height:.98;margin:0 0 22px;max-width:720px}.hero-stage h1 .word-line{display:block;overflow:hidden;background:none;color:inherit;padding-bottom:.12em;margin-bottom:-.1em}.hero-stage h1 .hero-word{display:block;background:none;color:inherit}.hero-stage h1 .accent-word{color:#c5b3f7;background:none}.hero-bottom-copy{position:absolute;right:0;bottom:11px;width:330px}.hero-stage .hero-copy{font-size:16px;line-height:1.65;margin-bottom:22px;color:#b7b2c1}.hero-stage .actions{justify-content:flex-start;gap:19px;flex-wrap:wrap}.hero-stage .button{font-size:14px;padding:12px 17px}.hero-stage .text-button{font-size:13px}.opening-mac{position:relative;margin:-16px -5% 0;isolation:isolate}.mac-perspective{perspective:1800px;perspective-origin:50% 47%;position:relative;z-index:1}.mac-assembly{position:relative;aspect-ratio:1672/941;width:100%;transform-style:preserve-3d}.mac-lid{position:absolute;left:15.01%;top:4.46%;width:69.98%;height:75.13%;transform-origin:50% 100%;transform:rotateX(0);transform-style:preserve-3d;z-index:2;backface-visibility:hidden}.lid-art{position:absolute;inset:0;overflow:hidden;border-radius:3.7% 3.7% .3% .3%}.lid-art>img{position:absolute;width:142.9%;max-width:none;left:-21.45%;top:-5.94%}.mac-base{position:absolute;left:0;top:79.49%;width:100%;height:20.51%;overflow:hidden;z-index:0}.mac-base>img{position:absolute;width:100%;max-width:none;top:-387.57%;left:0}.screen-content{position:absolute;left:2.31%;top:5.35%;width:95.38%;height:89.06%;overflow:hidden;background:#0b0c0e;transform:translateZ(1px)}.screen-content>img{width:100%;height:100%;object-fit:fill}.screen-shade{position:absolute;inset:0;background:#08090b;opacity:0;pointer-events:none}.lid-highlight{position:absolute;inset:0;background:linear-gradient(125deg,transparent 25%,#ddd2f921 46%,transparent 63%);opacity:0;pointer-events:none;transform:translateZ(2px)}.stage-light{position:absolute;left:20%;right:20%;bottom:7%;height:20%;background:#ad80e61a;filter:blur(60px);border-radius:50%;pointer-events:none}.opening-mac figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 7% 0;font-size:10px;letter-spacing:1.8px;color:#787280}.opening-mac figcaption>span:last-child{letter-spacing:.2px}.replay-opening,.motion-toggle{border:0;background:none;color:#b6acc6;font-size:12px;padding:8px;display:inline-flex;align-items:center;gap:7px}.replay-opening:hover,.motion-toggle:hover{color:white}.replay-opening span{font-size:17px}.hero-stage-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0;margin-top:24px;border-top:1px solid #b29cc520;font-size:10px;letter-spacing:1.4px;color:#82798f}.hero-stage-footer>a{display:flex;gap:20px;align-items:center}.hero-stage-footer>a span{font-size:18px}.motion-toggle{font-size:10px;letter-spacing:1px;text-transform:uppercase}.intro-strip{margin-top:35px;border-top:0;padding-top:45px;padding-bottom:45px}.intro-strip p:first-child{font-size:29px;line-height:1.3}.intro-strip p:last-child{align-self:center}.mode-tabs{position:relative}.mode-tabs button{transition:color .2s,border-color .2s}.mode-panel{background:radial-gradient(ellipse at 100% 70%,#242030,#101116 70%)}.mode-copy h3{white-space:normal}.mode-visual img{transition:transform .65s cubic-bezier(.22,1,.36,1),filter .65s;transform:scale(1);filter:saturate(.9)}.mode-panel[data-current-mode=manual] .mode-visual img{transform:scale(1.06) translateX(2%)}.mode-panel[data-current-mode=auto] .mode-visual img{transform:scale(1.035);filter:saturate(.55)}.academy-visual{height:510px;border-radius:4px}.academy-overlay{background:linear-gradient(#0d0d11 20%,#0d0d11e8 70%,transparent);height:42%}.academy-overlay p{font-size:38px;letter-spacing:-1.5px}.three-columns{gap:0}.three-columns article{padding-right:28px}.three-columns article+article{padding-left:28px;border-left:1px solid var(--line)}.workspace-image img{transition:transform .8s;transform-origin:50% 50%}.workspace-image:hover img{transform:translateX(-3%)}.button>span{transition:transform .25s}.button:hover>span{transform:translate(2px,-2px)}
@keyframes word-rise{from{transform:translateY(112%);opacity:.3}to{transform:translateY(0);opacity:1}}
@keyframes soft-enter{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes open-lid{0%,8%{transform:rotateX(-86deg)}72%{transform:rotateX(2deg)}100%{transform:rotateX(0)}}
@keyframes screen-wake{0%,25%{opacity:1}65%,100%{opacity:0}}
@keyframes glass-light{0%,30%{opacity:0;transform:translateX(-12%) translateZ(2px)}50%{opacity:.7}100%{opacity:0;transform:translateX(12%) translateZ(2px)}}
@keyframes light-wake{0%,20%{opacity:0;transform:scaleX(.65)}100%{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){
.motion-enabled .hero-word{animation:word-rise 1s cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
.motion-enabled .entrance{animation:soft-enter .85s cubic-bezier(.16,1,.3,1) var(--delay,0ms) both}
.motion-enabled .is-opening .mac-lid{animation:open-lid 3.8s cubic-bezier(.22,.65,.2,1) both;will-change:transform}
.motion-enabled .is-opening .screen-shade{animation:screen-wake 3.8s ease both}
.motion-enabled .is-opening .lid-highlight{animation:glass-light 3.8s ease both}
.motion-enabled .is-opening .stage-light{animation:light-wake 3.8s ease both}
}
.motion-disabled *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-disabled .mac-lid{transform:none!important}.motion-disabled .screen-shade{opacity:0!important}.motion-disabled .lid-highlight{opacity:0!important}.motion-disabled .hero-word,.motion-disabled .entrance{opacity:1!important;transform:none!important}
@media(min-width:1600px){.hero-stage{padding-top:65px}.opening-mac{margin-top:-25px}}
@media(max-width:1000px){.hero-stage h1{font-size:90px}.hero-bottom-copy{width:275px}.hero-stage .actions{gap:12px}.opening-mac{margin-top:12px}.hero-stage .hero-copy{font-size:15px}}
@media(max-width:750px){.hero-stage{padding:38px 20px 0}.hero-stage h1{font-size:clamp(64px,13vw,96px);letter-spacing:-4.5px;margin-bottom:20px}.hero-bottom-copy{position:static;width:auto}.hero-stage .hero-copy{font-size:15px;margin-bottom:20px}.hero-stage .actions{flex-direction:row;gap:22px}.hero-stage .eyebrow{font-size:9px;letter-spacing:1.5px}.opening-mac{width:calc(100% + 60px);margin:22px -30px 0}.mac-perspective{perspective:900px}.opening-mac figcaption{margin:8px 35px 0;flex-wrap:wrap;gap:0;font-size:8px;letter-spacing:1px}.opening-mac figcaption>span:first-child{display:none}.replay-opening{font-size:11px;padding-left:0}.hero-stage-footer{flex-wrap:wrap;margin-top:17px;gap:12px;font-size:8px}.hero-stage-footer>a{display:none}.hero-stage-footer .motion-toggle{font-size:9px}.intro-strip{padding-top:20px;margin-top:15px}.intro-strip p:first-child{font-size:24px}.intro-strip p:last-child{align-self:flex-start}.academy-visual{height:350px}.academy-overlay p{font-size:27px}.three-columns article,.three-columns article+article{padding-left:0;padding-right:0;border-left:0}.workspace-image:hover img{transform:none}}

[hidden]{display:none!important}

/* Fit the device, message and actions into the initial viewport. */
:root{--header-height:72px}
.header{height:var(--header-height)}
.hero-stage{height:calc(100svh - var(--header-height));min-height:520px;padding-top:6px;padding-bottom:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:visible}
.hero-stage .opening-mac{flex:none;width:var(--hero-device-width,min(76vw,calc(48svh * 1.776)));max-width:100%;margin:0 auto}
.hero-stage .opening-mac figcaption{margin:0 7%;min-height:25px;line-height:1.3}
.hero-stage .replay-opening{padding:3px 6px;font-size:11px}
.hero-stage .hero-stage-copy{flex:none;width:100%;text-align:center;margin:0 auto;max-width:1000px}
.hero-stage .hero-stage-copy .eyebrow{justify-content:center;margin-bottom:10px;font-size:10px;line-height:1.4}
.hero-stage h1{max-width:none;margin:0 auto 10px;font-size:clamp(40px,6.8svh,76px);letter-spacing:-2.8px;line-height:1.02}
.hero-stage h1 .word-line{display:inline-block;vertical-align:top;padding-bottom:.12em;margin-bottom:-.1em}
.hero-stage h1 .word-line+.word-line{margin-left:.13em}
.hero-stage .hero-bottom-copy{position:static;width:auto}
.hero-stage .hero-copy{font-size:16px;line-height:1.5;margin:0 auto 14px}
.hero-stage .hero-copy br{display:none}
.hero-stage .hero-copy br:after{content:' '}
.hero-stage .actions{justify-content:center;flex-direction:row;flex-wrap:wrap;gap:20px}
.hero-stage .actions .button{min-height:46px;padding:10px 17px}
.hero-stage .hero-stage-footer{flex:none;align-self:stretch;margin-top:4px;padding:8px 0;min-height:34px;gap:12px;font-size:9px;line-height:1.4}
@media(max-width:750px){
:root{--header-height:64px}
.hero-stage{padding:4px 16px 8px;min-height:510px;gap:10px}
.hero-stage .opening-mac{max-width:calc(100% + 24px)}
.hero-stage .opening-mac figcaption{margin:0 20px;gap:8px;flex-wrap:nowrap;font-size:9px}
.hero-stage .hero-stage-copy .eyebrow{font-size:9px;letter-spacing:1.2px}
.hero-stage h1{font-size:clamp(38px,8vw,58px);letter-spacing:-1.8px}
.hero-stage .hero-copy{max-width:340px;font-size:15px;margin-bottom:14px}
.hero-stage .actions{gap:14px}
.hero-stage .actions .button{font-size:13px}
.hero-stage .hero-stage-footer{margin-top:2px;font-size:8px}
}
@media(max-height:600px) and (min-width:751px){
:root{--header-height:56px}
.hero-stage{min-height:420px;gap:6px}
.hero-stage .hero-stage-copy .eyebrow{display:none}
.hero-stage h1{font-size:38px;margin-bottom:6px}
.hero-stage .hero-copy{font-size:14px;margin-bottom:8px}
.hero-stage .hero-stage-footer{padding:4px 0;min-height:26px}
}

/* A restrained motion language: short interaction responses, softer entrances. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.mode-tabs.has-indicator:after{content:'';position:absolute;bottom:0;left:0;width:var(--tab-width,0px);height:2px;background:var(--accent);transform:translateX(var(--tab-x,0px));pointer-events:none}
.mode-tabs.has-indicator [aria-selected=true]{border-bottom-color:transparent}
@media(prefers-reduced-motion:no-preference){
.motion-enabled .mode-tabs:after{transition:transform 420ms var(--ease-out),width 420ms var(--ease-out)}
.motion-enabled .button{transition:transform 280ms var(--ease-out),background-color 280ms,border-color 280ms,box-shadow 280ms}
.motion-enabled .button:hover{box-shadow:0 5px 24px #b29bdd1c;border-color:#e8dcff99;transform:translateY(-2px)}
.motion-enabled .button:active{transform:translateY(0) scale(.985);box-shadow:none}
.motion-enabled .text-button,.motion-enabled .header nav a,.motion-enabled footer a{transition:color 220ms}
.motion-enabled .text-button>span,.motion-enabled .underlined>span{display:inline-block;transition:transform 320ms var(--ease-out)}
.motion-enabled .text-button:hover>span{transform:translateY(3px)}
.motion-enabled .underlined:hover>span{transform:translate(3px,-3px)}
.motion-enabled .price-card{transition:border-color 450ms,box-shadow 450ms,transform 450ms var(--ease-out)}
.motion-enabled .price-card:hover,.motion-enabled .price-card:focus-within{border-color:#9680b6;box-shadow:0 18px 60px -25px #9676ba30;transform:translateY(-3px)}
.motion-enabled .academy-visual>img{transition:transform 900ms var(--ease-out),opacity 700ms;transform-origin:50% 65%}
.motion-enabled .academy-visual:hover>img{transform:scale(1.025);opacity:.95}
.motion-enabled .three-columns article h3{transition:color 300ms}
.motion-enabled .three-columns article:hover h3{color:#dacbfc}
.motion-enabled .faq summary{transition:color 220ms}
.motion-enabled .faq summary:hover,.motion-enabled .faq summary:focus-visible{color:var(--accent)}
.motion-enabled .faq summary>span{transition:transform 300ms var(--ease-out)}
.motion-enabled dialog::backdrop{animation:backdrop-arrive 300ms ease both}
}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(hover:none){
.motion-enabled .button:hover,.motion-enabled .price-card:hover{transform:none;box-shadow:none}
.motion-enabled .academy-visual:hover>img{transform:none;opacity:.8}
}

/* Two clear entry points: ongoing free access and the paid subscription. */
.pricing{display:block}
.pricing-heading{max-width:960px;margin-bottom:36px}
.pricing-plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px}
.pricing-plans .price-card{display:flex;flex-direction:column;min-width:0}
.pricing-plans .price-top{min-height:56px}
.pricing-plans .price-top h3{font-size:19px}
.pricing-plans .price-card ul{margin-bottom:10px}
.plan-boundary{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 24px;flex:1}
.free-plan{background:#111216;border-color:var(--line)}
.free-plan .button{background:transparent;color:var(--text);border-color:#645b70}
.free-plan .button:hover{background:#24202b}
.pricing-plans .price-note{min-height:18px}
@media(max-width:650px){.pricing-plans{grid-template-columns:1fr;gap:20px}.pricing-heading{margin-bottom:28px}.pricing-plans .price-top h3{font-size:18px}}

/* Quiet product presentation: one headline, one action, one dark surface. */
.hero-stage{background:var(--bg);gap:12px;padding-bottom:28px}
.hero-stage .stage-light{display:none}
.hero-stage .opening-mac figcaption{display:block;text-align:center;color:#93909b;font-size:12px;letter-spacing:.1px;min-height:20px}
.hero-stage .hero-stage-copy{max-width:800px}
.hero-stage h1.hero-handwriting{width:min(650px,100%);margin:4px auto 12px;line-height:1;letter-spacing:0;color:#eee8f7}
.hero-handwriting svg{display:block;width:100%;height:auto;overflow:visible}
.hero-handwriting path{stroke-dasharray:1;stroke-dashoffset:0}
.hero-stage .hero-copy{color:#a8a5b0;font-size:17px;line-height:1.45;margin-bottom:20px}
.hero-stage .actions .button{border-radius:24px;padding:11px 25px;font-size:14px;background:#d0bef6;border-color:transparent}


@keyframes write-headline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:no-preference){.motion-enabled .signature-writing path{animation:write-headline var(--pen-duration,160ms) linear var(--pen-delay,0ms) both}}
.motion-disabled .hero-handwriting path{stroke-dashoffset:0!important}
@media(max-width:750px){
.hero-stage{gap:14px;padding-bottom:24px}
.hero-stage h1.hero-handwriting{width:min(540px,100%);margin-bottom:16px}
.hero-stage .hero-copy{font-size:15px;margin-bottom:18px}
}
@media(max-width:650px){}
@media(max-height:600px) and (min-width:751px){.hero-stage{padding-bottom:12px;gap:6px}.hero-stage h1.hero-handwriting{width:440px;margin-bottom:8px}.hero-stage .hero-copy{font-size:14px;margin-bottom:12px}}

/* Two quiet, clearly differentiated hero actions. */
.hero-stage .actions{gap:12px}
.hero-stage .actions .button{min-width:132px}
.hero-stage .actions .hero-learn{background:transparent;border-color:#76658e;color:#ded3ef}
.hero-stage .actions .hero-learn:hover{background:#211c29;border-color:#b29ace}

/* Split hero: readable message on the left, opening product on the right. */
.hero-stage{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;align-content:center;gap:clamp(20px,3vw,56px);height:calc(100svh - var(--header-height));min-height:520px;padding:32px max(5%,calc((100vw - 1360px)/2)) 56px}
.hero-stage .hero-stage-copy{grid-column:1;grid-row:1;min-width:0;text-align:left;margin:0;max-width:500px}
.hero-stage h1.hero-handwriting{width:100%;margin:0 0 22px;font-size:clamp(44px,5.4vw,80px);line-height:1.05;letter-spacing:-2.8px}
.hero-stage h1 .hero-title-clean{display:block;background:none;color:#f3f3f6;font-weight:550}
.hero-stage .hero-handwriting svg{width:min(100%,410px);margin-top:4px;color:#c5b3f7}
.hero-stage .hero-copy{max-width:330px;margin:0 0 28px;font-size:18px;line-height:1.6}
.hero-stage .actions{justify-content:flex-start;gap:12px}
.hero-stage .opening-mac{grid-column:2;grid-row:1;width:100%;max-width:100%;min-width:0;margin:0;justify-self:center}
.hero-stage .mac-perspective{width:min(100%,calc((100svh - 200px)*1.776));margin:auto}
.hero-stage .opening-mac figcaption{margin:8px 0 0}
@media(max-width:750px){
.hero-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:26px;align-content:center;padding:28px 22px 24px;min-height:580px}
.hero-stage .hero-stage-copy{grid-column:1;grid-row:1;max-width:440px;justify-self:center;text-align:center}
.hero-stage h1.hero-handwriting{font-size:clamp(42px,9vw,60px);letter-spacing:-1.8px;margin-bottom:14px}
.hero-stage .hero-handwriting svg{width:230px;max-width:85%;margin:0 auto}
.hero-stage .hero-copy{font-size:15px;max-width:310px;margin:0 auto 20px;line-height:1.5}
.hero-stage .actions{justify-content:center}
.hero-stage .opening-mac{grid-column:1;grid-row:2}
.hero-stage .mac-perspective{width:min(100%,calc(max(110px,100svh - 430px)*1.776))}
}
@media(max-height:600px) and (min-width:751px){
.hero-stage{min-height:380px;padding-top:20px;padding-bottom:24px}
.hero-stage h1.hero-handwriting{font-size:48px;margin-bottom:12px}
.hero-stage .hero-handwriting svg{width:270px}
.hero-stage .hero-copy{font-size:15px;margin-bottom:18px}
}

/* Keep round pen caps hidden until their individual stroke begins. */
.hero-handwriting path{stroke-dasharray:1 2}
@keyframes write-headline{0%{opacity:0;stroke-dashoffset:1}0.01%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
.hero-stage .hero-download{gap:9px}
.apple-mark{display:block;flex:none}
.hero-scroll{position:absolute;bottom:12px;left:calc(50% - 22px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#b8adc9}
.hero-scroll:hover{color:#eee8f7}
@keyframes scroll-cue-arrive{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
.motion-enabled .hero-scroll.is-pending{visibility:hidden;opacity:0;pointer-events:none}
.motion-enabled .hero-scroll.is-ready{animation:scroll-cue-arrive 650ms ease-out both}
.motion-enabled .hero-scroll:focus-visible{visibility:visible;opacity:1;pointer-events:auto;animation:none}
}
@media(max-width:750px){.hero-stage{padding-bottom:64px}}

/* Match the visible laptop edges to its column, excluding the render's side gutters. */
@media(min-width:751px){
.hero-stage .opening-mac{overflow:clip}
.hero-stage .mac-perspective{width:min(100%,calc((100svh - 200px)*1.48))}
.hero-stage .mac-assembly{width:120%;margin-left:-10%}
}

/* Direct product headline, set in clean type. */
.hero-stage h1.hero-direct{font-size:clamp(42px,4.7vw,72px);line-height:1.08;letter-spacing:-2.4px;font-weight:550;margin:0 0 24px;color:#f3f3f6}
.hero-stage .hero-copy{max-width:370px}
@media(max-width:750px){.hero-stage h1.hero-direct{font-size:clamp(40px,9vw,60px);letter-spacing:-1.8px;margin-bottom:18px}.hero-stage .hero-copy{max-width:330px}}
@media(max-height:600px) and (min-width:751px){.hero-stage h1.hero-direct{font-size:44px;margin-bottom:18px}}

/* Persistent, quiet navigation with the same download action as the hero. */
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.header{position:sticky;top:0;z-index:30;max-width:none;width:100%;padding:0 max(5%,calc((100vw - 1360px)/2));display:grid;grid-template-columns:1fr auto 1fr;background:#08090bf5;border-bottom:1px solid #ffffff0a}
.header .brand{justify-self:start;font-size:22px}
.header nav{display:flex;align-items:center;gap:32px;height:100%}
.header nav a{position:relative;display:flex;align-items:center;height:100%;font-size:14px;color:#aaa7b2}
.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:14px;height:2px;border-radius:2px;background:#c5b3f7;transform:scaleX(0)}
.header nav a[aria-current=location]{color:#f2ecfc}
.header nav a[aria-current=location]:after{transform:scaleX(1)}
.header .nav-download{justify-self:end;gap:8px;border-radius:22px;font-size:13px;min-height:38px;padding:8px 17px}
.header.is-scrolled{background:#111116e8;border-bottom-color:#ffffff12;box-shadow:0 5px 22px #0000001a}
@supports(backdrop-filter:blur(18px)){.header.is-scrolled{background:#111116b8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
@media(prefers-reduced-motion:no-preference){.header{transition:background-color 240ms,border-color 240ms,box-shadow 240ms}.header nav a:after{transition:transform 240ms ease}}
@media(max-width:750px){
:root{--header-height:104px}
.header{grid-template-columns:1fr auto;grid-template-rows:60px 44px;gap:0;padding:0 20px}
.header .brand{font-size:20px}
.header nav{grid-column:1/-1;grid-row:2;justify-content:center;gap:clamp(12px,4vw,24px)}
.header nav a{font-size:13px}
.header nav a:after{bottom:5px}
.header .nav-download{grid-column:2;grid-row:1;font-size:12px;padding:7px 13px;min-height:36px}
}

/* Keep the product name clean; write the second line in the brand's pen style. */
.hero-direct .handwritten-reimagined{display:block;width:min(100%,410px);height:auto;overflow:visible;margin-top:2px;color:#c5b3f7}
.handwritten-reimagined path{stroke-dasharray:1 2;stroke-dashoffset:0}
.motion-disabled .handwritten-reimagined path{stroke-dashoffset:0!important;opacity:1!important}
@media(max-width:750px){.hero-direct .handwritten-reimagined{width:min(100%,310px);margin:2px auto 0}}
@media(max-height:600px) and (min-width:751px){.hero-direct .handwritten-reimagined{width:min(100%,290px)}}

.mode-tab-label{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.mode-tab-label small{font-size:12px;font-weight:400;line-height:1.4;color:#aaa3b6}
@media(max-width:650px){.mode-tabs button{padding:14px 5px;gap:5px}.mode-tab-label small{font-size:11px}.mode-tabs strong{font-size:16px}}

/* AI: one statement, three choices, and one explanation at a time. */
#mix .section-top{margin-bottom:28px}
#mix .ai-heading-clean{display:block;color:var(--text)}
.ai-handwriting{display:block;width:min(480px,100%);height:auto;max-width:100%;color:var(--accent);overflow:visible;margin-top:3px}
.ai-handwriting path{stroke-dasharray:1 2;stroke-dashoffset:0}
.motion-disabled .ai-handwriting path{opacity:1!important;stroke-dashoffset:0!important}
#mix .mode-tabs{gap:32px;border-bottom-color:#ffffff12}
#mix .mode-tabs button{padding:14px 2px}
#mix .mode-panel{background:none;border:0;border-radius:0;min-height:340px;grid-template-columns:.8fr 1.2fr;align-items:center;margin-top:26px}
#mix .mode-copy{padding:24px 44px 24px 0}
#mix .mode-copy h3{font-size:28px;line-height:1.25;margin:0 0 16px;max-width:330px}
#mix .mode-copy>p{font-size:16px;line-height:1.65;margin:0}
#mix .mode-visual{padding:0 0 32px;min-height:0}
#mix .mode-visual>img{width:100%;margin:0;border-color:#39333f;box-shadow:none}
#mix .mode-visual .image-caption{bottom:0;right:0;background:none;border:0;padding:0;font-size:10px}
@media(max-width:650px){
.ai-handwriting{width:min(390px,100%)}
#mix .mode-panel{grid-template-columns:1fr;gap:24px;margin-top:24px}
#mix .mode-copy{padding:0}
#mix .mode-copy h3{font-size:25px;max-width:none}
#mix .mode-copy>p{max-width:none}
}

/* Consistent rounded rectangles rather than pill-shaped actions. */
.button,.header .button,.header .nav-download,.hero-stage .actions .button{border-radius:10px}
.mode-tabs button,.motion-toggle,.replay-opening,.close-dialog{border-radius:8px}

/* Soft material depth on action buttons; retain each action's existing color. */
.button{background-image:linear-gradient(180deg,#ffffff14,transparent 58%,#00000008);border-color:#e5d6ff45;box-shadow:inset 0 1px 0 #ffffff24,0 2px 5px #00000026}
.hero-stage .actions .button,.header .nav-download{background-image:linear-gradient(180deg,#ffffff14,transparent 58%,#00000008);border-color:#e5d6ff45}
.hero-stage .actions .hero-learn,.free-plan .button{background-image:linear-gradient(180deg,#ffffff06,transparent);border-color:#76658e;box-shadow:inset 0 1px 0 #ffffff0b,0 2px 5px #0000001a}
@media(hover:hover){
.button:hover,.motion-enabled .button:hover{background-image:linear-gradient(180deg,#ffffff1c,transparent 65%);box-shadow:inset 0 1px 0 #ffffff30,0 4px 12px #00000030}
.motion-enabled .button:hover{transform:translateY(-1px)}
}
.button:active,.motion-enabled .button:active{box-shadow:inset 0 1px 3px #00000018;transform:translateY(0)}

/* Academy shares the calmer hierarchy of the hero and AI section. */
#academy .section-top{align-items:center;margin-bottom:32px;gap:48px}
#academy .academy-heading-clean{display:block;color:var(--text)}
.academy-handwriting{display:block;width:330px;max-width:100%;height:auto;overflow:visible;color:var(--accent);margin-top:3px}
.academy-handwriting path{stroke-dasharray:1 2;stroke-dashoffset:0}
.motion-disabled .academy-handwriting path{opacity:1!important;stroke-dashoffset:0!important}
#academy .section-description{max-width:410px;line-height:1.7}
#academy .academy-visual{height:clamp(340px,37vw,460px);border-radius:10px;border-color:#ffffff12}
#academy .academy-visual img{opacity:1;object-position:50% 78%}
#academy .three-columns{margin-top:32px}
#academy .three-columns h3{font-size:20px;margin-bottom:10px}
#academy .three-columns p{max-width:320px;font-size:16px;line-height:1.65}
@media(max-width:650px){
#academy .section-top{margin-bottom:24px}
.academy-handwriting{width:260px}
#academy .section-description{margin-top:16px}
#academy .academy-visual{height:290px}
#academy .three-columns{margin-top:26px}
#academy .three-columns p{max-width:none}
}

/* Academy is a centered learning showcase, distinct from the split AI section. */
#academy{display:block;padding-top:100px;scroll-margin-top:-64px}
#academy .section-top{display:block;text-align:center;margin:0 auto 32px;max-width:720px}
#academy h2{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
#academy .academy-heading-clean{display:block}
#academy .academy-handwriting{width:300px;max-width:100%;margin:0}
#academy .section-description{max-width:590px;margin:14px auto 0;font-size:16px;line-height:1.65}
#academy .academy-visual{height:clamp(280px,29vw,365px);width:100%;border-radius:10px;border:1px solid #ffffff0d}
#academy .academy-visual img{object-fit:cover;object-position:50% 70%;transform:none;opacity:1}
.motion-enabled #academy .academy-visual:hover>img{transform:none;opacity:1}
#academy .three-columns{margin:28px auto 0;max-width:1080px;gap:0;text-align:center}
#academy .three-columns article{padding:0 26px}
#academy .three-columns article+article{padding:0 26px;border-left:1px solid var(--line)}
#academy .three-columns h3{font-size:18px;margin-bottom:8px}
#academy .three-columns p{font-size:15px;line-height:1.6;max-width:290px;margin:0 auto}
@media(max-width:650px){
#academy{padding-top:72px;scroll-margin-top:-40px}
#academy .section-top{margin-bottom:24px}
#academy h2{gap:4px}
#academy .academy-handwriting{width:225px}
#academy .section-description{font-size:15px;margin-top:12px}
#academy .academy-visual{height:auto;aspect-ratio:1.65}
#academy .academy-visual img{transform:scale(1.75);transform-origin:50% 75%}
.motion-enabled #academy .academy-visual:hover>img{transform:scale(1.75)}
#academy .three-columns{margin-top:24px;text-align:left;gap:18px}
#academy .three-columns article,#academy .three-columns article+article{padding:0 0 18px;border-left:0}
#academy .three-columns article:last-child{padding-bottom:0}
#academy .three-columns p{max-width:none;margin:0}
}

/* A bounded section rhythm that stays consistent across viewport heights. */
:root{--chapter-space:clamp(80px,7vw,104px)}
#mix,#academy{padding-top:var(--chapter-space);padding-bottom:0;margin-top:0;scroll-margin-top:0}
#mix .mode-panel{min-height:0}
@media(max-width:650px){:root{--chapter-space:64px}}

/* The viewport-height hero already supplies its own bottom breathing room. */
#mix{padding-top:32px}

/* Alternate the workspace composition: product left, message right. */
#workspace{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:center}
#workspace .workspace-image{grid-column:1;grid-row:1;padding:0 0 32px;min-width:0}
#workspace .workspace-image img{width:100%;max-width:100%;box-shadow:0 18px 60px -38px #593d79}
#workspace .workspace-image .image-caption{bottom:0;right:0}
#workspace .workspace-copy{grid-column:2;grid-row:1;min-width:0}
#workspace .workspace-image:hover img{transform:none}
@media(max-width:650px){
#workspace{grid-template-columns:minmax(0,1fr);gap:28px}
#workspace .workspace-image{grid-column:1;grid-row:1}
#workspace .workspace-copy{grid-column:1;grid-row:2}
}

/* Workspace carries the same heading, image and spacing language. */
#workspace{padding-top:var(--chapter-space);padding-bottom:0;overflow:visible}
#workspace .workspace-heading-clean{display:block;color:var(--text)}
.workspace-handwriting{display:block;width:300px;max-width:100%;height:auto;overflow:visible;color:var(--accent);margin-top:3px}
.workspace-handwriting path{stroke-dasharray:1 2;stroke-dashoffset:0}
.motion-disabled .workspace-handwriting path{opacity:1!important;stroke-dashoffset:0!important}
#workspace .workspace-copy>p{font-size:16px;line-height:1.65;color:var(--muted);max-width:350px;margin:18px 0 0}
#workspace .workspace-image img{border:1px solid #ffffff12;border-radius:8px;box-shadow:none}
#workspace .workspace-image .image-caption{background:none;border:0;padding:0;font-size:10px;letter-spacing:1.7px;color:#a5a0b4}
@media(max-width:650px){
#workspace{gap:28px}
.workspace-handwriting{width:260px}
#workspace h2 br:nth-child(2){display:inline}
#workspace .workspace-copy>p{max-width:none;margin-top:14px;font-size:15px}
}

/* A pre-rendered physical model replaces the flat hinged image. */
.hero-stage .rendered-mac{overflow:visible;width:100%;max-width:100%}
.mac-film{overflow:hidden;position:relative;width:min(100%,calc((100svh - 180px)*1.3158));aspect-ratio:1000/760;margin:auto}
.mac-film>img,.mac-film>video{display:block;width:100%;height:100%;object-fit:contain;transform:translateY(3%) scale(1.14)}
.mac-film>video{position:absolute;inset:0;opacity:0;pointer-events:none}
.mac-film.video-visible>video{opacity:1}
.motion-disabled .mac-film>video{display:none}
@media(prefers-reduced-motion:reduce){.mac-film>video{display:none}}
@media(max-width:750px){.mac-film{width:min(100%,calc(max(110px,100svh - 430px)*1.3158))}}

/* Pricing uses the same open graphite canvas and handwritten accent as the product sections. */
#pricing{display:block;max-width:1080px;margin:0 auto;padding:var(--chapter-space) 32px 0;background:none;border:0;scroll-margin-top:0}
#pricing .pricing-heading{max-width:760px;margin:0 auto 56px;text-align:center}
#pricing h2{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:clamp(38px,4.1vw,57px);line-height:1.12;letter-spacing:-2px}
#pricing .pricing-heading-clean{color:var(--text)}
.pricing-handwriting{display:block;width:300px;max-width:100%;height:auto;overflow:visible;color:var(--accent)}
.pricing-handwriting path{stroke-dasharray:1 2;stroke-dashoffset:0}
.motion-disabled .pricing-handwriting path{opacity:1!important;stroke-dashoffset:0!important}
#pricing .pricing-description{max-width:530px;margin:18px auto 0;font-size:16px;line-height:1.65;color:var(--muted)}
#pricing .pricing-plans{max-width:900px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
#pricing .price-card{padding:36px 40px 0;display:flex;flex-direction:column;background:none;border:0;border-radius:0;box-shadow:none;transform:none}
#pricing .price-card+ .price-card{border-left:1px solid var(--line)}
#pricing .price-top{display:block;min-height:64px}
#pricing .price-top h3{font-size:20px;letter-spacing:-.4px;font-weight:500;margin:0 0 5px}
#pricing .paid-plan h3{color:var(--accent)}
#pricing .price-top p{color:var(--muted);font-size:14px;margin:0}
#pricing .price{font-size:clamp(48px,5vw,64px);letter-spacing:-2.8px;line-height:1.1;margin:28px 0 30px;font-weight:500;display:flex;align-items:baseline;gap:12px}
#pricing .price>span{font-size:14px;letter-spacing:0;font-weight:400;margin:0;color:var(--muted)}
#pricing .price-card ul{border:0;padding:0;margin:0 0 32px;list-style:none}
#pricing .price-card li{font-size:15px;color:#c5c3cd;margin:0;padding:8px 0;line-height:1.5}
#pricing .price-card li:before{color:var(--accent);font-size:13px;margin-right:12px}
#pricing .plan-action{margin-top:auto}
#pricing .button{min-height:48px;font-size:14px;border-radius:10px}
#pricing .price-note{font-size:12px;line-height:1.5;color:var(--muted);margin:14px 0 0;min-height:36px}
#pricing .pricing-release-note{max-width:660px;margin:32px auto 0;text-align:center;font-size:12px;line-height:1.6;color:#84828e}
@media(max-width:650px){
#pricing{padding:var(--chapter-space,64px) 22px 0;margin:0 auto}
#pricing .pricing-heading{margin-bottom:32px}
#pricing h2{gap:0 10px;font-size:38px;letter-spacing:-1.5px}
#pricing .pricing-handwriting{width:235px}
#pricing .pricing-description{font-size:15px;margin-top:14px}
#pricing .pricing-plans{grid-template-columns:1fr;max-width:420px}
#pricing .price-card{padding:28px 0}
#pricing .price-card+ .price-card{border-left:0;border-top:1px solid var(--line)}
#pricing .price-top{min-height:0}
#pricing .price{margin:24px 0 20px;font-size:52px}
#pricing .price-card ul{margin-bottom:24px}
#pricing .price-note{min-height:0}
#pricing .pricing-release-note{margin:0 auto}
}

/* Anchor the navigation at the pricing content, past the inter-section breathing room. */
#pricing{scroll-margin-top:calc(32px - var(--chapter-space))}
@media(max-width:650px){#pricing{scroll-margin-top:calc(24px - var(--chapter-space,64px))}}

/* Quiet FAQ rhythm and a footer with explicit, non-overlapping rows. */
#faq{max-width:964px;padding:var(--chapter-space) 32px 72px;margin:0 auto}
#faq h2{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;font-size:clamp(38px,4.1vw,57px);letter-spacing:-2px;line-height:1.12;margin:0 0 48px}
#faq .faq-heading-clean{color:var(--text)}
.faq-handwriting{display:block;width:240px;max-width:100%;height:auto;overflow:visible;color:var(--accent)}
.faq-handwriting path{stroke-dasharray:1 2;stroke-dashoffset:0}
.motion-disabled .faq-handwriting path{opacity:1!important;stroke-dashoffset:0!important}
#faq .faq-list{border-top:1px solid var(--line)}
#faq details{border-bottom:1px solid var(--line)}
#faq summary{align-items:center;padding:24px 0;gap:24px;font-size:17px;font-weight:450;line-height:1.5;color:#e4e2e9}
#faq .faq-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #ffffff15;border-radius:8px;font-size:20px;line-height:1;background:#ffffff03;color:var(--accent)}
#faq details[open] .faq-toggle{transform:rotate(45deg);background:#c5b3f70a}
#faq details>p{max-width:760px;margin:0;padding:0 54px 24px 0;color:var(--muted);font-size:16px;line-height:1.75}
#faq .faq-contact{margin:30px 0 0;text-align:center;font-size:14px;color:var(--muted)}
#faq .faq-contact a{color:var(--accent);margin-left:5px;text-decoration:underline;text-decoration-color:#c5b3f744;text-underline-offset:5px}
footer.site-footer{max-width:1200px;margin:0 auto;padding:36px 32px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 40px;border-top:1px solid var(--line);align-items:center}
footer.site-footer .footer-identity{grid-column:1;grid-row:1;display:block;text-align:left}
.site-footer .brand{font-size:22px}
.site-footer .footer-identity p{font-size:14px;color:var(--muted);margin:10px 0 0}
.site-footer .footer-links{grid-column:2;grid-row:1;display:flex;align-items:center;gap:26px;font-size:14px;color:#bcb9c5}
.site-footer .footer-links a{padding:10px 0}
footer.site-footer .footer-bottom{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid #ffffff09;padding-top:22px}
.site-footer .footer-bottom small{margin:0;color:#85828f;font-size:12px;text-align:left}



@media(max-width:650px){
#faq{padding:var(--chapter-space) 22px 56px}
#faq h2{font-size:38px;letter-spacing:-1.5px;gap:0 10px;margin-bottom:30px}
.faq-handwriting{width:195px}
#faq summary{font-size:15px;padding:20px 0;gap:16px}
#faq details>p{padding:0 0 22px;font-size:15px;line-height:1.7}
#faq .faq-contact{font-size:13px}
footer.site-footer{margin:0 22px;padding:28px 0 24px;grid-template-columns:minmax(0,1fr);gap:20px}
footer.site-footer .footer-identity{grid-column:1;grid-row:1}
.site-footer .footer-links{grid-column:1;grid-row:2;gap:26px}
footer.site-footer .footer-bottom{grid-column:1;grid-row:3;align-items:flex-start;flex-direction:column;gap:16px;padding-top:20px}

}

/* Bring section headings below the sticky navigation when following anchors. */
#mix{scroll-margin-top:-32px}
#academy,#workspace,#pricing,#faq{scroll-margin-top:calc(0px - var(--chapter-space))}

/* Keep upcoming handwriting blank until its first stroke, without hiding fallback text. */
@media(prefers-reduced-motion:no-preference){
 .motion-enabled .signature-pending path{opacity:0;stroke-dashoffset:1}
}
/* A rotated 30px square needs another 6.3px on each side inside the height clip. */
#faq .faq-toggle{margin-right:8px}

/* Initial and animated states match: no visible content before an entrance starts. */
@media(prefers-reduced-motion:no-preference){
 .hero-pending .hero-stage-copy{opacity:0}
 .motion-enabled .reveal-pending{opacity:0;transform:translateY(18px)}
 .motion-enabled .is-opening .hero-title-clean{animation:soft-enter 700ms var(--ease-out) both}
 .motion-enabled .is-opening .hero-bottom-copy{animation:soft-enter 850ms var(--ease-out) 180ms both}
}

/* Use the video's closed first frame until playback is ready, never the open fallback. */
@media(prefers-reduced-motion:no-preference){
 .mac-pending .mac-film>img{opacity:0}
 .mac-pending .mac-film>video{opacity:1}
}

/* Product visuals no longer reserve space for concept captions. */
#mix .mode-visual,#workspace .workspace-image{padding-bottom:0}

.hero-stage .download-context{font-size:12px;line-height:1.5;color:var(--muted);margin:-12px 0 20px;max-width:420px}
@media(max-width:750px){.hero-stage .download-context{margin:0 auto 16px;font-size:11px}}