/* SFX L'Builder: simpler public layout. Existing product artwork and API hooks are retained. */
html:has(body.layout-simple){background:#fff;color-scheme:light}
body.layout-simple{--bg:#fff;--bg-2:#f7f7f7;--panel:#f7f7f7;--panel-2:#f7f7f7;--panel-3:#e3e3e3;--ink:#000;--ink-2:#666;--ink-3:#666;--line:#00000012;--line-2:#00000023;--line-3:#00000040;--brand-blue:#4d91ff;--accent:#4d91ff;--accent-2:#2468d9;--accent-ink:#2468d9;--glow:#4d91ff1a;--section:100px;--wrap:1160px;--gutter:clamp(20px,4vw,48px);background:#fff;color:var(--ink)}
.layout-simple :is(.beam,.aurora,.dotgrid,.hero-spot,.streaks){display:none}
.layout-simple h2{font-size:clamp(32px,4.2vw,54px);line-height:1.12;letter-spacing:-.055em;font-weight:600}
.layout-simple h2 span{color:#666}
.layout-simple h3{font-size:23px;letter-spacing:-.035em;font-weight:560}
.layout-simple .lede{font-size:18px;line-height:1.65}
.layout-simple .head{max-width:800px;margin-bottom:38px}
.layout-simple .label{font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:none;color:#666}
.layout-simple .section{padding:96px 0;min-height:0}
.layout-simple .divider{height:0}
.layout-simple [data-flush]{background:transparent}
.layout-simple .btn{height:48px;padding:0 23px;border-radius:13px;box-shadow:none;font-size:14px}
.layout-simple .btn-light{background:#000;color:#fff;border-color:#000;box-shadow:none}
.layout-simple .btn-light:hover{background:#262626;color:#fff;box-shadow:none}
.layout-simple .btn-ghost{background:transparent;border-color:#00000026;color:#000}
.layout-simple .btn-ghost:hover{background:#f7f7f7;border-color:#00000045}
.layout-simple .btn-small{height:36px;padding:0 15px;font-size:12px;border-radius:9px}
/* Original floating navigation, independent of the page edge. */
.layout-simple .nav{top:12px;background:none;border:none;box-shadow:none;backdrop-filter:none;padding:0 20px;pointer-events:none}
.layout-simple .nav-inner{pointer-events:auto;max-width:880px;height:56px;min-height:56px;padding:0 10px 0 18px;background:transparent;color:#f7f7f7;border:1px solid transparent;border-radius:14px;box-shadow:none}
.layout-simple .nav .brand{font-size:15px;white-space:nowrap}
.layout-simple .nav-links{gap:23px}
.layout-simple .nav-links a{color:#e3e3e3;font-size:14px}
.layout-simple .nav-links a:hover,.layout-simple .nav-links a[aria-current=true]{color:#fff}
.layout-simple .nav .btn-light{background:#fff;border-color:#fff;color:#000}
.layout-simple .nav .menu-toggle{color:#fff}
/* Blue opening, followed by the original blue desktop photograph. */
.layout-simple .hero{padding:136px 0 28px;background:linear-gradient(180deg,#2454ce 0%,#4d91ff 64%,#8ac5ff 100%);color:#fff;overflow:visible}
.layout-simple .hero::after{display:none}
.layout-simple .hero .badge{background:none;border:none;height:auto;padding:0;margin-bottom:23px;font:500 14px/1.4 var(--sans);color:#e3e3e3}
.layout-simple .hero .badge i{display:none}
.layout-simple .hero h1{font-size:clamp(54px,7.2vw,96px);line-height:1.03;letter-spacing:-.065em;max-width:950px;color:#fff;margin-bottom:26px}
.layout-simple .hero h1 em{color:#fff;letter-spacing:-.045em;line-height:1.12}
.layout-simple .h1-kicker{font-size:12px;color:#e3e3e3;letter-spacing:.035em;margin-bottom:17px;font-family:var(--sans)}
.layout-simple .hero .lede{font-size:18px;line-height:1.6;max-width:590px;color:#e3e3e3}
.layout-simple .hero-actions{margin-top:28px;gap:12px}
.layout-simple .hero .btn-ghost{color:#fff;border-color:#ffffff50;background:#ffffff08}
.layout-simple .hero .mono{font:12px/1.6 var(--sans);letter-spacing:0;color:#e3e3e3;margin-top:18px}
.layout-simple .hero-keys{gap:14px;margin-top:44px}
.layout-simple .hero-keys .key{height:66px;border-radius:12px;box-shadow:0 7px 0 #132b4b66,0 14px 22px #00000020}
.layout-simple .hero-keys .key-opt{width:68px;font-size:23px}
.layout-simple .hero-keys .key-space{width:265px;font-size:12px}
.layout-simple .hero-keys::before{display:none}
.layout-simple .hero-keys .plus{color:#e3e3e3;font-size:16px}
.layout-simple .hero-hint{color:#e3e3e3;font-size:12px;margin-top:25px}
.layout-simple .hero-hint b{color:#fff}
.layout-simple #explorer-detail{padding:25px 0 0;background:linear-gradient(#8ac5ff,#e3e3e3 80%,#fff);margin:0}
.layout-simple #explorer-detail .wrap{max-width:1256px}
.layout-simple #explorer-detail .product-detail{opacity:1;transform:none;filter:none;max-width:none;margin:0;--detail-opacity:1;--detail-scale:1;--detail-y:0px}
.layout-simple #explorer-detail .product-photo{border-radius:22px;border:1px solid #ffffff80;box-shadow:0 26px 70px #0000001a}
.layout-simple .product-photo{border-radius:20px;border-color:#00000012;box-shadow:none}
.layout-simple .product-photo:hover{box-shadow:0 14px 36px #00000014}
/* Coded product illustrations share the public light palette. Native screenshots are untouched. */
.layout-simple :is(.desk,.win,.voice-composer,.board,.key,.cell .vis,.else-panel){--bg:#fff;--bg-2:#f7f7f7;--panel:#fff;--panel-2:#f7f7f7;--panel-3:#e3e3e3;--ink:#000;--ink-2:#666;--ink-3:#666;--line:#00000014;--line-2:#00000028;--line-3:#00000045;--accent:#4d91ff;--accent-2:#2468d9;--accent-ink:#2468d9;--glow:#4d91ff1a;color:#000;color-scheme:light}
/* Compact, direct view controls replace the pinned scroll stories. */
.layout-simple .focus-story,.layout-simple #organize{min-height:0;padding:96px 0}
.layout-simple .focus-story>.wrap,.layout-simple .more-features>.wrap.else{min-height:0}
.layout-simple .focus-sticky,.layout-simple #organize .focus-sticky,.layout-simple .extras-sticky{position:relative;top:auto;height:auto;min-height:0;padding:0;display:block}
.layout-simple .focus-heading .head,.layout-simple .focus-heading .editors-head{max-width:840px;margin:0 auto 32px;text-align:center}
.layout-simple .focus-heading h2{font-size:clamp(32px,4.2vw,54px)}
.layout-simple .focus-switch{gap:6px;margin:0 auto 30px;padding:5px;width:fit-content;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:12px}
.layout-simple .focus-switch button{border:0;border-radius:8px;color:#666;font-size:12px;padding:9px 17px}
.layout-simple .focus-switch button[aria-pressed=true]{background:#fff;color:#000;box-shadow:0 2px 6px #00000012}
.layout-simple .focus-progress{display:none}
.layout-simple .focus-photo .popup-detail{width:100%;max-width:940px;margin:0 auto}
.layout-simple .focus-demo .desk{width:100%;max-width:1080px}
.layout-simple .dock{background:#f7f7f7;border-color:#e3e3e3}
.layout-simple .dock button{color:#666}
.layout-simple .dock button[aria-selected=true]{background:#fff;color:#000}
.layout-simple .caption{color:#666}
.layout-simple .caption b{color:#000}
.layout-simple .strengths{grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.layout-simple .strengths h2{font-size:clamp(30px,3.6vw,45px)}
.layout-simple .strengths .lede{margin-top:22px;font-size:16px}
.layout-simple .strengths .btn{margin-top:23px}
.layout-simple .strengths .board{border-radius:20px;padding:14px;background:#f7f7f7;box-shadow:none}
/* Content is visible in four useful feature cards, with the real tools image above. */
.layout-simple #organize .organize-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:100%;max-width:none;align-items:stretch}
.layout-simple .organize-step{grid-area:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none;display:block}
.layout-simple .organize-step:first-child{grid-column:1/-1;margin:0 auto 22px;width:100%;max-width:1000px}
.layout-simple .organize-step .cell{height:100%;min-height:0;padding:27px;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:20px}
.layout-simple .organize-step .cell .vis{height:270px;min-height:270px;margin:0;overflow:hidden;border-radius:14px;padding:20px;background:linear-gradient(145deg,#192231,#0d131d)}
.layout-simple .organize-step .cell>.proportional-frame{margin-bottom:25px}
.layout-simple .organize-step .cell h3{margin-top:0;font-size:22px}
.layout-simple .organize-step .cell p{font-size:15px;line-height:1.65;color:#666;margin-top:12px;max-width:none}
.layout-simple .organize-step .cell h3 svg{stroke:#4c6d9c}
.layout-simple .spot::before,.layout-simple .spot::after,.layout-simple .ed::after{display:none}
.layout-simple .rail{grid-auto-flow:unset;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;gap:20px}
.layout-simple .ed{min-height:320px;padding:27px;background:#f7f7f7;border:1px solid #e3e3e3;color:#000;border-radius:18px;box-shadow:none}
.layout-simple .ed p{color:#666;font-size:14px;line-height:1.65}
.layout-simple .ed .mono,.layout-simple .ed .more-link{color:#666}
.layout-simple .ed-top b{color:#000}
.layout-simple .mini-tl{border-radius:7px;background:#e3e3e3}
.layout-simple .ed:last-child{grid-column:auto}
/* Search and voice demonstrations keep their composition and styling. */
.layout-simple #demo{padding-top:75px;padding-bottom:80px}
.layout-simple #demo .win{box-shadow:0 20px 55px #0000001f}
.layout-simple .tryrow,.layout-simple .demo-note{color:#666}
.layout-simple .chip{background:#f7f7f7;border-color:#e3e3e3;color:#666}
.layout-simple .chip[aria-pressed=true]{background:#e3e3e3;border-color:#93b0df;color:#000}
.layout-simple .voice-stage{max-width:980px;margin:auto}
.layout-simple .voice-sequence-bar{color:#666}
.layout-simple .voice-step,.layout-simple .voice-steps span{color:#666}
.layout-simple .voice-steps span.is-active{color:#666}
.layout-simple .voice-replay{color:#666}
.layout-simple .voice-composer{box-shadow:0 22px 60px #0000001a}
.layout-simple .vcard{padding:26px;border:1px solid #e3e3e3;border-radius:18px;background:#f7f7f7;box-shadow:none}
.layout-simple .vcard h3{font-size:21px;color:#000}
.layout-simple .vcard p{color:#666;font-size:14px;line-height:1.65}
.layout-simple .vcard .voices span{color:#666;border-color:#e3e3e3;background:#fff}
.layout-simple .vcard .voices span.on{color:#000;background:#e3e3e3}
.layout-simple .vcard>.row,.layout-simple .vcard .proportional-canvas.row{background:#f7f7f7;color:#000;border-color:#e3e3e3}
.layout-simple .vcard .row small{color:#666}
/* A conventional feature selector, available immediately. */
.layout-simple .section.more-features{min-height:0;padding:96px 0}
.layout-simple .more-features-head,.layout-simple .extras-browser{opacity:1;transform:none;will-change:auto}
.layout-simple .more-features-head{margin-bottom:38px;text-align:center}
.layout-simple .extras-browser{height:auto;min-height:390px;max-width:1100px;margin:auto;grid-template-columns:minmax(240px,.85fr) minmax(0,1.5fr);background:#f7f7f7;border:1px solid #e3e3e3;border-radius:20px}
.layout-simple .extras-nav{padding:25px;background:none;border-color:#e3e3e3;display:block}
.layout-simple .runon button{font-size:15px;padding:14px 13px;color:#666}
.layout-simple .runon button[aria-pressed=true]{background:#e3e3e3;color:#000}
.layout-simple .runon-note{font-size:12px;line-height:1.6;color:#666;margin-top:18px}
.layout-simple .extras-browser .else-panel{height:auto;min-height:390px;padding:30px}
.layout-simple .extras-browser .else-view{inset:30px}
/* Gallery and practical information. */
.layout-simple #tour{padding:95px 0;background:#f7f7f7}
.layout-simple .tour-tabs{background:#f7f7f7;border-color:#e3e3e3;border-radius:12px}
.layout-simple .tour-tabs button{color:#666}
.layout-simple .tour-tabs button[aria-current=true]{background:#fff;color:#000;box-shadow:0 2px 5px #00000010}
.layout-simple .tour-progress{display:none}
.layout-simple #tour:not(.is-pinned) .tour-panel{flex:0 0 min(90%,1000px);opacity:1;transform:none}
.layout-simple #tour:not(.is-pinned) .tour-track{gap:35px;scrollbar-width:none}
.layout-simple .shot{background:#0d1119;border-color:#e3e3e3;border-radius:16px;box-shadow:0 15px 40px #00000012}
.layout-simple .tour-panel figcaption{font-size:13px;color:#666}
.layout-simple .tour-panel figcaption b{color:#000}
.layout-simple .faq{display:block;max-width:1000px;margin:auto}
.layout-simple .faq-intro{position:static;text-align:center;max-width:660px;margin:0 auto 44px}
.layout-simple .faq-intro h2{font-size:48px}
.layout-simple .faq-intro .link{color:#666}
.layout-simple .faq-group+.faq-group{margin-top:32px}
.layout-simple .faq-group h3{color:#666;font-size:11px;margin-bottom:12px}
.layout-simple .faq details{background:#f7f7f7;border:1px solid #e3e3e3;margin-bottom:9px;border-radius:12px;padding:0 22px}
.layout-simple .faq summary{font-size:15px;color:#000;padding:18px 0}
.layout-simple .faq details p{color:#666;font-size:14px;line-height:1.7}
.layout-simple .final{padding:85px 0;background:linear-gradient(180deg,#f7f7f7,#f7f7f7 70%,#fff)}
.layout-simple .final h2{font-size:clamp(36px,5vw,60px);color:#000}
.layout-simple .final h2 em{color:#666}
.layout-simple .final> .wrap>p{color:#666;max-width:570px;margin:20px auto 0;font-size:15px}
.layout-simple .final-keys{margin-bottom:38px}
.layout-simple .beta{border:1px solid #e3e3e3;border-radius:20px;background:#fff;box-shadow:0 18px 50px #00000010}
.layout-simple .platform{border-color:#e3e3e3;color:#000}
.layout-simple .platform small{color:#666}
.layout-simple .platform .pill{background:#f7f7f7;color:#666;border-color:#e3e3e3}
.layout-simple .beta .field label{color:#000}
.layout-simple .beta :is(input[type=email],select,.copy input){background:#f7f7f7;color:#000;border-color:#e3e3e3}
.layout-simple .beta input::placeholder{color:#666}
.layout-simple .beta :is(input,select):focus-visible{outline:2px solid #4d83d9;outline-offset:2px}
.layout-simple .beta :is(.hint,.check,.beta-status){color:#666}
.layout-simple .beta-status.error{color:#ae3039}
.layout-simple .beta-done h3{color:#000}
.layout-simple .beta-done p{color:#666}
.layout-simple .footer{padding:60px 0 30px;background:#fff;border-top:1px solid #e3e3e3;color:#666}
.layout-simple .footer .brand{color:#000}
.layout-simple .footer-links h4{font-size:11px;color:#666}
.layout-simple .footer-links a,.layout-simple .footer-brand p{color:#666;font-size:13px}
.layout-simple .footer-links a:hover{color:#666}
.layout-simple .lang-switch a{color:#666;border-color:#e3e3e3}
.layout-simple .lang-switch a[aria-current=true]{color:#666;background:#f7f7f7}
.layout-simple .footer-bottom{color:#666;font-size:11px;border-color:#e3e3e3}
.layout-simple .subhero h1{color:#000}
.layout-simple .subhero{background:linear-gradient(#f7f7f7,#fff)}
@media(max-width:1000px){
 .layout-simple .nav-inner{max-width:850px}
 .layout-simple .nav-links{gap:15px}
 .layout-simple .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
 .layout-simple .strengths{gap:35px}
}
@media(max-width:760px){
 .layout-simple{--section:66px}
 .layout-simple .section,.layout-simple .focus-story,.layout-simple #organize,.layout-simple .section.more-features{padding:65px 0;min-height:0}
 .layout-simple .nav{top:8px;padding:0 12px}
 .layout-simple .nav-inner{height:56px;min-height:56px;padding:0 10px 0 13px;border-radius:14px}
 .layout-simple .nav .brand{font-size:12px;gap:7px}
 .layout-simple .nav .brand img{width:24px;height:24px}
 .layout-simple .nav-end{gap:8px}
 .layout-simple .nav .btn{font-size:11px;padding:0 11px;height:33px}
 .layout-simple .nav-links{background:#10151e;border:1px solid #2d3748;left:12px;right:12px;top:64px;border-radius:13px}
 .layout-simple .nav-links a{font-size:14px;padding:10px}
 .layout-simple .hero{padding:110px 0 24px}
 .layout-simple .hero h1{font-size:clamp(48px,9vw,68px);letter-spacing:-.055em}
 .layout-simple .hero .lede{font-size:16px;max-width:470px}
 .layout-simple .hero .badge{font-size:12px;margin-bottom:18px}
 .layout-simple .h1-kicker{font-size:10px}
 .layout-simple .hero-actions .btn{height:43px;padding:0 16px;font-size:12px}
 .layout-simple .hero-keys{margin-top:32px;gap:12px}
 .layout-simple .hero-keys .key{height:57px}
 .layout-simple .hero-keys .key-opt{width:57px}
 .layout-simple .hero-keys .key-space{width:190px}
 .layout-simple #explorer-detail{padding-top:20px}
 .layout-simple #explorer-detail .product-photo{border-radius:15px}
 .layout-simple h2,.layout-simple .focus-heading h2{font-size:clamp(29px,6vw,39px)}
 .layout-simple .head{margin-bottom:28px}
 .layout-simple .strengths{grid-template-columns:1fr;gap:30px}
 .layout-simple .strengths>div:first-child{text-align:center}
 .layout-simple .strengths h2{font-size:32px}
 .layout-simple .strengths .lede{margin:18px auto 0}
 .layout-simple .strengths .board{max-width:600px;margin:auto}
 .layout-simple .focus-switch button{font-size:11px;padding:8px 12px}
 .layout-simple .focus-photo .popup-detail{max-width:none}
 .layout-simple .focus-demo .caption{font-size:12px;max-width:100%}
 .layout-simple #organize .organize-stage{grid-template-columns:1fr;gap:18px}
 .layout-simple .organize-step:first-child{margin-bottom:5px}
 .layout-simple .organize-step .cell{padding:22px}
 .layout-simple .organize-step .cell h3{font-size:21px}
 .layout-simple .organize-step .cell p{font-size:14px}
 .layout-simple .rail{grid-template-columns:1fr 1fr;gap:13px}
 .layout-simple .ed{padding:19px;min-height:310px}
 .layout-simple .ed-top b{font-size:14px}
 .layout-simple .ed-top img{width:28px;height:28px}
 .layout-simple .ed p{font-size:12px}
 .layout-simple .ed .mono,.layout-simple .ed .more-link{font-size:10px}
 .layout-simple .vcards{grid-template-columns:1fr;gap:15px}
 .layout-simple .vcard{padding:23px}
 .layout-simple .extras-browser{grid-template-columns:1fr;min-height:0}
 .layout-simple .extras-nav{padding:18px;border-right:0;border-bottom:1px solid #e3e3e3}
 .layout-simple .runon{grid-template-columns:1fr}
 .layout-simple .runon button{font-size:14px;padding:11px 12px}
 .layout-simple .extras-browser>.proportional-frame{margin:20px;width:calc(100% - 40px)}
 .layout-simple .extras-browser .else-panel{min-height:340px}
 .layout-simple .extras-browser .is-scaled .else-panel{padding:0}
 .layout-simple .extras-browser .is-scaled .else-view{inset:0}
 .layout-simple .faq-intro h2{font-size:36px}
 .layout-simple .faq details{padding:0 18px}
 .layout-simple .faq summary{font-size:14px}
 .layout-simple .footer-top{gap:32px}
 .layout-simple .footer-links{gap:26px}
 .layout-simple .footer-bottom{gap:12px}
}
@media(prefers-reduced-motion:reduce){.layout-simple *, .layout-simple *::before,.layout-simple *::after{scroll-behavior:auto!important}}
/* Shared public detail pages. */
.layout-simple .nav.is-scrolled .nav-inner,.layout-simple .nav.is-open .nav-inner{background:rgba(0,0,0,.88);border-color:#ffffff20;backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.layout-simple .hero .crumbs,.layout-simple .hero .crumbs a{color:#e3e3e3}
.layout-simple.subpage .cell,.layout-simple .sub-steps li,.layout-simple .press-item{background:#f7f7f7;border-color:#e3e3e3;box-shadow:none}
.layout-simple.subpage .cell h3,.layout-simple .sub-steps h3{color:#000}
.layout-simple.subpage .cell p,.layout-simple .sub-steps p{color:#666}
.layout-simple.subpage .cell{padding:26px}
.layout-simple .guide-card h2{font-size:23px;letter-spacing:-.035em;line-height:1.25}
.layout-simple .chip-link{background:#f7f7f7;color:#666;border-color:#e3e3e3}
.layout-simple .chip-link:hover{background:#f7f7f7}
.layout-simple .prose h2{font-size:30px;letter-spacing:-.04em}
.layout-simple .prose code{background:#f7f7f7;color:#666}
.layout-simple .prose pre code{color:#e3e3e3;background:none}
.layout-simple #voice .vcards .vcard{background:#f7f7f7;border-color:#e3e3e3;box-shadow:none}
.layout-simple #voice .vcard h3{color:#000}
.layout-simple #voice .vcard p{color:#666}
@media(max-width:600px){.layout-simple.subpage .cell{padding:22px}.layout-simple .prose h2{font-size:25px}}
/* Legal and support documents keep their own reading layout and content. */
@font-face{font-family:Geist;src:url('/assets/fonts/geist-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
body.layout-simple{font-family:var(--sans)}
body.layout-simple.legal-page{--mut:#63748d;--acc:#2d66d6;--product-paper:#f7f7f7;--wash:#f7f7f7;background:#fff;color:#000}
.layout-simple.legal-page .nav{position:fixed;top:12px;left:0;right:0;background:none;border:0;backdrop-filter:none;padding:0 20px;height:auto}
.layout-simple.legal-page .nav-inner{width:100%;height:56px;display:flex;align-items:center;gap:24px;margin:auto;max-width:880px;background:rgba(0,0,0,.88);border-color:#ffffff20}
.layout-simple.legal-page .nav .brand,.layout-simple.legal-page .nav .brand span{color:#fff}
.layout-simple.legal-page .nav nav a{color:#666}
.layout-simple.legal-page .nav nav a:hover{color:#fff}
.layout-simple.legal-page .nav .btn-dark{background:#fff;color:#000;border:0;border-radius:10px}
.layout-simple.legal-page .mobile-menu-toggle{color:#fff}
.layout-simple.legal-page .legal-hero{padding-top:118px;background:linear-gradient(#f7f7f7,#fff);border:0}
.layout-simple.legal-page h1,.layout-simple.legal-page h2,.layout-simple.legal-page h3{color:#000;letter-spacing:-.035em}
.layout-simple.legal-page h1{font-size:clamp(36px,5vw,58px)}
.layout-simple.legal-page .legal-document h2{font-size:23px}
.layout-simple.legal-page .legal-document p,.layout-simple.legal-page .legal-document li{color:#666}
.layout-simple.legal-page .legal-brief,.layout-simple.legal-page .legal-card{background:#f7f7f7;border-color:#e3e3e3;border-radius:14px}
.layout-simple.legal-page .legal-card h2{font-size:23px}
.layout-simple.legal-page .legal-card p{color:#666}
.layout-simple.legal-page .legal-navigation a{color:#666}
.layout-simple.legal-page .legal-navigation a[aria-current=page]{background:#f7f7f7;color:#666}
.layout-simple.legal-page .legal-footer{background:#fff;color:#666;border-color:#e3e3e3}
.layout-simple.legal-page .legal-footer a{color:#666}
@media(max-width:760px){
 .layout-simple.legal-page .nav{top:8px;padding:0 12px}
 .layout-simple.legal-page .nav-inner{gap:10px;padding:0 13px;height:56px}
 .layout-simple.legal-page .legal-hero{padding-top:100px}
}
body.layout-simple.has-announce .nav{top:50px}
.layout-simple .organize-step.preview-offscreen *{animation-play-state:paused!important}
@media(min-width:761px){.layout-simple .focus-stage{min-height:0}}

/* Light illustration materials: keyboard, search, Voice, organization and extra capabilities. */
.layout-simple .key,.layout-simple .board .key{background:linear-gradient(180deg,#fff,#f7f7f7);border:1px solid #e3e3e3;color:#666;box-shadow:0 1px 0 #fff inset,0 -3px 0 #e3e3e3 inset,0 6px 0 -1px #e3e3e3,0 11px 14px -8px #00000044}
.layout-simple .key.lit,.layout-simple .board .key.lit{background:linear-gradient(160deg,#fff,#f7f7f7);color:#000;border-color:#b9ceea;box-shadow:0 1px 0 #fff inset,0 -3px 0 #e3e3e3 inset,0 6px 0 -1px #bbcee6,0 11px 22px -12px #0000004d}
.layout-simple .key small{color:#666}
.layout-simple .key.lit svg{stroke:#3d72bb;color:#666}
.layout-simple .key.lit b{color:#000}
.layout-simple .board{background:linear-gradient(160deg,#f7f7f7,#f7f7f7);border:1px solid #e3e3e3;mask-image:none;-webkit-mask-image:none;padding-bottom:22px}
.layout-simple .board .key::before{background:radial-gradient(150px circle at var(--kx,50%) var(--ky,0%),rgba(80,135,210,calc(var(--kl,0) * .07)),transparent 70%)}
.layout-simple .board .key::after{background:radial-gradient(130px circle at var(--kx,50%) var(--ky,0%),rgba(65,119,194,calc(var(--kl,0) * .4)),transparent 70%)}
.layout-simple .board .key.is-echo{color:#000}
.layout-simple .hero-keys .key{box-shadow:0 -3px 0 #e3e3e3 inset,0 6px 0 #bdcfe6,0 15px 25px -12px #00000040}
.layout-simple .final-keys .key{box-shadow:0 -3px 0 #e3e3e3 inset,0 6px 0 #bdcfe6,0 14px 22px -12px #00000044}
.layout-simple .desk{background:#e3e3e3;box-shadow:0 20px 60px #0000001b,0 0 0 1px #e3e3e3}
.layout-simple .desk-screen{background:#f7f7f7}
.layout-simple .menubar{background:#f7f7f7ec;color:#666;border-bottom:1px solid #e3e3e3}
.layout-simple .menubar .right{color:#666}
.layout-simple .nle{background:#e3e3e3;filter:none}
.layout-simple :is(.nle-bin,.nle-timeline){background:#f7f7f7;border-color:#e3e3e3}
.layout-simple .desk-screen::after{background:radial-gradient(60% 70% at 50% 45%,#e3e3e31a,#e3e3e360)}
.layout-simple .track{background:#0000000a}
.layout-simple .track.v span{background:linear-gradient(#abc6e7,#87abd7)}
.layout-simple .track.a span{background:linear-gradient(#b5d7cd,#88b8a7)}
.layout-simple .win,.layout-simple #demo .win{background:#f7f7f7;border:1px solid #e3e3e3;box-shadow:0 18px 45px -14px #00000030,0 1px 0 #fff inset;backdrop-filter:none;-webkit-backdrop-filter:none}
.layout-simple .win-search{background:#f7f7f7;border-color:#e3e3e3;color:#000}
.layout-simple :is(.win-foot,.win-search .tag){color:#666;border-color:#e3e3e3}
.layout-simple .k{background:#e3e3e3;color:#666}
.layout-simple .row.on{background:#f7f7f7;box-shadow:0 0 0 1px #c2d6f3 inset}
.layout-simple .row .ic,.layout-simple .panel-rows .play{background:#f7f7f7;color:#666}
.layout-simple .row.on .ic,.layout-simple .panel-rows li.hit .play{background:#3d73c9;color:#fff}
.layout-simple :is(.row svg.w,.panel-rows .wave){color:#666}
.layout-simple .row.on svg.w,.layout-simple .panel-rows li.hit .wave{color:#666}
.layout-simple .panel-search{background:#f7f7f7;border-color:#e3e3e3}
.layout-simple .panel-search input{color:#000}
.layout-simple .panel-search input::placeholder{color:#666}
.layout-simple .panel-rows li.hit{background:#f7f7f7;border-color:#afc9ed;color:#000}
.layout-simple .fx-wave{background:#f7f7f7}
.layout-simple .fx-region{background:#0000001a;border-color:#4b83d5}
.layout-simple .fx-region span{color:#fff}
.layout-simple .fx-head{background:#376fc0}
.layout-simple .chips span,.layout-simple .brief div{background:#f7f7f7;border-color:#e3e3e3;color:#666}
.layout-simple .chips span.on,.layout-simple .stages span.on{background:#e3e3e3;color:#666;border-color:#b9cfee}
.layout-simple .stages span{background:#f7f7f7;color:#666}
.layout-simple .dock{box-shadow:0 8px 25px #0000000a}
.layout-simple .dock .tip{background:#fff;color:#666;border-color:#e3e3e3;box-shadow:0 5px 16px #00000014}
.layout-simple #voice .voice-composer{background:linear-gradient(160deg,#fff,#f7f7f7);border-color:#e3e3e3;box-shadow:0 18px 55px #00000014}
.layout-simple #voice .voice-writing .voice-script{background:#f7f7f7;color:#000;border-color:#e3e3e3}
.layout-simple #voice .voice-writing .voice-script small{color:#666}
.layout-simple .voice-script{background:#f7f7f7;color:#000;border-color:#e3e3e3}
.layout-simple .voice-choice-head,.layout-simple .voice-choice-head small{color:#666}
.layout-simple .voice-options span{background:#fff;color:#666;border-color:#e3e3e3}
.layout-simple .voice-options span.is-selected{background:#e3e3e3;color:#666;border-color:#9fbee9}
.layout-simple #voice .voice-controls .voice-set>div{background:#f7f7f7;border-color:#e3e3e3;color:#666}
.layout-simple #voice .voice-controls .voice-set b{color:#666}
.layout-simple .delivery-meter{background:#e3e3e3}
.layout-simple .delivery-meter>i{background:#5788cc}
.layout-simple #voice .voice-composer .voice-gen .go{background:linear-gradient(#5487d3,#386bbc);color:#fff;border-color:#3a6dbb;box-shadow:0 7px 15px -10px #22549766}
.layout-simple #voice .voice-stage[data-voice-phase="1"] .voice-set>div{background:#f7f7f7;border-color:#b5ccee}
.layout-simple #voice .voice-output,.layout-simple #voice .voice-stage[data-voice-phase="3"] .voice-output{background:#f7f7f7;border-color:#e3e3e3}
.layout-simple #voice .voice-composer .voice-output>.ic{background:#e3e3e3;color:#666}
.layout-simple #voice .voice-composer .voice-output .w,.layout-simple #voice .voice-card-wave{color:#666}
.layout-simple #voice .voice-stage[data-voice-phase="2"] .voice-gen .go{border-color:#a4c2eb;box-shadow:0 0 20px -12px #4178ce88}
.layout-simple .organize-step .cell .vis{background:linear-gradient(145deg,#f7f7f7,#f7f7f7);border:1px solid #e3e3e3}
.layout-simple :is(.pool,.pair,.task,.similar .src){background:#fff;border-color:#e3e3e3}
.layout-simple .pool .row{background:#f7f7f7}
.layout-simple .sort-flight{background:#fff;border-color:#bad0ee;box-shadow:0 10px 22px -12px #00000033}
.layout-simple .tagrow span{background:#e3e3e3;color:#666}
.layout-simple .organize-step .similar .ranked-row,.layout-simple .organize-step .pair .row{background:#fff;border-color:#e3e3e3}
.layout-simple .organize-step .pair,.layout-simple .organize-step .task{background:#fff}
.layout-simple .bar{background:#e3e3e3}
.layout-simple .bar i{background:#5383c8}
.layout-simple .pair-act span{background:#f7f7f7;color:#666}
.layout-simple .pair-act span.on{background:#e3e3e3;color:#666;border-color:#b4cdee}
.layout-simple .task-complete{color:#3c7b63}
.layout-simple .extras-browser .else-view .win{background:#fff;border-color:#e3e3e3;box-shadow:0 8px 25px #0000000a}
.layout-simple .else-panel{background:transparent}
.layout-simple .file .doc{background:linear-gradient(#f7f7f7,#e3e3e3);color:#666;border-color:#b8cdeb}
.layout-simple .formats span{background:#f7f7f7;color:#666;border-color:#e3e3e3}
.layout-simple .lic{background:#e3e3e3;color:#36765c}
.layout-simple .lic.by{background:#fff1d9;color:#8d6929}
.layout-simple .voice-gen .go{color:#fff}
/* Explicitly theme the complete Voice frame, including its inner canvas. */
.layout-simple #voice .vwin{background:linear-gradient(160deg,#fff,#f7f7f7);color:#000;border-color:#e3e3e3;box-shadow:0 18px 55px #00000014}
.layout-simple #voice .vwin-main.voice{background:transparent;color:#000}
.layout-simple #voice .voice-controls{background:transparent}
.layout-simple #voice .voice-gen{background:transparent}

/* Brand: black typography, white materials and the logo's blue as the only decorative accent. */
.layout-simple :is(.label,.link,.more-link,.voice-replay,.voice-fact-mark,.chip-link){color:#2468d9}
.layout-simple :is(.focus-switch button[aria-pressed=true],.dock button[aria-selected=true],.tour-tabs button[aria-current=true],.runon button[aria-pressed=true],.chip[aria-pressed=true],.lang-switch a[aria-current=true]){color:#2468d9}
.layout-simple :is(.voice-steps .is-current,.voice-steps span.is-active,.voice-options span.is-selected,.vcard .voices span.on,.panel-rows li.hit){color:#2468d9}
.layout-simple :is(.key.lit svg,.row svg.w,.panel-rows .wave,.voice-card-wave,.organize-step .cell h3 svg){color:#4d91ff;stroke:currentColor}
.layout-simple .key.lit b{color:#000}
.layout-simple .key small{color:#666}
.layout-simple .key,.layout-simple .board .key{background:linear-gradient(180deg,#fff,#f7f7f7);color:#000}
.layout-simple .key.lit,.layout-simple .board .key.lit{background:linear-gradient(160deg,#fff,#f7f7f7);color:#000}
.layout-simple :is(.fx-head,.row.on .ic,.panel-rows li.hit .play){background:#4d91ff;color:#fff}
.layout-simple :is(.bar i,.delivery-meter>i){background:#4d91ff}
.layout-simple .row.on svg.w,.layout-simple .panel-rows li.hit .wave{color:#2468d9}
.layout-simple #voice .voice-composer .voice-gen .go{background:#2468d9;border-color:#2468d9;color:#fff;box-shadow:0 6px 14px -10px #4d91ff80}
.layout-simple #voice .voice-composer .voice-output .w{color:#4d91ff}
.layout-simple #voice .voice-stage[data-voice-phase="1"] .voice-set{box-shadow:0 0 0 1px #4d91ff24,0 0 24px -16px #4d91ff50}
.layout-simple #voice .voice-stage[data-voice-phase="2"] .voice-output{background:#f7f7f7}
.layout-simple #voice .voice-stage[data-voice-phase="4"] .voice-script{border-color:#4d91ff40}
.layout-simple #voice .voice-stage[data-voice-phase="2"] .go::before{border-top-color:#fff}
.layout-simple .voice-steps .is-current i{background:#4d91ff;box-shadow:0 0 8px #4d91ff30}
.layout-simple #voice .vcards .vcard:hover{border-color:#4d91ff50;box-shadow:0 18px 40px -30px #4d91ff50}
.layout-simple #voice .vcards .vcard:hover .voices span.on{background:#f7f7f7;border-color:#4d91ff80}
.layout-simple .final h2 em{color:#2468d9}
/* A short physical press, a slower cushioned return, and light contained within each key. */
.layout-simple :is(.hero-keys,.final-keys){--key-return:620ms;--key-press:280ms;--key-ease:cubic-bezier(.22,1,.36,1)}
.layout-simple :is(.hero-keys,.final-keys) .key{isolation:isolate;transform:translateY(0);transition:transform var(--key-return) var(--key-ease),box-shadow var(--key-return) var(--key-ease),border-color 450ms ease,color 450ms ease;box-shadow:0 1px 0 #fff inset,0 -3px 0 #e3e3e3 inset,0 6px 0 #b5cbed,0 14px 24px -14px #00040}
.layout-simple :is(.hero-keys,.final-keys) .key::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(145deg,#4d91ff08,#4d91ff30);opacity:0;transition:opacity 650ms ease}
.layout-simple :is(.hero-keys,.final-keys) .key.is-down{transform:translateY(4px);color:#000;border-color:#4d91ffb3;box-shadow:0 1px 0 #fff inset,0 -1px 0 #e3e3e3 inset,0 2px 0 #aec9ee,0 8px 16px -12px #2468d970;transition-duration:var(--key-press)}
.layout-simple :is(.hero-keys,.final-keys) .key.is-down::after{opacity:1;transition-duration:350ms}
.layout-simple .hero-keys .plus{transition:opacity 500ms ease,transform 650ms cubic-bezier(.22,1,.36,1);opacity:.6}
.layout-simple .hero-keys.is-pressed .plus{opacity:1;transform:scale(1.12)}
.layout-simple .board .key{transition:transform 450ms cubic-bezier(.22,1,.36,1),box-shadow 450ms ease,border-color 450ms ease,color 350ms ease}
.layout-simple .board .key.is-down{background:linear-gradient(#fff,#e3e3e3);border-color:#4d91ff;box-shadow:0 1px 0 #fff inset,0 2px 0 #bbcee6;transition-duration:200ms}
@media(prefers-reduced-motion:reduce){
 .layout-simple :is(.hero-keys,.final-keys,.board) .key,.layout-simple .hero-keys .plus{transition:none;transform:none}
 .layout-simple :is(.hero-keys,.final-keys) .key::after{transition:none}
}
/* App names crossfade in place while the surrounding hint gently changes width. */
:root{--text-soft-dur:350ms;--text-soft-blur:2px;--text-soft-ease:ease-in-out;--text-soft-resize-dur:500ms;--text-soft-resize-ease:cubic-bezier(.22,1,.36,1)}
.t-text-soft{display:inline-grid;justify-items:var(--text-soft-align,start);transition:width var(--text-soft-resize-dur) var(--text-soft-resize-ease)}
.t-text-soft>span{grid-area:1/1;white-space:pre;transition:filter var(--text-soft-dur) var(--text-soft-ease),opacity var(--text-soft-dur) var(--text-soft-ease)}
.t-text-soft-new{opacity:0;filter:blur(var(--text-soft-blur))}
.t-text-soft.is-swapping .t-text-soft-old{opacity:0;filter:blur(var(--text-soft-blur))}
.t-text-soft.is-swapping .t-text-soft-new{opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.t-text-soft,.t-text-soft>span{transition:none!important}}

/* Restore the screenshot-to-demo reveal with space around the heading and visual. */
.layout-simple :is(#studio,#editors).focus-story{min-height:0;padding:88px 0 96px}
.layout-simple :is(#studio,#editors).focus-story>.wrap{min-height:165svh}
.layout-simple :is(#studio,#editors) .focus-sticky{position:sticky;top:96px;display:block;height:auto;min-height:0;padding:0 0 32px}
.layout-simple :is(#studio,#editors) .focus-heading :is(.head,.editors-head){max-width:980px;margin:0 auto 28px}
.layout-simple :is(#studio,#editors) .focus-heading h2{font-size:clamp(32px,4.2vw,54px);line-height:1.12;letter-spacing:-.055em}
.layout-simple #editors .focus-heading .mono{font:400 15px/1.6 var(--sans);letter-spacing:0;color:#666;margin-top:18px}
.layout-simple :is(#studio,#editors) .focus-switch{background:#f7f7f7;border-color:#e3e3e3;margin:0 auto 18px}
.layout-simple :is(#studio,#editors) .focus-progress{display:block;width:min(360px,65%);height:2px;background:#0000d;margin:0 auto 32px}
.layout-simple :is(#studio,#editors) .focus-progress i{background:#4d91ff}
.layout-simple :is(#studio,#editors) .focus-layer{transition:opacity 850ms cubic-bezier(.22,1,.36,1),transform 1100ms cubic-bezier(.22,1,.36,1),visibility 850ms;transition-delay:0s}
.layout-simple :is(#studio,#editors) .focus-photo{transform:none}
.layout-simple :is(#studio,#editors) .focus-demo{transform:translateY(6px)}
.layout-simple :is(#studio,#editors).is-demo .focus-photo{transform:translateY(-4px)}
.layout-simple :is(#studio,#editors).is-demo .focus-demo{transform:none}
.layout-simple :is(#studio,#editors) .focus-photo .popup-detail{width:100%;max-width:min(940px,calc((100svh - 390px)*1.4277));margin:0 auto}
.layout-simple #editors .focus-photo .popup-detail{max-width:min(940px,calc((100svh - 410px)*1.4667))}
.layout-simple #studio .focus-demo .desk{max-width:min(1080px,calc((100svh - 560px)*1.6667));margin:auto}
.layout-simple #editors .focus-demo .rail{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(230px,calc((100% - 40px)/3));width:100%;min-width:0;margin:0;gap:20px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#4d91ff60 #00008}
.layout-simple #editors .ed{min-height:310px;padding:25px;border-radius:18px;background:#f7f7f7;border-color:#e3e3e3}
.layout-simple #editors .ed .mono{filter:none;color:#2468d9}
.layout-simple #editors .ed .more-link{color:#2468d9}
.layout-simple #editors .focus-stage{align-items:center}
/* Extra capabilities use the same open composition and light product materials as the page. */
.layout-simple #more-features .more-features-head{margin:0 auto 42px;max-width:800px}
.layout-simple #more-features .extras-browser{background:none;border:0;border-radius:0;box-shadow:none;grid-template-columns:minmax(260px,.9fr) minmax(0,1.5fr);gap:56px;min-height:380px;overflow:visible}
.layout-simple #more-features .extras-nav{background:none;border:0;padding:12px 0;align-self:center}
.layout-simple #more-features .runon{display:grid;gap:0}
.layout-simple #more-features .runon button{border:0;border-bottom:1px solid #0000d;border-radius:0;background:none!important;box-shadow:none!important;padding:18px 14px 18px 20px;font:400 15px/1.5 var(--sans);color:#666;min-height:56px;text-align:left;transition:color 300ms ease}
.layout-simple #more-features .runon button::before{left:0;top:50%;width:3px;height:16px;border-radius:2px;background:#4d91ff;transform:translateY(-50%) scaleY(.3);opacity:0;transition:opacity 350ms ease,transform 450ms cubic-bezier(.22,1,.36,1)}
.layout-simple #more-features .runon button::after{display:none}
.layout-simple #more-features .runon button[aria-pressed=true]{color:#000;font-weight:500}
.layout-simple #more-features .runon button[aria-pressed=true]::before{opacity:1;transform:translateY(-50%) scaleY(1)}
.layout-simple #more-features .runon button:hover{color:#2468d9}
.layout-simple #more-features .runon-note{border:0;margin:22px 0 0;padding:0;font:400 12px/1.6 var(--sans);color:#666}
.layout-simple #more-features .else-panel{background:#f7f7f7;border:1px solid #e3e3e3;border-radius:20px;min-height:380px;padding:28px}
.layout-simple #more-features .else-view{inset:28px}
.layout-simple #more-features .else-view .win{background:#fff;border-color:#e3e3e3;border-radius:12px;box-shadow:0 14px 32px -20px #00024}
@media(max-width:900px){
 .layout-simple :is(#studio,#editors) .focus-heading h2{font-size:clamp(29px,5vw,39px)}
 .layout-simple :is(#studio,#editors) .focus-sticky{top:90px}
 .layout-simple #editors .focus-demo .rail{grid-auto-columns:minmax(230px,calc((100% - 20px)/2))}
 .layout-simple #more-features .extras-browser{gap:28px;grid-template-columns:minmax(220px,.85fr) minmax(0,1.4fr)}
}
@media(max-width:760px){
 .layout-simple :is(#studio,#editors).focus-story{padding:65px 0 72px}
 .layout-simple :is(#studio,#editors).focus-story>.wrap{min-height:150svh}
 .layout-simple :is(#studio,#editors) .focus-sticky{top:88px;padding-bottom:24px}
 .layout-simple :is(#studio,#editors) .focus-heading :is(.head,.editors-head){margin-bottom:24px}
 .layout-simple :is(#studio,#editors) .focus-progress{margin-bottom:26px}
 .layout-simple :is(#studio,#editors) .focus-photo .popup-detail,.layout-simple #studio .focus-demo .desk{max-width:100%}
 .layout-simple #editors .focus-heading .mono{font-size:13px;margin-top:14px}
 .layout-simple #editors .ed{min-height:290px;padding:22px}
 .layout-simple #editors .focus-demo .rail{grid-auto-columns:85%;gap:14px}
 .layout-simple #more-features .extras-browser{grid-template-columns:1fr;gap:24px;min-height:0}
 .layout-simple #more-features .extras-nav{padding:0}
 .layout-simple #more-features .runon{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .layout-simple #more-features .runon button{height:100%;border:1px solid #00012;border-radius:10px;padding:12px;font-size:12px;min-height:52px}
 .layout-simple #more-features .runon button[aria-pressed=true]{background:#f7f7f7!important;border-color:#4d91ff60;color:#2468d9}
 .layout-simple #more-features .runon button::before{display:none}
 .layout-simple #more-features .runon-note{grid-column:1/-1;margin-top:14px}
 .layout-simple #more-features .extras-browser>.proportional-frame{width:100%;margin:0}
 .layout-simple #more-features .else-panel{min-height:340px;padding:24px}
 .layout-simple #more-features .else-view{inset:24px}
 .layout-simple #more-features .is-scaled .else-panel{padding:0}
 .layout-simple #more-features .is-scaled .else-view{inset:24px}
}
@media(max-height:700px),(prefers-reduced-motion:reduce){
 .layout-simple :is(#studio,#editors).focus-story>.wrap{min-height:0}
 .layout-simple :is(#studio,#editors) .focus-sticky{position:relative;top:auto;height:auto}
 .layout-simple :is(#studio,#editors) .focus-photo .popup-detail,.layout-simple #studio .focus-demo .desk{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 .layout-simple :is(#studio,#editors) .focus-layer{transition:none;transform:none!important}
 .layout-simple #more-features .runon button::before{transition:none}
}

/* One type hierarchy and one neutral palette, informed by the supplied reference. */
@font-face{font-family:"Inter Variable";src:url('/assets/fonts/inter-latin-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
body.layout-simple{--sans:"Inter Variable",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;--bg:#fff;--bg-2:#f7f7f7;--panel:#f7f7f7;--panel-2:#f7f7f7;--panel-3:#e3e3e3;--ink:#000;--ink-2:#666;--ink-3:#777;--line:#0000000d;--line-2:#e3e3e3;--line-3:#d1d1d1;font-family:var(--sans);font-optical-sizing:auto}
.layout-simple :is(.desk,.win,.voice-composer,.board,.key,.cell .vis,.else-panel){--bg-2:#f7f7f7;--panel-2:#f7f7f7;--panel-3:#e3e3e3;--ink:#000;--ink-2:#666;--ink-3:#777;--line:#0000000d;--line-2:#e3e3e3;--line-3:#d1d1d1}
.layout-simple h2,.layout-simple :is(#studio,#editors) .focus-heading h2,.layout-simple .focus-heading h2{font-family:var(--sans);font-size:clamp(32px,4.2vw,56px);font-weight:650;line-height:1.08;letter-spacing:-.045em;color:#000}
.layout-simple h2 span{color:#777}
.layout-simple h3{font-size:23px;font-weight:600;line-height:1.25;letter-spacing:-.025em;color:#000}
.layout-simple :is(.lede,.cell p,.ed p,.vcard p,.faq details p){color:#666;letter-spacing:-.012em}
.layout-simple .caption{font-family:var(--sans);font-size:14px;line-height:1.6;color:#666}
.layout-simple .label{color:#666;font-size:13px;letter-spacing:0}
.layout-simple .nav-links a{font-size:14px;font-weight:500;letter-spacing:-.02em;color:#ffffffb3}
.layout-simple .nav .brand{letter-spacing:-.02em}
.layout-simple .hero{padding-top:132px;background:linear-gradient(180deg,#2046ca 0%,#2386ff 58%,#72c2fb 100%)}
.layout-simple .hero-platform{display:flex;align-items:center;justify-content:center;gap:11px;margin:0 auto 38px;font:600 20px/1.3 var(--sans);letter-spacing:-.025em;color:#fff}
.layout-simple .apple-mark{display:block;flex:none;object-fit:contain}
.layout-simple .hero-platform .apple-mark,.layout-simple .hero-cta .apple-mark{filter:invert(1)}
.layout-simple .hero h1{max-width:1050px;font-size:clamp(64px,8vw,112px);font-weight:700;line-height:1;letter-spacing:-.05em;margin:0 auto 34px}
.layout-simple .hero h1 em{display:inline-block;font-family:var(--serif);font-size:1.02em;line-height:1.06;letter-spacing:-.045em;margin-top:6px;color:#fff}
.layout-simple .hero .lede{max-width:740px;font:400 20px/1.45 var(--sans);letter-spacing:-.015em;color:#fff}
.layout-simple .hero-actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:32px}
.layout-simple .hero .hero-cta{height:60px;padding:0 29px;gap:12px;border-radius:19px;background:#000;border-color:#000;color:#fff;font:600 18px/1 var(--sans);letter-spacing:-.02em;box-shadow:none}
.layout-simple .hero .hero-cta:hover{background:#1a1a1a;border-color:#1a1a1a}
.layout-simple .hero-secondary{display:inline-flex;align-items:center;gap:7px;font:400 14px/1.4 var(--sans);letter-spacing:-.01em;color:#ffffffd9;text-decoration:none}
.layout-simple .hero-secondary:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.layout-simple .hero .mono{font:400 12px/1.5 var(--sans);letter-spacing:0;color:#00000080;margin-top:20px}
.layout-simple .hero-hint{color:#00000080}
.layout-simple .hero-hint b{color:#000000b3}
.layout-simple #explorer-detail{background:linear-gradient(#72c2fb,#fff 94%)}
.layout-simple .key,.layout-simple .board .key{background:linear-gradient(#fff,#f7f7f7);border-color:#e3e3e3;color:#000;box-shadow:0 1px 0 #fff inset,0 -3px 0 #e3e3e3 inset,0 6px 0 -1px #d1d1d1,0 11px 14px -8px #0000001a}
.layout-simple .key.lit,.layout-simple .board .key.lit{background:linear-gradient(#fff,#f7f7f7);border-color:#d1d1d1;box-shadow:0 1px 0 #fff inset,0 -3px 0 #e3e3e3 inset,0 6px 0 -1px #d1d1d1,0 11px 14px -8px #0000001a}
.layout-simple .strengths .board{background:#f7f7f7;border-color:#e3e3e3}
.layout-simple :is(.hero-keys,.final-keys) .key{box-shadow:0 1px 0 #fff inset,0 -3px 0 #e3e3e3 inset,0 6px 0 #d1d1d1,0 14px 24px -14px #00000026}
.layout-simple :is(.hero-keys,.final-keys) .key.is-down{border-color:#4d91ff;box-shadow:0 1px 0 #fff inset,0 -1px 0 #e3e3e3 inset,0 2px 0 #c9c9c9,0 8px 16px -12px #00000026}
@media(max-width:760px){
 .layout-simple .hero{padding-top:112px}
 .layout-simple .hero-platform{font-size:16px;gap:9px;margin-bottom:28px}
 .layout-simple .hero-platform .apple-mark{width:16px;height:20px}
 .layout-simple .hero h1{font-size:clamp(50px,10vw,76px);letter-spacing:-.05em;margin-bottom:25px}
 .layout-simple .hero .lede{font-size:17px;line-height:1.5;max-width:520px}
 .layout-simple .hero-actions{margin-top:27px;gap:16px}
 .layout-simple .hero .hero-cta{height:54px;padding:0 23px;font-size:16px;border-radius:16px}
 .layout-simple .hero-cta .apple-mark{width:18px;height:22px}
 .layout-simple h2,.layout-simple :is(#studio,#editors) .focus-heading h2,.layout-simple .focus-heading h2{font-size:clamp(29px,6vw,40px);line-height:1.12}
 .layout-simple h3{font-size:21px}
}

/* Review notes: visible walkthroughs, quiet blue editor cards, and the black brand footer. */
.layout-simple .hero-hint,.layout-simple .hero-hint b{color:#fff;font-weight:500}
.layout-simple .nav .btn .apple-mark{filter:none;width:13px;height:16px}
.layout-simple :is(#studio,#editors).walkthrough{padding:96px 0;min-height:0}
.layout-simple :is(#studio,#editors).walkthrough>.wrap{min-height:0}
.layout-simple .walkthrough .focus-sticky{position:relative;top:auto;height:auto;min-height:0;padding:0;display:block}
.layout-simple .walkthrough .focus-heading :is(.head,.editors-head){margin:0 auto 40px}
.layout-simple .walkthrough .focus-stage{display:flex;flex-direction:column;gap:64px;align-items:stretch;min-height:0}
.layout-simple .walkthrough .focus-layer{position:relative;grid-area:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none}
.layout-simple .walkthrough .focus-photo .popup-detail{width:100%;max-width:940px;margin:0 auto}
.layout-simple #studio.walkthrough .focus-demo .desk{max-width:1080px;margin:0 auto}
.layout-simple #studio.walkthrough .focus-demo .dock{margin-top:24px}
.layout-simple #editors.walkthrough .rail{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:20px;width:100%;min-width:0;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
.layout-simple #editors.walkthrough .rail-dots{display:none}
.layout-simple #editors .ed{--c:77,145,255;transform:none!important;background:radial-gradient(100% 70% at 50% 100%,#4d91ff0d,transparent),#f7f7f7;border-color:#e3e3e3;box-shadow:0 1px 0 #fff inset;transition:border-color 400ms ease,box-shadow 600ms ease}
.layout-simple #editors .ed:hover{transform:none!important;border-color:#4d91ff60;box-shadow:0 12px 35px -22px #4d91ff60}
.layout-simple #editors .ed::before,.layout-simple #editors .ed::after{display:none}
.layout-simple .footer{background:#000;color:#aaa;border-top:0;padding:72px 0 0;overflow:hidden}
.layout-simple .footer .brand{color:#fff;font-size:17px}
.layout-simple .footer .footer-brand p{color:#888;font-size:14px;line-height:1.6}
.layout-simple .footer .footer-links h4{color:#777;font:500 13px/1.4 var(--sans);letter-spacing:0;text-transform:none}
.layout-simple .footer .footer-links a{color:#ddd;font-size:14px;line-height:1.6}
.layout-simple .footer .footer-links a:hover{color:#fff}
.layout-simple .footer .footer-bottom{color:#777;border-color:#ffffff1a;margin-top:44px;padding:24px 0}
.layout-simple .footer-wordmark{width:100%;padding:0 20px;margin:52px auto 0;text-align:center;white-space:nowrap;overflow:hidden;color:#ffffff12;font:700 clamp(40px,14vw,280px)/.9 var(--sans);letter-spacing:-.065em;user-select:none;pointer-events:none}
@media(max-width:900px){.layout-simple #editors.walkthrough .rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .layout-simple :is(#studio,#editors).walkthrough{padding:65px 0}
 .layout-simple .walkthrough .focus-stage{gap:38px}
 .layout-simple .walkthrough .focus-heading :is(.head,.editors-head){margin-bottom:30px}
 .layout-simple .walkthrough .focus-photo .popup-detail,.layout-simple #studio.walkthrough .focus-demo .desk{max-width:100%}
 .layout-simple .footer{padding-top:50px}
 .layout-simple .footer-wordmark{padding:0 10px;margin-top:35px}
}
@media(max-width:560px){.layout-simple #editors.walkthrough .rail{grid-template-columns:1fr}}

.layout-simple .shot-link{position:absolute;inset:0;display:block;border-radius:inherit}
.layout-simple .shot-link:focus-visible{outline:2px solid #4d91ff;outline-offset:5px}
.layout-simple .footer .footer-brand p a{color:#aaa;text-decoration:none}
.layout-simple .footer .footer-brand p a:hover{color:#fff}
.layout-simple :is(#studio,#editors).walkthrough .focus-stage{align-items:stretch}
.layout-simple :is(#studio,#editors).walkthrough .focus-layer{width:100%;transform:none;opacity:1;visibility:visible}
.layout-simple :is(#studio,#editors).walkthrough .focus-photo .popup-detail{max-width:940px}
@media(max-width:760px){.layout-simple :is(#studio,#editors).walkthrough .focus-photo .popup-detail{max-width:100%}}

.layout-simple .footer .footer-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:24px;font-family:var(--sans);font-size:12px;font-weight:400}
.layout-simple .footer-credit{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0;color:#fff;font:400 14px/1.5 var(--sans);letter-spacing:-.015em}
.layout-simple .footer-credit .credit-heart{display:inline-block;font-size:18px;line-height:1}
.layout-simple .footer-credit a{color:#fff;text-decoration:none;margin-left:3px}
.layout-simple .footer-credit a:hover{text-decoration:underline;text-underline-offset:4px}
.layout-simple .footer-credit a:focus-visible{outline:2px solid #4d91ff;outline-offset:5px;border-radius:2px}

/* Quiet product facts replace the secondary hero link. */
.layout-simple .hero-facts{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 30px;list-style:none;margin:25px auto 0;padding:0;color:#00000080;font:400 14px/1.5 var(--sans);letter-spacing:-.015em}
.layout-simple .hero-facts li{margin:0;padding:0;white-space:nowrap}
@media(max-width:760px){.layout-simple .hero-facts{max-width:350px;gap:8px 18px;margin-top:22px;font-size:12px}}

.layout-simple .hero-facts a{color:inherit;text-decoration:none}
.layout-simple .hero-facts a:hover{text-decoration:underline;text-underline-offset:4px}

.layout-simple .footer-credit a{display:inline-flex;align-items:center;gap:9px;margin-left:6px}
.layout-simple .footer-credit .creator-portrait{display:block;width:32px;height:32px;flex:none;object-fit:cover;border-radius:50%;border:1px solid #ffffff26}

/* Keep the product summary, action and creator credit together. */
.layout-simple .footer .footer-brand{flex:1 1 340px;max-width:440px}
.layout-simple .footer .footer-description{max-width:390px;margin-top:22px;font-size:15px;line-height:1.65}
.layout-simple .footer .footer-download{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:13px 20px;background:#fff;color:#000;border:1px solid #fff;border-radius:12px;font:500 14px/1.4 var(--sans);text-decoration:none}
.layout-simple .footer .footer-download img{display:block;object-fit:contain}
.layout-simple .footer .footer-download:hover{background:#eaeaea;border-color:#eaeaea}
.layout-simple .footer .footer-brand .footer-bottom{margin-top:26px;padding:0;border:0;gap:20px}
.layout-simple .footer .footer-brand .footer-credit{margin:0;color:#fff}
.layout-simple .footer-top{align-items:flex-start}
@media(max-width:760px){.layout-simple .footer .footer-brand{max-width:100%;flex-basis:100%}.layout-simple .footer .footer-brand .footer-bottom{margin-top:24px}}
.layout-simple .footer .footer-brand .footer-credit a{color:#fff}
/* App screenshots dissolve in the same frame, with no horizontal travel. */
.layout-simple #tour.is-crossfade .tour-track{display:grid;grid-template-columns:minmax(0,1fr);max-width:1000px;margin:0 auto;padding:0;gap:0;overflow:visible;scroll-snap-type:none;touch-action:pan-y}
.layout-simple #tour.is-crossfade .tour-panel{grid-area:1/1;width:100%;min-width:0;opacity:0;visibility:hidden;transform:none;pointer-events:none;transition:opacity 550ms cubic-bezier(.22,1,.36,1),visibility 0s linear 550ms}
.layout-simple #tour.is-crossfade .tour-panel.is-current{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 550ms cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
.layout-simple #tour.is-crossfade .tour-panel .shot{animation:none}
@media(prefers-reduced-motion:reduce){.layout-simple #tour.is-crossfade .tour-panel{transition:none}}
/* Quick Search: keep the headline and its screenshot in one calm surface. */
.layout-simple #studio.walkthrough .focus-photo.grey-feature-shell{padding:clamp(24px,4.5vw,58px);background:#f7f7f7;border-radius:36px;overflow:hidden}
.layout-simple #studio.walkthrough .grey-feature-shell .focus-heading .head{margin:0 auto 42px;max-width:100%}
.layout-simple #studio.walkthrough .focus-photo.grey-feature-shell .popup-detail{max-width:100%;margin:0}
@media(max-width:760px){
 .layout-simple #studio.walkthrough .focus-photo.grey-feature-shell{padding:30px 18px 18px;border-radius:25px}
 .layout-simple #studio.walkthrough .grey-feature-shell .focus-heading .head{margin-bottom:28px}
}
/* Flat surfaces throughout the site, including hover and animated states. */
body.layout-simple,body.layout-simple *,body.layout-simple *::before,body.layout-simple *::after{box-shadow:none!important;text-shadow:none!important}
.layout-simple .key svg{filter:none!important}
.layout-simple .strengths{grid-template-columns:1fr;gap:40px;text-align:center}
.layout-simple .strengths>div:first-child{max-width:800px;margin:auto}
.layout-simple .strengths .lede{margin-left:auto;margin-right:auto}
.layout-simple .strengths>.proportional-frame{width:100%;max-width:760px;margin:auto}
.layout-simple .strengths .board{max-width:760px;margin:auto}
.layout-simple #more-features .extras-browser{grid-template-columns:1fr;max-width:900px;gap:28px}
.layout-simple #more-features .extras-nav{width:100%;max-width:560px;margin:auto;padding:0}
.layout-simple #more-features .runon{grid-template-columns:1fr}
.layout-simple #more-features .extras-browser>.proportional-frame{width:100%;margin:0}
.layout-simple #organize .focus-sticky{padding:clamp(24px,4.5vw,58px);border-radius:36px;background:#f7f7f7}
.layout-simple #organize .organize-step .cell{background:#fff}
.layout-simple #organize .organize-stage{gap:22px}
/* Original Voice window: generated files beside the script and three delivery settings. */
.layout-simple #voice .head{max-width:1100px}
.layout-simple #voice .voice-legacy .vwin{display:grid;grid-template-columns:220px minmax(0,1fr);max-width:1080px;margin:auto;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:18px}
.layout-simple #voice .voice-legacy .vwin-side{display:block;background:#f2f2f2;border-right:1px solid #e3e3e3;padding:18px 12px}
.layout-simple #voice .voice-legacy .vline{color:#777}
.layout-simple #voice .voice-legacy .vline.on{background:#e5e5e5;color:#000}
.layout-simple #voice .voice-legacy .vline i{background:#4d91ff}
.layout-simple #voice .voice-legacy .vwin-main{display:block;padding:22px;min-width:0}
.layout-simple #voice .voice-legacy .voice-script{min-height:120px;padding:14px;background:#fff;border:1px solid #e3e3e3;border-radius:10px;font:400 17px/1.5 var(--sans);letter-spacing:0}
.layout-simple #voice .voice-legacy .voice-script small{display:block;margin-bottom:10px;font:500 10px/1.4 var(--mono);color:#777}
.layout-simple #voice .voice-legacy .voice-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;opacity:1}
.layout-simple #voice .voice-legacy .voice-set>div{padding:10px;background:#eee;border-radius:8px;color:#777;font-size:11px}
.layout-simple #voice .voice-legacy .voice-set b{display:block;margin-top:5px;color:#222;font-size:13px;font-weight:500}
.layout-simple #voice .voice-legacy .voice-gen{display:flex;margin-top:10px;min-height:44px}
.layout-simple #voice .voice-legacy .voice-gen .go{opacity:1;background:#2468d9;color:#fff;animation:none}
.layout-simple #voice .voice-legacy .voice-gen .row{opacity:1;background:#e5edfa;border:1px solid #cbdcf5}
.layout-simple #voice .vcards .voices,.layout-simple #voice .vcards .row{display:flex}
.layout-simple #voice .vcards .vcard{padding:22px;background:#f7f7f7;border:1px solid #e3e3e3;border-radius:18px}
.layout-simple #voice .vcards h3{margin-top:18px;font-size:18px;color:#000}
/* Only the incoming image fades; the old frame stays solid underneath. */
.layout-simple #tour.is-crossfade .tour-panel{transition:none;z-index:0}
.layout-simple #tour.is-crossfade .tour-panel.is-previous{opacity:1;visibility:visible;pointer-events:none;z-index:1;transition:none}
.layout-simple #tour.is-crossfade .tour-panel.is-current{z-index:2;transition:opacity 220ms ease-out,visibility 0s}
@media(max-width:760px){.layout-simple #organize .focus-sticky{padding:30px 18px 18px;border-radius:25px}.layout-simple .strengths{gap:28px}}
@media(prefers-reduced-motion:reduce){.layout-simple #tour.is-crossfade .tour-panel.is-current{transition:none}}
/* Aligned inner edges and a restrained outline for feature surfaces. */
.layout-simple #organize .focus-sticky,.layout-simple #studio.walkthrough .grey-feature-shell,.layout-simple #editors.walkthrough .focus-sticky{border:.35px solid #666}
.layout-simple #organize .focus-sticky{overflow:hidden}
.layout-simple #organize .organize-stage{width:100%;max-width:1000px;margin:0 auto;min-width:0}
.layout-simple #organize .organize-step{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.layout-simple #organize .organize-step:first-child{max-width:100%;margin:0 0 22px}
.layout-simple #organize .organize-step .cell{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.layout-simple #organize .organize-step .proportional-frame{width:100%;min-width:0;max-width:100%}
.layout-simple #editors.walkthrough .focus-sticky{padding:clamp(24px,4.5vw,58px);border-radius:36px;background:#f7f7f7;overflow:hidden}
.layout-simple #editors.walkthrough .focus-stage{min-width:0}
.layout-simple #editors.walkthrough .focus-layer{min-width:0;max-width:100%}
.layout-simple #editors.walkthrough .focus-photo .popup-detail{max-width:1000px}
.layout-simple #editors.walkthrough .rail{max-width:1000px;margin:0 auto}
.layout-simple #editors.walkthrough .ed{background:#fff;min-width:0}
/* The library benefits are readable statements instead of decorative keycaps. */
.layout-simple .library-facts{display:grid;grid-template-columns:1fr;list-style:none;padding:8px 28px;margin:0 auto;width:100%;max-width:760px;background:#f7f7f7;border:.35px solid #666;border-radius:24px;text-align:left}
.layout-simple .library-facts li{display:flex;align-items:flex-start;gap:18px;padding:24px 0;min-width:0}
.layout-simple .library-facts li+li{border-top:1px solid #e3e3e3}
.layout-simple .library-facts svg{display:block;flex:0 0 25px;width:25px;height:25px;fill:none;stroke:#2468d9;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.layout-simple .library-facts h3{font:600 18px/1.4 var(--sans);letter-spacing:-.025em;margin:0;color:#000}
.layout-simple .library-facts p{font:400 15px/1.6 var(--sans);margin:5px 0 0;color:#666}
@media(max-width:760px){.layout-simple #editors.walkthrough .focus-sticky{padding:30px 18px 18px;border-radius:25px}.layout-simple .library-facts{padding:4px 22px}.layout-simple .library-facts li{padding:22px 0}}
/* The Explorer desktop forms the full-bleed lower half of the hero. */
.layout-simple .hero{position:relative;isolation:isolate;overflow:hidden;padding-bottom:0;background:linear-gradient(180deg,#2046ca 0%,#2386ff 40%,#72c2fb 72%,#b7dcf8 100%)}
.layout-simple .hero>.wrap{position:relative;z-index:2}
.layout-simple .hero #explorer-detail.hero-scene{position:relative;z-index:1;display:block;width:100%;height:clamp(340px,50.91vw,960px);margin:-155px 0 0;padding:0;background:none;pointer-events:none;overflow:hidden;border:0;border-radius:0;line-height:0;opacity:1;transform:none}
.layout-simple .hero-scene img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;border:0;border-radius:0;mask-image:linear-gradient(to bottom,transparent 0%,#0003 16%,#000b 32%,#000 47%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#0003 16%,#000b 32%,#000 47%)}
.layout-simple .hero .hero-cta,.layout-simple .hero .hero-cta:hover,.layout-simple .hero .hero-cta:active{transform:none!important;animation:none!important;transition:background-color 180ms ease,border-color 180ms ease}
@media(max-width:760px){
 .layout-simple .hero #explorer-detail.hero-scene{height:clamp(300px,65vw,500px);margin-top:-95px}
 .layout-simple .hero-scene img{object-position:62% top}
}
/* Consistent black headings and shared feature containers. */
.layout-simple main h2 span{color:#000!important}
.layout-simple .wrap.strengths,.layout-simple #demo>.wrap{padding:clamp(24px,4.5vw,58px);background:#f7f7f7;border:.35px solid #666;border-radius:36px}
.layout-simple .strengths .library-facts{background:#fff;border-color:#e3e3e3;max-width:900px}
.layout-simple #demo .head{max-width:100%;margin:0 auto 38px}
.layout-simple .video-placeholder{width:100%;max-width:1000px;aspect-ratio:16/9;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#ededed;border:1px solid #d8d8d8;border-radius:20px;color:#777;font:400 14px/1.5 var(--sans)}
.layout-simple .video-placeholder svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
/* Compact extra capabilities share one row on desktop. */
.layout-simple .extras-all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1000px;margin:0 auto}
.layout-simple .extra-card{padding:28px;background:#f7f7f7;border:.35px solid #666;border-radius:30px;min-width:0;overflow:hidden}
.layout-simple .extra-card h3{font:600 clamp(20px,2vw,24px)/1.25 var(--sans);letter-spacing:-.035em;color:#000;text-align:left;margin:0 0 20px}
.layout-simple .extra-visual{width:100%;max-width:700px;min-height:0;display:flex;align-items:center;margin:0 auto}
.layout-simple #more-features .extra-card .else-view{position:relative;inset:auto;display:flex;align-items:center;width:100%;opacity:1;visibility:visible;transform:none;transition:none}
.layout-simple #more-features .extra-card .else-view .win{width:100%;margin:0;background:#fff}
.layout-simple .extra-card>.proportional-frame{width:100%;max-width:700px;margin:0 auto}
.layout-simple .extra-card .is-scaled .extra-visual{min-height:0;height:200px}
@media(max-width:900px){.layout-simple .extras-all{grid-template-columns:minmax(0,1fr);gap:18px}}
/* Retain sideways travel; gently dissolve the track's viewport edges. */
.layout-simple #tour.has-soft-edges .tour-track{padding:0 64px 6px;scroll-padding:0 64px;mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.layout-simple #tour.has-soft-edges .tour-panel{transition:opacity 320ms ease;opacity:1;transform:none}
@media(max-width:760px){
 .layout-simple .wrap.strengths,.layout-simple #demo>.wrap{padding:30px 18px 18px;border-radius:25px;width:calc(100% - 32px)}
 .layout-simple .extra-card{padding:28px 18px 18px;border-radius:25px}
 .layout-simple .extra-card h3{margin-bottom:24px}
 .layout-simple #tour.has-soft-edges .tour-track{padding-left:28px;padding-right:28px;scroll-padding:0 28px;mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
}
/* Hover experiment: a local 60px reveal of keycap depth, confined to the hero keys. */
.layout-simple :is(#hero-keys,#final-keys) .key{position:relative;isolation:isolate;overflow:visible}
.layout-simple :is(#hero-keys,#final-keys) .key::before{content:none}
.layout-simple :is(#hero-keys,#final-keys) .key>small,.layout-simple :is(#hero-keys,#final-keys) .key>b{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.layout-simple #tour.has-soft-edges .tour-panel{transition:none}}
.layout-simple .wrap.strengths,.layout-simple #demo>.wrap,.layout-simple .extras-all{max-width:1160px}
/* Real product footage shares the same frame as the rest of the feature sections. */
.layout-simple #voice>.wrap{max-width:1160px;padding:clamp(24px,4.5vw,58px);background:#f7f7f7;border:.35px solid #666;border-radius:36px}
.layout-simple #voice .head{margin:0 auto 38px;max-width:100%}
.layout-simple .product-video{display:block;width:100%;max-width:1000px;height:auto;aspect-ratio:3456/2166;object-fit:contain;margin:0 auto;background:#111;border:1px solid #ddd;border-radius:20px;overflow:hidden}
.layout-simple .voice-privacy{max-width:1000px;margin:28px auto 0;padding:28px;background:#fff;border:1px solid #e3e3e3;border-radius:18px;text-align:left}
.layout-simple .voice-privacy h3{font:600 22px/1.3 var(--sans);color:#000;margin:0}
.layout-simple .voice-privacy>p{font:400 15px/1.6 var(--sans);color:#666;margin:10px 0 0}
.layout-simple .generated-files{padding:20px 0 0;max-width:100%;border:0;background:none}
.layout-simple .generated-files .sect{margin-bottom:8px;color:#777}
.layout-simple .generated-files .vline{padding:10px 0;color:#555}
.layout-simple .generated-files .vline.on{background:none;color:#000}
.layout-simple .generated-files .vline i{background:#4d91ff}
.layout-simple .repository-surface{padding:clamp(24px,4.5vw,58px);background:#f7f7f7;border:.35px solid #666;border-radius:36px}
.layout-simple .repository-surface .head{max-width:900px;margin:0 auto 38px}
.layout-simple .repository-surface .lede{margin:20px auto 0;color:#666;font-size:16px}
.layout-simple .repositories-image{display:block;width:100%;height:auto;max-width:1000px;margin:0 auto;border-radius:20px}
/* The genuine editor icons and one clear handoff per editor. */
.layout-simple .editor-handoffs{width:100%;max-width:1000px;margin:0 auto;display:grid;gap:0}
.layout-simple .editor-handoff{display:flex;align-items:center;gap:18px;padding:22px 0;text-decoration:none;border-bottom:1px solid #ddd;color:#000;min-width:0}
.layout-simple .editor-handoff:last-child{border-bottom:0}
.layout-simple .editor-handoff>img{display:block;width:44px;height:44px;flex:none;object-fit:contain;border-radius:10px}
.layout-simple .editor-handoff>span{display:grid;gap:5px;min-width:0;flex:1}
.layout-simple .editor-handoff b{font:600 17px/1.4 var(--sans)}
.layout-simple .editor-handoff small{font:400 14px/1.5 var(--sans);color:#666}
.layout-simple .editor-handoff>svg{fill:none;stroke:#777;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform 200ms ease,color 200ms ease}
.layout-simple .editor-handoff:hover>svg{transform:translateX(3px);stroke:#000}
.layout-simple .editor-handoff:focus-visible{outline:2px solid #2468d9;outline-offset:5px;border-radius:4px}
/* Full-width slide viewport: a long, eased feather blends only the outer previews. */
.layout-simple #tour.has-soft-edges .tour-track{width:100vw;margin:0 calc((100vw - 100%)/-2);padding:0 max(24px,calc((100vw - min(84vw,1000px))/2)) 6px;scroll-padding:0 max(24px,calc((100vw - min(84vw,1000px))/2));--tour-feather:clamp(32px,9vw,180px);mask-image:linear-gradient(to right,transparent 0%,#0001 1.5%,#0003 3%,#0008 5%,#000d 7%,#000 9%,#000 91%,#000d 93%,#0008 95%,#0003 97%,#0001 98.5%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#0001 1.5%,#0003 3%,#0008 5%,#000d 7%,#000 9%,#000 91%,#000d 93%,#0008 95%,#0003 97%,#0001 98.5%,transparent 100%)}
.layout-simple #tour.has-soft-edges .tour-panel{flex:0 0 min(84vw,1000px);width:min(84vw,1000px)}
@media(max-width:760px){.layout-simple #voice>.wrap{width:calc(100% - 32px);padding:30px 18px 18px;border-radius:25px}.layout-simple .repository-surface{padding:30px 18px 18px;border-radius:25px}.layout-simple .voice-privacy{padding:22px}.layout-simple .editor-handoff{gap:14px;padding:20px 0}.layout-simple .editor-handoff>img{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.layout-simple .editor-handoff>svg{transition:none;transform:none}}

/* Real app windows: clip the exported margin and its baked-in shadow. */
.layout-simple .app-window-crop{position:relative;width:100%;max-width:1000px;aspect-ratio:744/492;overflow:hidden;border-radius:14px;margin:0 auto;background:#151515}
.layout-simple .app-window-crop>img{position:absolute;display:block;width:107.5269%;max-width:none;height:auto;left:-3.7634%;top:-3.8618%;margin:0;border-radius:0}
.layout-simple .strengths{gap:32px}
.layout-simple #strengths-title{max-width:none;white-space:nowrap;font-size:clamp(25px,3.5vw,48px)}
.layout-simple #strengths-title span{display:inline}
.layout-simple .strengths .library-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1000px;padding:0;background:none;border:0;border-radius:0}
.layout-simple .strengths .library-facts li{display:flex;flex-direction:column;gap:14px;padding:22px 18px;border:1px solid #e3e3e3;border-radius:18px;background:#fff}
.layout-simple .strengths .library-facts h3{font-size:16px}
.layout-simple .strengths .library-facts p{font-size:14px}
/* Compatible editors rise from behind the physical shortcut. */
.layout-simple :is(#hero-keys,#final-keys){width:max-content;max-width:100%;isolation:isolate}
.layout-simple :is(#hero-keys,#final-keys) .key,.layout-simple :is(#hero-keys,#final-keys) .plus{z-index:2}
.layout-simple .shortcut-apps{position:absolute;display:flex;gap:13px;bottom:12px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:1}
.layout-simple .shortcut-apps img{width:44px;height:44px;object-fit:contain;opacity:0;transform:translateY(0) scale(.65) rotate(0);transition:opacity 180ms ease,transform 300ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){
 .layout-simple :is(#hero-keys,#final-keys).is-previewing .shortcut-apps img{opacity:1;transform:translateY(-72px) scale(1) rotate(var(--app-angle));animation:shortcut-app-rise 680ms both;animation-delay:calc(var(--app-index)*35ms)}
}
@keyframes shortcut-app-rise{0%{opacity:0;transform:translateY(0) scale(.65) rotate(0)}60%{opacity:1;transform:translateY(-80px) scale(1.03) rotate(var(--app-angle))}80%{transform:translateY(-69px) scale(.99) rotate(var(--app-angle))}100%{opacity:1;transform:translateY(-72px) scale(1) rotate(var(--app-angle))}}
@media(max-width:760px){
 .layout-simple .strengths .library-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .layout-simple .strengths .library-facts li{padding:18px 14px}
 .layout-simple #strengths-title{font-size:clamp(20px,4.9vw,36px);letter-spacing:-.04em}
 .layout-simple .app-window-crop{border-radius:8px}
 .layout-simple .shortcut-apps{gap:8px}.layout-simple .shortcut-apps img{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.layout-simple :is(#hero-keys,#final-keys).is-previewing .shortcut-apps img{animation:none;transition:none;opacity:1;transform:translateY(-72px) rotate(var(--app-angle))}}
/* Photographic keycaps use only material shading; no cast or CSS shadows. */
.layout-simple :is(#hero-keys,#final-keys){margin-top:100px}
.layout-simple :is(#hero-keys,#final-keys) .key::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:0;border-radius:inherit;background-image:url('/assets/shortcut-physical-keycaps.webp');background-repeat:no-repeat;opacity:var(--key-depth,0);mask-image:radial-gradient(circle 60px at var(--key-mx,-100px) var(--key-my,-100px),#000 20%,transparent);-webkit-mask-image:radial-gradient(circle 60px at var(--key-mx,-100px) var(--key-my,-100px),#000 20%,transparent);transition:opacity 320ms ease;box-shadow:none!important}
.layout-simple :is(#hero-keys,#final-keys) .key-opt::before{background-size:497% 183%;background-position:1.2% 48%}
.layout-simple :is(#hero-keys,#final-keys) .key-space::before{background-size:129.6% 183%;background-position:98.5% 48%}
.layout-simple :is(#hero-keys,#final-keys) .key>small,.layout-simple :is(#hero-keys,#final-keys) .key>b{transition:opacity 250ms ease}
@media(hover:hover) and (pointer:fine){.layout-simple :is(#hero-keys,#final-keys).is-previewing .key::before{opacity:1;mask-image:none;-webkit-mask-image:none}.layout-simple :is(#hero-keys,#final-keys).is-previewing .key>small,.layout-simple :is(#hero-keys,#final-keys).is-previewing .key>b{opacity:1}}
@media(prefers-reduced-motion:reduce){.layout-simple :is(#hero-keys,#final-keys) .key::before,.layout-simple :is(#hero-keys,#final-keys) .key>small,.layout-simple :is(#hero-keys,#final-keys) .key>b{transition:none}}

/* Keep a single set of labels over both flat and physical key surfaces. */
.layout-simple :is(#hero-keys,#final-keys) .key{background:transparent;border-color:transparent}
.layout-simple :is(#hero-keys,#final-keys) .key::after{content:"";inset:0;z-index:-1;background:linear-gradient(#fff,#f7f7f7);border:1px solid #e3e3e3;opacity:1;transition:opacity 320ms ease}
.layout-simple :is(#hero-keys,#final-keys) .key>small,.layout-simple :is(#hero-keys,#final-keys) .key>b{z-index:4;opacity:1}
.layout-simple :is(#hero-keys,#final-keys) .key::before{background-image:url('/assets/shortcut-physical-keycaps.webp')}
.layout-simple :is(#hero-keys,#final-keys) .shortcut-apps{left:0;right:0;width:100%;transform:none;justify-content:space-between;gap:0}
.layout-simple :is(#hero-keys,#final-keys) .shortcut-apps img{width:55px;height:55px;flex:0 0 55px}
@media(hover:hover) and (pointer:fine){.layout-simple :is(#hero-keys,#final-keys).is-previewing .key::after{opacity:0}.layout-simple :is(#hero-keys,#final-keys).is-previewing .key.is-down::after{opacity:0}}
@media(max-width:760px){.layout-simple :is(#hero-keys,#final-keys) .shortcut-apps img{width:47.5px;height:47.5px;flex-basis:47.5px}}
@media(prefers-reduced-motion:reduce){.layout-simple :is(#hero-keys,#final-keys) .key::after{transition:none}}

/* Match both material states to the exact same outer key dimensions. */
.layout-simple :is(#hero-keys,#final-keys) .key::before{inset:-1px;background-size:509.8592% 185.641%;background-position:1.5464% 47.6048%}
.layout-simple :is(#hero-keys,#final-keys) .key-space::before{background-size:129.517% 185.641%;background-position:94.9495% 47.6048%}
/* Interruptible transitions reverse from the current position, including fast exits. */
.layout-simple :is(#hero-keys,#final-keys) .shortcut-apps img{animation:none;transition:transform 540ms cubic-bezier(.22,1,.36,1),opacity 380ms cubic-bezier(.25,0,.5,1);transition-delay:0ms;will-change:transform,opacity}
@media(hover:hover) and (pointer:fine){
 .layout-simple :is(#hero-keys,#final-keys).is-previewing .shortcut-apps img{animation:none;transform:translateY(-72px) scale(1) rotate(var(--app-angle));transition:transform 680ms cubic-bezier(.22,1.22,.36,1),opacity 260ms ease;transition-delay:calc(var(--app-index)*25ms)}
}
@media(prefers-reduced-motion:reduce){.layout-simple :is(#hero-keys,#final-keys) .shortcut-apps img,.layout-simple :is(#hero-keys,#final-keys).is-previewing .shortcut-apps img{transition:none;animation:none}}
/* Center the shared label in both key material states. */
.layout-simple :is(#hero-keys,#final-keys) .key-space{align-items:center;justify-content:center}
/* A separate white surface for each compatible editor. */
.layout-simple .editor-handoffs{gap:12px}
.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{padding:22px 24px;background:#fff;border:1px solid #e3e3e3;border-radius:18px}
/* Quiet separators make the generated filenames easy to scan. */
.layout-simple .generated-files .sect{padding-left:0;padding-right:0}
.layout-simple .generated-files .vline{padding:14px 0;border-radius:0}
.layout-simple .generated-files .vline+.vline{border-top:1px solid #e8e8e8}
.layout-simple .generated-files .vline i{display:none}
@media(max-width:760px){.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{padding:18px 16px}}
/* Five upright editor cards, following the supplied horizontal reference. */
.layout-simple .editor-handoffs{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{flex-direction:column;align-items:flex-start;gap:20px;padding:24px 18px;min-height:250px;border-radius:18px}
.layout-simple .editor-handoff>span{display:flex;flex-direction:column;gap:12px;flex:1;width:100%}
.layout-simple .editor-handoff b{font-size:16px;line-height:1.35}
.layout-simple .editor-handoff small{font-size:14px;line-height:1.55}
.layout-simple .editor-handoff>svg{align-self:flex-end;margin-top:4px}
@media(max-width:1000px) and (min-width:761px){.layout-simple .editor-handoffs{gap:10px}.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{padding:20px 12px}.layout-simple .editor-handoff b{font-size:14px}.layout-simple .editor-handoff small{font-size:13px}}
@media(max-width:760px){.layout-simple .editor-handoffs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px}.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{flex:0 0 200px;scroll-snap-align:start;padding:24px 20px;min-height:250px}}

/* Native sideways scrolling and comfortable controls on phones. */
.layout-simple .editor-handoffs{overscroll-behavior-x:contain;scroll-padding-inline:2px}
.layout-simple .editor-handoff{scroll-margin:10px}
.layout-simple :is(.menu-toggle,.tour-tabs button){min-height:44px}
@media(hover:none),(pointer:coarse){.layout-simple :is(#hero-keys,#final-keys){margin-top:44px}.layout-simple :is(#hero-keys,#final-keys) .key::before{content:none}}
@media(max-width:380px){.layout-simple #strengths-title{font-size:clamp(16px,4.9vw,20px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.layout-simple *, .layout-simple *::before,.layout-simple *::after{animation:none!important;transition:none!important}}

/* The shortcut is one accessible button on mouse, touch and keyboard. */
.layout-simple button:is(#hero-keys,#final-keys){padding:0;background:none;border:0;appearance:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;border-radius:14px;overflow:visible}
.layout-simple button:is(#hero-keys,#final-keys):focus-visible{outline:2px solid #fff;outline-offset:12px}
.layout-simple :is(#hero-keys,#final-keys).is-previewing .shortcut-apps img{opacity:1;animation:none;transform:translateY(-72px) scale(1) rotate(var(--app-angle));transition:transform 680ms cubic-bezier(.22,1.22,.36,1),opacity 260ms ease;transition-delay:calc(var(--app-index)*25ms)}
.layout-simple :is(#hero-keys,#final-keys).is-previewing .key::before{content:"";opacity:1;mask-image:none;-webkit-mask-image:none}
.layout-simple :is(#hero-keys,#final-keys).is-previewing .key::after,.layout-simple :is(#hero-keys,#final-keys).is-previewing .key.is-down::after{opacity:0}
@media(max-width:760px){.layout-simple .hero #explorer-detail.hero-scene{margin-top:16px}.layout-simple .hero-hint{margin-bottom:0;min-height:2em;line-height:1.6}.layout-simple :is(#hero-keys,#final-keys){margin-top:104px}}
@media(prefers-reduced-motion:reduce){.layout-simple :is(#hero-keys,#final-keys).is-previewing .shortcut-apps img{transition:none;animation:none}}

@media(max-width:900px),(pointer:coarse){.layout-simple .hero #explorer-detail.hero-scene{margin-top:16px}.layout-simple .hero-hint{margin-bottom:0;min-height:2em;line-height:1.6}}

/* Keep the supplementary section close to the surrounding content. */
.layout-simple #more-features{padding:48px 0}
.layout-simple #more-features .more-features-head{margin-bottom:28px}

/* Organization previews are drawn at card scale so their labels remain visible. */
.layout-simple #organize .is-scaled .vis{height:320px;min-height:320px;padding:20px;color:#222}
.layout-simple #organize .vis :is(.row,.src,.task-l,.sort-file){font-size:17px;color:#222}
.layout-simple #organize .vis :is(.meta,.rank-number,.pool-h span,.sort-status,.pair-match){font-size:14px;color:#555}
.layout-simple #organize .vis .sort-origin{font-size:14px;color:#555}
.layout-simple #organize .vis .sort-flight{width:240px}
.layout-simple #organize .vis .sort-tags{font-size:13px;color:#205fbe}
.layout-simple #organize .vis .pools{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.layout-simple #organize .vis .pool:nth-child(3){display:none}
.layout-simple #organize .vis .pool{padding:12px}
.layout-simple #organize .vis .pool-h{font-size:17px}
.layout-simple #organize .vis .pool .row{padding:8px 6px;gap:6px;font-size:15px}
.layout-simple #organize .vis .pool .row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout-simple #organize .vis .tagrow span{font-size:13px}
.layout-simple #organize .vis .similar .ranked-row{grid-template-columns:24px minmax(0,1fr) 70px 40px;gap:10px;font-size:16px;animation:none;opacity:1}
.layout-simple #organize .vis .similar .src{font-size:17px}
.layout-simple #organize .vis .pair{padding:12px}
.layout-simple #organize .vis .pair .row{grid-template-columns:minmax(0,1fr) 65px auto;gap:10px;font-size:15px;padding:12px 8px}
.layout-simple #organize .vis .pair .w{width:65px}
.layout-simple #organize .vis .pair-act span{font-size:13px;padding:7px 9px}
.layout-simple #organize .vis .task{padding:20px 16px}
.layout-simple #organize .vis .task-l>span{min-width:90px;font-size:14px}
.layout-simple #organize .vis .w{color:#2468d9;opacity:1}
.layout-simple .file .doc{width:64px;min-width:64px;flex-shrink:0;font-size:11px;letter-spacing:-.04em}

.layout-simple #organize .vis .sort-flight{animation-name:sort-to-visible-pool}
@keyframes sort-to-visible-pool{0%,15%{top:34px;left:50%;opacity:1;transform:translateX(-50%)}45%,75%{top:135px;left:25%;opacity:1;transform:translateX(-50%) scale(.92)}90%,100%{top:135px;left:25%;opacity:0;transform:translateX(-50%) scale(.92)}}
.layout-simple .tour-track:focus-visible{outline:2px solid #2468d9;outline-offset:4px}

/* Compact surfaces and consistent typography. */
.layout-simple #organize .cell h3 svg{width:25px;height:25px;min-width:25px;stroke-width:1.5}
.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{min-height:200px;padding:20px 16px;gap:12px}
.layout-simple .editor-handoff>span{gap:8px}
.layout-simple .editor-handoff>svg{margin-top:0}
.layout-simple .faq-group h3{font:600 14px/1.4 var(--sans);letter-spacing:.01em;text-transform:none;color:#555;margin-bottom:14px}
.layout-simple .faq summary{font:500 16px/1.5 var(--sans)}
.layout-simple .footer-wordmark{font-size:clamp(36px,12vw,240px);letter-spacing:0;font-kerning:none;font-feature-settings:"kern" 0;line-height:1.1}
.layout-simple button#final-keys{margin:90px auto 32px;color:#555}
.layout-simple button#final-keys:focus-visible{outline-color:#2468d9}
.layout-simple #final-keys .plus{color:#777}
.layout-simple #beta-submit{position:relative;isolation:isolate;overflow:hidden;transition:background-color 220ms ease,transform 200ms ease}
.layout-simple #beta-submit::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2468d9,#68b6ff);transform:scaleX(0);transform-origin:left;z-index:-1;transition:transform 500ms cubic-bezier(.22,1,.36,1)}
.layout-simple #beta-submit:hover::before{transform:scaleX(.12)}
.layout-simple #beta-submit:active{transform:scale(.985)}
.layout-simple #beta-submit[data-state=sending]::before{animation:beta-charge 1100ms cubic-bezier(.22,1,.36,1) infinite alternate}
.layout-simple #beta-submit[data-state=sending] .arrow{animation:beta-send 900ms ease-in-out infinite}
.layout-simple #beta-submit[data-state=sent]::before{transform:scaleX(1);background:#2468d9}
.layout-simple #beta-submit[data-state=error]{animation:beta-error 280ms ease}
.layout-simple .beta-done:not([hidden]){animation:beta-confirm 440ms cubic-bezier(.22,1,.36,1)}
@keyframes beta-charge{from{transform:scaleX(.16);opacity:.7}to{transform:scaleX(.9);opacity:1}}
@keyframes beta-send{0%,100%{transform:translateX(0);opacity:1}55%{transform:translateX(8px);opacity:.6}}
@keyframes beta-error{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes beta-confirm{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.layout-simple .editor-handoff,.layout-simple .editor-handoff:last-child{min-height:190px;padding:18px 16px}.layout-simple .faq-group h3{font-size:14px}.layout-simple button#final-keys{margin-top:90px}}
@media(prefers-reduced-motion:reduce){.layout-simple #tour .tour-panel .shot,.layout-simple #beta-submit::before{transition:none}.layout-simple #beta-submit,.layout-simple #beta-submit::before,.layout-simple #beta-submit .arrow,.layout-simple .beta-done{animation:none!important}}

.layout-simple .footer-wordmark .wordmark-initials{display:inline-flex;gap:.035em}

/* Page transitions (browser View Transitions, Safari 18.2+ and Chrome). The browser keeps the old page on
   screen until the new one is ready to draw, so the animation can never run ahead of or behind the load.
   The old page settles back slightly and stays opaque underneath while the new page fades in on top and
   rises into place: no blink, no empty frame. The navigation bar is its own layer, so it stays put and
   blends between the homepage's clear bar and the black bar of inner pages. */
@view-transition{navigation:auto}
.layout-simple .nav{view-transition-name:site-nav}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:page-leave .5s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:page-arrive .5s cubic-bezier(.22,1,.36,1) both}
@keyframes page-leave{to{transform:scale(.985);filter:brightness(.96)}}
@keyframes page-arrive{from{opacity:0;transform:translateY(16px)}}
::view-transition-group(site-nav){animation-duration:.5s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(site-nav),::view-transition-new(site-nav){animation-duration:.5s;height:100%}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* The carousel: screenshots that aren't centred get a gentle focus blur and lower opacity.
   No live backdrop blur: it re-renders on every frame and is what made Safari stutter. */
.layout-simple #tour .tour-viewport{--tour-blur-room:56px;position:relative;width:100vw;margin:calc(-1 * var(--tour-blur-room)) calc((100vw - 100%)/-2);overflow:clip;isolation:isolate}
.layout-simple #tour .tour-tabs{position:relative;z-index:3}
.layout-simple #tour.has-soft-edges .tour-viewport .tour-track{width:100%;margin:0;padding-top:var(--tour-blur-room);padding-bottom:calc(var(--tour-blur-room) + 6px);mask-image:none;-webkit-mask-image:none}
.layout-simple #tour.has-soft-edges .tour-panel{opacity:var(--tour-opacity,1);transition:none}
.layout-simple #tour .tour-panel .shot{filter:blur(0);transition:filter .7s cubic-bezier(.22,1,.36,1)}
.layout-simple #tour.has-soft-edges .tour-panel:not(.is-current) .shot{filter:blur(2.5px)}
@media(prefers-reduced-motion:reduce){.layout-simple #tour .tour-panel .shot{transition:none}}
.layout-simple .hero .lede{max-width:720px}
/* Match the canvas below the final section, including iOS rubber-band and safe-area painting. */
html:has(body.layout-simple){background:#000;overscroll-behavior-y:none}
body.layout-simple{overflow-x:clip;overscroll-behavior-y:none}
/* Safari can sample the body rather than the root for its bottom browser inset. */
body.layout-simple:has(>.footer){background:#000}
body.layout-simple:has(>.footer)>main{background:#fff;display:flow-root}
.layout-simple .footer{margin-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px);contain:paint}

/* Beta form: Mac or Windows */
.layout-simple .platform-pick{border:0;margin:0;padding:0;min-width:0;display:grid;gap:7px}
.layout-simple .platform-pick legend{padding:0;margin-bottom:7px;font-size:13.5px;font-weight:500;color:#000}
.layout-simple .seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid #e3e3e3;border-radius:12px;background:#f7f7f7}
.layout-simple .seg label{position:relative;cursor:pointer}
.layout-simple .seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.layout-simple .seg span{display:flex;align-items:center;justify-content:center;min-height:40px;border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:500;color:#666;transition:background-color .25s,color .25s}
.layout-simple .seg input:checked+span{background:#fff;color:#000;border-color:#e3e3e3}
.layout-simple .seg input:focus-visible+span{outline:2px solid #4d83d9;outline-offset:2px}
@media(max-width:760px){.layout-simple .seg span{min-height:44px}}

/* Subpage headers. The homepage hero rules above (no bottom padding, stacked call to action, very large
   headline) are made for the homepage's hero picture; subpages have no picture, so they get their own room
   and the blue fades into the page instead of ending on a hard edge. */
.layout-simple .sub-hero{padding-bottom:clamp(88px,10vw,136px);background:linear-gradient(180deg,#2046ca 0,#2386ff 40%,#72c2fb calc(100% - 150px),#fff 100%)}
.layout-simple .sub-hero h1{font-size:clamp(46px,6.4vw,96px)}
.layout-simple .sub-hero .lede{max-width:680px}
.layout-simple .sub-hero .mono{color:rgba(0,0,0,.55);margin-top:22px}
@media(max-width:760px){.layout-simple .sub-hero{padding-top:118px;padding-bottom:72px}.layout-simple .sub-hero h1{font-size:clamp(38px,11vw,50px)}}
/* Two buttons side by side; the homepage's single button with a text link stays stacked. */
.layout-simple .hero-actions:has(> .btn + .btn){flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.layout-simple .hero-actions:has(> .btn + .btn) .btn{height:52px;padding:0 24px;border-radius:15px;font-size:15px}
.layout-simple .hero .btn-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.62);color:#fff}
.layout-simple .hero .btn-ghost:hover{background:rgba(255,255,255,.26);border-color:#fff}
@media(max-width:760px){.layout-simple .hero-actions:has(> .btn + .btn) .btn{height:46px;padding:0 18px;font-size:14px}}
/* Official app icons in the subpage badge */
.layout-simple .hero .badge{display:inline-flex;align-items:center;gap:8px}
.layout-simple .badge img{width:20px;height:20px;padding:0;background:none;border-radius:0}

/* Contact page: the private message card uses the beta card's materials. */
.layout-simple .contact-section{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(72px,9vw,120px)}
.layout-simple .contact-card{max-width:720px;margin:0 auto;padding:clamp(22px,4vw,40px)}
.layout-simple .contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.layout-simple .contact-form .field label .optional{font-weight:400;color:#666;margin-left:6px}
.layout-simple .contact-form textarea{width:100%;min-height:170px;padding:13px 14px;border-radius:10px;border:1px solid #e3e3e3;background:#f7f7f7;color:#000;font:400 15px/1.55 var(--sans);resize:vertical}
.layout-simple .contact-form :is(select,textarea):focus-visible{outline:2px solid #4d83d9;outline-offset:2px}
.layout-simple .contact-form textarea[aria-invalid="true"]{border-color:#ae3039}
.layout-simple .contact-form .btn{justify-self:start;width:auto;padding:0 26px}
.layout-simple .contact-form .hint a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.layout-simple .contact-sent{margin:0;padding:28px 8px;text-align:center;font-size:18px;font-weight:500;color:#000;outline:none}
@media(max-width:760px){.layout-simple .contact-row{grid-template-columns:1fr}.layout-simple .contact-form .btn{width:100%;justify-self:stretch}}
.layout-simple .contact-form input[type=text]{background:#f7f7f7;color:#000;border-color:#e3e3e3}
.layout-simple .contact-form input:focus-visible{outline:2px solid #4d83d9;outline-offset:2px}