/* Navigation and the live island have separate vertical space. */
.header.wrap{top:100px;left:0;right:0;height:auto;min-height:72px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;max-width:1200px;margin-inline:auto;padding-block:12px}
.header nav{margin:0;justify-content:center;flex-wrap:wrap;gap:12px 24px;min-width:0}
.header nav a{white-space:nowrap;font-size:13px;line-height:1.5}
.header-actions{min-width:0;gap:16px}.header-try{white-space:nowrap;gap:14px;line-height:1.4}
.brand .wordmark{font-size:23px;font-weight:650;letter-spacing:-1px;line-height:1.1}.brand img{width:47px;height:40px}.brand .wordmark i{width:6px;height:6px;margin-left:3px}
.footer .brand .wordmark{font-size:22px}.footer .brand img{width:42px;height:36px}
.reference-hero .hero-island-live{z-index:45}.reference-hero{padding-top:350px;min-height:920px}
.reference-hero .intro-actions{gap:16px;flex-wrap:wrap;margin-top:34px}
.reference-hero .download-action,.release-final .download-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:62px;padding:14px 24px;font-size:17px;border-radius:40px;white-space:normal;background:linear-gradient(180deg,#ffb86d,#ff9b38);border:1px solid #ffd19a;box-shadow:inset 0 2px 0 #ffffff55,0 16px 45px -22px #ff9b38aa;color:#271909;font-weight:650;text-align:center}
.download-action svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.download-action small{font-size:12px;background:#38220e1c;padding:7px 10px;border-radius:20px;flex:none;font-weight:600}
.reference-hero .live-action{border:1px solid #ffffff2d;background:#ffffff04;color:#f4f1ec;min-height:62px;font-size:17px;padding-inline:24px;gap:18px}
.desktop-extras{padding-block:110px 90px}.desktop-extras>header{text-align:center;max-width:740px;margin:0 auto 46px}.desktop-extras .eyebrow{color:#ffb76b}.desktop-extras h2{font-size:clamp(34px,4vw,54px);line-height:1.1;letter-spacing:-2px;margin:18px 0 20px}.desktop-extras header>p:last-child{font-size:18px;line-height:1.7;color:#b9b5ae}
.release-final{position:relative;isolation:isolate;display:flex;flex-direction:column;text-align:center;align-items:center;gap:0;padding:70px 35px 65px;margin-block:30px 100px;border-radius:35px;border:1px solid #ffffff12;background:radial-gradient(ellipse at 50% 100%,#a65a193e,transparent 65%),radial-gradient(ellipse at 20% 25%,#44224440,transparent 60%),#0c0c0f;overflow:hidden}
.release-final .release-mascot{display:block;width:210px;height:178px;border:0;background:transparent;margin-bottom:18px;flex:none}.release-final .eyebrow{color:#ffb76b;font-size:11px;letter-spacing:2px;margin-bottom:12px}.release-final h2{font-size:clamp(34px,4.2vw,58px);line-height:1.12;letter-spacing:-2px;max-width:900px;margin:0 0 22px}.release-final>p{color:#b9b5ae;font-size:18px;line-height:1.7;max-width:650px;margin:0 0 28px}.release-final .release-note{font-size:13px;color:#8f8b87;margin:22px 0 12px}.release-final .release-demo{font-size:14px;color:#ddc4aa;border-bottom:1px solid #ddc4aa44;padding-bottom:5px;display:flex;gap:14px}
.reference-office-frame{scroll-margin-block:24px;outline:none}.reference-stage:focus-within{border-color:#ffad6240}
@media(max-width:1080px){.header.wrap{gap:20px}.header-try{display:none}.header nav{justify-content:flex-end}}
@media(max-width:740px){.header.wrap{top:86px;grid-template-columns:auto auto;min-height:60px;gap:12px}.header nav{display:none}.header .brand .wordmark{display:block;font-size:21px}.header .brand img{width:39px;height:33px}.header-actions{justify-self:end}.reference-hero{padding-top:270px;min-height:0}.reference-hero .intro-actions{gap:12px}.reference-hero .download-action,.reference-hero .live-action{width:100%;max-width:360px;min-height:58px;font-size:15px}.desktop-extras{padding-block:65px 35px}.desktop-extras>header{margin-bottom:30px}.release-final{padding:40px 22px;border-radius:25px;margin-bottom:60px}.release-final .release-mascot{width:175px;height:148px}.release-final>p{font-size:16px}.release-final .download-action{gap:10px;padding-inline:18px;font-size:15px}}
@media(max-width:460px){.header .brand{gap:7px}}

.release-final iframe{color-scheme:dark}.release-final>p:not(.eyebrow):not(.release-note){font-size:18px!important;line-height:1.7;margin-bottom:28px}.release-final .release-note{scroll-margin-top:40px}
/* Header controls on the site's own type scale (29 Oct 2026): the workspace button matches the other buttons; arrows and the language chevron are drawn, centred on one line. */
@media(min-width:1081px){.header-try{display:inline-flex}}
.header-try{align-items:center;gap:10px;min-height:38px;box-sizing:border-box;padding:0 18px;font-size:13px;font-weight:650;letter-spacing:normal;line-height:1}
.arrow{display:inline-block;flex:none;width:.95em;height:.95em;vertical-align:-.12em;overflow:hidden;text-indent:200%;white-space:nowrap;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.5 4.5h6v6'/%3E%3C/svg%3E") center/contain no-repeat}
.site-language summary{align-items:center;gap:7px;min-height:38px;box-sizing:border-box;padding:0 11px;font-size:12px;font-weight:600;line-height:1}
.site-language summary>svg{display:block;flex:none}
#site-language-code{display:block;line-height:1}
.site-language summary>.site-language-chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8;transition:transform .2s}
.site-language[open] summary>.site-language-chevron{transform:rotate(180deg)}
@media(max-width:680px){.site-language summary{min-height:36px;padding:0 10px;gap:6px;font-size:11.5px}.site-language summary>svg:first-child{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.site-language summary>.site-language-chevron{transition:none}}
/* Closing CTA: the demo link sits clear of the button, its arrow centred with the text; the mascot frame never scrolls. */
.release-final .release-mascot{overflow:hidden}
.release-final .release-mascot[hidden]{display:none}
.release-final .release-demo{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:4px 2px 7px;line-height:1.3;font-weight:600;text-decoration:none}
.release-final .release-demo:hover{color:#f1ece4;border-bottom-color:#f1ece488}
/* Embeds fade in when ready: no dark box on a cold, slow first load (30 Oct 2026). */
.hero-island-live iframe,iframe.release-mascot{opacity:0;transition:opacity .45s ease;background:transparent}
.hero-island-live iframe.is-ready,iframe.release-mascot.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-island-live iframe,iframe.release-mascot{transition:none}}
.header nav,.header-actions{transition:opacity .2s ease}
.hero-island-open .header nav,.hero-island-open .header-actions{opacity:0;pointer-events:none}
.hero-island-open .header{pointer-events:none}
@media(max-width:1100px){.header .brand{transition:opacity .2s ease}.hero-island-open .header .brand{opacity:0}}
@media(prefers-reduced-motion:reduce){.header nav,.header-actions{transition:none}}