:root{--paper:#f7f6f2;--ink:#302a26;--muted:#716860;--line:#e1d9d1;--accent:#955438;--serif:Georgia,'Times New Roman',serif;--wordmark:'Instrument Sans','Helvetica Neue',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
::selection{background:#dde4d4}
.wrap{width:min(1080px,calc(100% - 112px));margin-inline:auto}
.page-rule{position:absolute;top:0;left:calc(50% + 578px);height:100%;min-height:4500px;width:1px;background:var(--line);pointer-events:none}
.header{height:108px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--wordmark);font-size:23px;font-weight:600;letter-spacing:-.5px}
.brand-icon{width:30px;height:30px;object-fit:contain;border-radius:7px;display:inline-block;vertical-align:middle;box-shadow:0 2px 6px rgba(0,0,0,0.12)}
.footer-brand-icon{width:22px;height:22px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.cta-app-icon{width:72px;height:72px;object-fit:contain;border-radius:16px;display:block;margin:0 auto 25px;box-shadow:0 12px 28px rgba(45,57,49,0.18),0 2px 6px rgba(0,0,0,0.08)}
.rail-app-icon{width:22px;height:22px;object-fit:contain;border-radius:5px;display:block;margin:0 auto}
.mark{width:25px;height:28px;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;border-left:2px solid currentColor;padding-left:7px}
.mark i{width:14px;height:1.5px;background:currentColor}
.mark i:last-child{width:9px}
nav{display:flex;align-items:center;gap:30px;font-size:13px}
nav>a{color:var(--muted)}
.small-download{background:transparent;border:1px solid #d6d8ce;border-radius:7px;padding:8px 15px;font-size:13px;display:inline-flex;align-items:center;color:inherit;transition:background .2s,transform .2s}
.small-download:hover{background:rgba(0,0,0,0.04);transform:translateY(-1px)}
.small-download span{margin-left:12px}
.hero{text-align:center;padding-top:65px}
.eyebrow{font-size:11px;letter-spacing:1.9px;color:var(--accent);font-weight:600}
h1,h2,h3,p{margin:0}
h1{font-family:var(--serif);font-size:clamp(44px,5.5vw,72px);font-weight:400;line-height:1.09;letter-spacing:-3.3px;margin:23px 0}
h2{font-family:var(--serif);font-size:45px;line-height:1.16;letter-spacing:-1.65px;font-weight:400}
h2 em{font-weight:400}
.hero-copy{font-size:16px;color:var(--muted);line-height:1.8}
.button{display:inline-flex;gap:14px;align-items:center;justify-content:center;border:1px solid #303a2d;background:#3f4c39;color:#fff;border-radius:7px;padding:12px 22px;font-size:14px;font-weight:500;box-shadow:0 2px 3px #202a2010,inset 0 1px #ffffff18;transition:background .2s,transform .2s}
.button:hover{background:#303d2b;transform:translateY(-1px)}
.hero>.button{margin-top:27px}
.meta{font-size:11px;color:var(--muted);margin-top:12px;letter-spacing:.3px}
.meta span{padding:0 7px}
.hero-product{position:relative;max-width:730px;margin:62px auto 0;text-align:left;animation:settle 1s cubic-bezier(.2,.7,.2,1) both}
.app-window{border:1px solid #d6d8ce;border-radius:12px;background:#fcfcf9;box-shadow:0 30px 55px -30px #3c443651,0 6px 16px -8px #34382e25;overflow:hidden}
.window-top{height:43px;border-bottom:1px solid #e8e8e0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:12px;color:#787c73;background:#f6f6f0}
.traffic{display:flex;gap:6px}
.traffic i{width:9px;height:9px;border-radius:50%;background:#e8b4a9;border:1px solid #00000007}
.traffic i:nth-child(2){background:#e8d198}
.traffic i:nth-child(3){background:#bacbaa}
.window-action{font-size:17px}
.window-body{display:flex;min-height:325px}
.app-sidebar{width:155px;flex-shrink:0;border-right:1px solid #e5e6dd;background:#eeefe7;padding:22px 10px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:#666e5f}
.app-sidebar>span{padding:7px 10px;border-radius:5px}
.sidebar-active{background:#dfe4d7;color:#394431}
.app-sidebar b{float:right;font-size:10px;font-weight:400}
.app-sidebar small{font-family:var(--serif);font-style:italic;font-size:13px;margin:auto 10px 0;color:#858c7c}
.editor{flex:1;min-width:0;display:flex;flex-direction:column;padding:21px 30px 12px}
.editor-top{font-size:9px;letter-spacing:1.2px;color:#7b8075;display:flex;justify-content:space-between}
.editor-content{padding:30px 0 22px}
.editor-content>small{font-size:8px;letter-spacing:1.1px;color:#92988b}
.editor h3{font-family:var(--serif);font-size:26px;letter-spacing:-.6px;font-weight:400;margin:8px 0 14px}
.editor p{font-size:13px;line-height:1.85;color:#656b5f}
.note-check{font-size:12px;color:#6c7364;line-height:2;margin-top:20px}
.editor .last-thought{margin-top:20px;color:#454f3d}
.cursor{display:inline-block;width:1px;height:1.1em;background:#748466;vertical-align:-2px;margin-left:3px;animation:blink 1.2s step-end 4}
.editor-bottom{margin-top:auto;display:flex;justify-content:space-between;font-size:9px;color:#8c9284}
.margin-note{position:absolute;font-size:11px;line-height:1.8;color:#858b7c;text-align:left;letter-spacing:.2px}
.shortcut{right:-175px;top:130px;width:130px}
.shortcut span{display:block;font-size:17px;color:#626e55;letter-spacing:5px;margin-bottom:5px}
.hand-note{position:absolute;left:-153px;top:205px;font-family:var(--serif);font-size:15px;font-style:italic;color:#8a8f80;transform:rotate(-7deg);line-height:1.4}
.hand-note span{display:block;text-align:right;font-size:32px;margin-right:10px;transform:rotate(75deg)}
.caption{font-size:11px;color:#83887b;margin-top:30px}
.section{padding-top:145px}
.section-heading{display:flex;gap:70px;align-items:flex-end;justify-content:space-between;margin-bottom:46px}
.section-heading h2{margin-top:18px}
.section-heading>p{max-width:295px;color:var(--muted);font-size:15px;padding-bottom:4px}
.desktop-scene{height:480px;background:#dce2d3;border:1px solid #d0d7c5;border-radius:12px;overflow:hidden;position:relative}
.menubar{height:26px;padding:0 16px;display:flex;justify-content:space-between;background:#edf0e6a8;font-size:9px;color:#56614e;align-items:center}
.document-window{position:absolute;top:70px;left:80px;width:560px;height:380px;border:1px solid #d5d9cf;background:#fafbf6;box-shadow:0 12px 30px #53614a18;border-radius:7px;overflow:hidden}
.document-window>.traffic{padding:12px;background:#f1f3ec;border-bottom:1px solid #e6e8de}
.document-content{padding:35px 55px}
.document-content small{font-size:8px;letter-spacing:2px;color:#919783}
.document-content h3{font-family:var(--serif);font-size:34px;line-height:1.15;font-weight:400;margin:13px 0 18px}
.document-content p{font-size:11px;color:#8d9385;width:250px}
.fake-lines{height:44px;width:95%;background:repeating-linear-gradient(transparent 0,transparent 10px,#dce0d3 10px,#dce0d3 11px);margin-top:15px}
.fake-lines.short{width:70%;margin-top:0}
.edge-panel{position:absolute;right:12px;top:62px;width:298px;transition:transform 1s,opacity 1s}
.edge-panel:not(.visible){transform:translateX(20px)}
.edge .window-body{min-height:310px}
.edge .editor{padding:18px 22px}
.edge .editor-content{padding-top:25px}
.edge .editor h3{font-size:25px}
.edge .editor-content>small{display:none}
.edge .editor p{font-size:12px}
.dock{position:absolute;bottom:12px;left:40%;display:flex;gap:9px;background:#f9faf480;padding:7px;border-radius:13px;border:1px solid #ffffff80}
.dock b{display:grid;place-items:center;width:28px;height:29px;background:#f6f7ed;border-radius:7px;font-size:15px;color:#7a8970;font-weight:400}
.scene-caption{display:flex;justify-content:space-between;font-size:11px;color:#858b7b;margin-top:15px}
kbd{font:inherit;border:1px solid #dfe1d7;border-radius:3px;padding:2px 5px;margin-left:3px}
.scratch-section{display:grid;grid-template-columns:1fr 1.25fr;gap:95px;align-items:center}
.scratch-copy h2{margin:18px 0 34px}
.quality{margin:23px 0}
.quality h3{font-size:14px;font-weight:550}
.quality p{font-size:13px;color:var(--muted);margin-top:5px;max-width:280px}
.scratch-visual{position:relative;padding:35px 0}
.scratch-visual:before{content:'';position:absolute;inset:0 -26px;background:#eeeee7;border-radius:50% 48% 44% 50%;z-index:-1}
.scratch .window-body{min-height:410px}
.scratch .editor{padding:24px 38px 16px}
.scratch .editor-content{padding:34px 0}
.scratch .editor h3{font-size:31px;margin-bottom:22px}
.scratch .editor p{font-family:var(--serif);font-size:17px;line-height:1.8;margin-bottom:20px}
.scratch-annotation{display:block;text-align:center;font-family:var(--serif);font-style:italic;font-size:13px;color:#8b917f;margin-top:26px}
.digital h2{margin:18px 0 45px}
.capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.capabilities article>h3{font-size:15px;font-weight:550;margin:22px 0 8px}
.capabilities article>p{font-size:13px;line-height:1.7;color:var(--muted);max-width:205px}
.mini-ui{height:175px;border:1px solid #dfe2d5;border-radius:7px;padding:18px;background:#f2f3eb;overflow:hidden;position:relative}
.mini-ui small{font-size:8px;letter-spacing:1.2px;color:#7d8772}
.note-ui p{font-family:var(--serif);font-size:22px;line-height:1.4;margin-top:16px;letter-spacing:-.5px}
.mini-meta{font-size:9px;color:#8c9580;display:block;margin-top:15px}
.inbox-ui{padding-inline:15px}
.inbox-ui small{display:flex;justify-content:space-between;margin-bottom:14px}
.inbox-ui>div{font-size:9px;padding:10px 0;border-bottom:1px solid #e1e5d8;white-space:nowrap}
.inbox-ui i{display:inline-block;width:7px;height:7px;border:1px solid #a4ae95;border-radius:50%;margin-right:5px}
.inbox-ui>div span{float:right}
.ai-ui .question{font-size:9px;text-align:right;background:#e5e9dc;padding:7px;border-radius:6px;margin-top:14px}
.ai-ui .answer{font-size:12px;font-family:var(--serif);line-height:1.6;margin-top:13px}
.ai-ui .mini-meta{margin-top:9px}
.nearby-ui{background:#dfe5d7}
.nearby-paper{position:absolute;width:160px;height:150px;background:#f8f9f3;top:30px;left:-40px;border-radius:4px;box-shadow:0 4px 9px #48553f10}
.nearby-panel{position:absolute;right:-7px;top:20px;width:98px;height:119px;background:#f7f8f0;border:1px solid #cbd3c1;border-radius:5px;padding:12px;color:#7c8a6e;box-shadow:-5px 3px 10px #45503913}
.nearby-panel .mark{transform:scale(.5);transform-origin:top left}
.nearby-panel .fake-lines{margin-top:-5px}
.key-combo{position:absolute;bottom:13px;left:30px;font-size:12px;color:#707f62}
.philosophy{margin-top:140px;padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;position:relative}
.philosophy>p{font-family:var(--serif);font-size:44px;letter-spacing:-1.6px;line-height:1.35;margin-top:25px}
.philosophy>p>span{color:#78856a}
.philosophy .margin-note{right:-125px;top:180px;font-family:var(--serif);font-style:italic}
.final-cta{text-align:center;padding:100px 0}
.app-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:15px;margin:0 auto 25px;border:1px solid #d3d8c8;background:#eef1e7;box-shadow:0 6px 12px #34412b09,inset 0 1px #fff;color:#536447}
.app-icon .mark{height:31px;width:30px}
.app-icon .mark i{width:18px}
.final-cta h2{font-size:42px;margin-bottom:28px}
footer{display:flex;gap:40px;align-items:center;padding:28px 0 35px;border-top:1px solid var(--line);font-size:11px;color:#84897b}
footer .brand{font-size:17px;color:var(--ink)}
footer>div{display:flex;gap:23px;align-items:center}
footer button{border:0;background:none;padding:5px 0;font-size:11px;color:inherit}
footer>p{margin-left:auto}
dialog{max-width:440px;width:calc(100% - 40px);border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:38px;box-shadow:0 25px 100px #202a2025}
dialog::backdrop{background:#252b234d;backdrop-filter:blur(4px)}
dialog h2{font-size:32px;margin:20px 0}
dialog p{font-size:15px;color:var(--muted)}
dialog .button{margin-top:25px}
.dialog-close{position:absolute;top:10px;right:15px;border:0;background:none;font-size:24px}
.skip{position:fixed;top:10px;left:10px;background:var(--ink);color:white;padding:10px;z-index:99;transform:translateY(-150%)}
.skip:focus{transform:translateY(0)}
@keyframes settle{from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes blink{50%{opacity:0}
}
@media(min-width:1500px){.page-rule{left:calc(50% + 590px)}
}
@media(max-width:1250px){.page-rule{left:auto;right:25px}
.hand-note,.shortcut,.philosophy .margin-note{display:none}
}
@media(max-width:900px){.wrap{width:calc(100% - 70px)}
h1{font-size:58px}
.section-heading{gap:35px}
h2{font-size:36px}
.section-heading>p{max-width:230px;font-size:14px}
.document-window{left:30px;width:460px}
.edge-panel{width:270px}
.scratch-section{gap:40px}
.scratch .editor{padding-inline:24px}
.scratch .editor h3{font-size:26px}
.capabilities{grid-template-columns:repeat(2,1fr);gap:35px}
.mini-ui{height:190px}
.capabilities article>p{max-width:none}
.philosophy>p{font-size:38px}
}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}
.page-rule{right:9px;min-height:5100px}
.header{height:82px}
.brand{font-size:21px}
nav>a{display:none}
.small-download{font-size:11px;padding:7px 10px}
.small-download span{margin-left:5px}
.hero{padding-top:48px}
.eyebrow{font-size:9px;letter-spacing:1.4px}
h1{font-size:43px;letter-spacing:-2px;line-height:1.12;margin:22px -2px}
.hero-copy{font-size:14px;max-width:335px;margin:auto}
.desktop-only{display:none}
.hero-product{margin-top:44px}
.app-sidebar{width:95px;padding:15px 5px;font-size:9px}
.app-sidebar>span{padding:7px 4px}
.app-sidebar small{font-size:10px;margin-left:5px}
.hero .editor{padding:17px 15px 12px}
.hero .editor h3{font-size:21px}
.hero .editor p{font-size:10px}
.hero .editor-content>small{font-size:6px}
.hero .note-check{font-size:9px}
.hero .window-body{min-height:290px}
.window-top{height:35px}
.editor-content{padding-top:23px}
.caption{font-size:10px;max-width:250px;margin:24px auto 0}
.section{padding-top:90px}
.section-heading{display:block;margin-bottom:28px}
h2{font-size:35px}
.section-heading>p{margin-top:21px;max-width:310px;font-size:14px}
.desktop-scene{height:360px}
.menubar{font-size:7px;padding-inline:9px}
.document-window{top:65px;left:16px;width:275px;height:250px}
.document-content{padding:27px 25px}
.document-content h3{font-size:25px}
.document-content p{width:150px;font-size:9px}
.document-content small{font-size:6px}
.edge-panel{top:87px;right:8px;width:205px}
.edge .window-body{min-height:240px}
.edge .editor{padding:12px 15px}
.edge .editor h3{font-size:20px}
.edge .editor p,.edge .note-check{font-size:10px}
.edge .editor-content{padding:18px 0 12px}
.edge .editor-top{font-size:8px}
.dock{left:15px;bottom:9px;gap:5px}
.dock b{width:23px;height:23px}
.scene-caption{gap:15px;font-size:9px}
.scene-caption kbd{padding:1px 2px;margin:0}
.scratch-section{grid-template-columns:1fr;gap:20px}
.scratch-copy h2 br{display:none}
.quality{margin:21px 0}
.quality p{max-width:330px;font-size:14px}
.scratch-visual{margin:0 13px}
.scratch .window-body{min-height:365px}
.scratch .editor p{font-size:16px}
.scratch-visual:before{inset:0 -13px}
.capabilities{gap:30px 15px}
.mini-ui{height:170px;padding:12px}
.note-ui p{font-size:20px}
.mini-meta{font-size:8px}
.inbox-ui>div{font-size:8px;white-space:normal;padding:8px 0}
.ai-ui .question{font-size:8px}
.ai-ui .answer{font-size:11px}
.capabilities article>h3{font-size:14px;margin-top:16px}
.capabilities article>p{font-size:12px}
.philosophy{margin-top:85px;padding:55px 0}
.philosophy>p{font-size:28px;letter-spacing:-1px}
.final-cta{padding:70px 0}
.final-cta h2{font-size:35px;max-width:300px;margin:0 auto 27px}
footer{gap:18px;flex-wrap:wrap;padding-bottom:25px}
footer>div{margin-left:auto;gap:16px}
footer>p{width:100%;margin:0;font-size:10px}
.scratch-annotation{font-size:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.edge-panel:not(.visible){transform:none}
}

/* Keep the page motif within the viewport and component variants self-contained. */
body{position:relative}
.page-rule{height:auto;min-height:0;bottom:0}
.app-window.hero{padding-top:0;text-align:left}
margin-window{display:block}

@media(max-width:1400px){.hand-note,.shortcut,.philosophy .margin-note{display:none}
}

/* Page copy stays comfortably readable; miniature product windows are illustrations. */
.quality p,.capabilities article>p{font-size:16px}
.quality h3,.capabilities article>h3{font-size:16px}
.section-heading>p{font-size:16px}
.hero-copy{font-size:16px}
.meta,.caption,.scene-caption,footer,footer button{font-size:12px}
nav,.small-download{font-size:14px}

.meta,.caption,.scene-caption,footer,footer button,.scratch-annotation{color:#69715f}

@media(max-width:360px){.capabilities{grid-template-columns:1fr}
.mini-ui{height:180px}
.hero .app-sidebar{width:80px}
.small-download{font-size:12px}
.scene-caption{flex-direction:column;gap:7px}
}

/* Margin is a slide-over workspace: app rail + web views + native utilities. */
.workspace-hero{display:grid;grid-template-columns:1fr 440px;gap:90px;text-align:left;align-items:center;margin:75px auto 0;max-width:980px}
.hero-story h2{font-size:38px;line-height:1.2;margin:20px 0}.hero-story>p{color:var(--muted);font-size:16px;max-width:330px}.margin-shortcut{display:block;font-size:18px;letter-spacing:4px;color:var(--accent);margin-top:35px}.margin-shortcut span{display:block;font-size:12px;letter-spacing:.2px;margin-top:5px}.hero-demo>.caption{margin-top:18px;text-align:center;font-size:12px}
margin-workspace{display:block;min-width:0}.workspace-shell{display:flex;height:490px;border:1px solid #d4d6cb;background:#fbfbf7;border-radius:13px;overflow:hidden;box-shadow:0 24px 50px -28px #404b3c50;color:#343b30}.workspace-rail{width:51px;flex:0 0 51px;background:#eeefe8;border-right:1px solid #dfe2d6;display:flex;flex-direction:column;align-items:center;gap:15px;padding:14px 6px}.workspace-rail button,.rail-item{width:35px;height:35px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:transparent;font-size:19px;color:#68745c;font-weight:500}.workspace-rail button[aria-pressed="true"],.rail-item.active{background:#dbe3d1;border-color:#c4d0b7;color:#36472c}.workspace-rail button:hover{background:#e0e6d8}.workspace-rail button:focus-visible{outline-offset:1px}.workspace-rail button[data-view="web"]{font-size:14px}.rail-divider{height:1px;background:#d4dacb;width:24px}.rail-extra{font-size:22px;color:#89927e}.rail-settings{margin-top:auto;color:#7c8870}.workspace-main{flex:1;min-width:0;display:flex;flex-direction:column}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 17px;min-height:49px;border-bottom:1px solid #e0e3d7;gap:8px}.workspace-toolbar strong{font-size:13px;font-weight:550}.workspace-toolbar>span{font-size:12px;color:#77816c;white-space:nowrap}.workspace-content{padding:18px;flex:1;min-height:0;overflow:auto}.workspace-footer{border-top:1px solid #e1e4d8;padding:8px 13px;display:flex;justify-content:space-between;font-size:10px;color:#727c67;gap:8px}.context-attachment{background:#eef1e6;border:1px solid #dce3d2;border-radius:7px;padding:13px}.context-attachment small,.demo-label,.calendar-demo>small,.scratch-demo>small{font-size:9px;letter-spacing:1px;color:#647258}.context-attachment p{font-size:12px;line-height:1.75;margin:9px 0}.context-attachment>span{font-size:10px;color:#68765b}.ai-conversation{margin:20px 0}.demo-question{font-size:12px;margin:10px 0;padding:9px 12px;background:#f0f1ea;border-radius:8px}.demo-response{display:flex;gap:10px;margin-top:16px}.demo-response>span{font-size:20px;color:#687956}.demo-response>p{font-size:13px;line-height:1.7}.demo-composer{padding:10px 12px;border:1px solid #d7ddcd;border-radius:8px;font-size:11px;color:#818975;display:flex;justify-content:space-between}.attachment-options{font-size:10px;color:#738068;margin-top:8px}.demo-address{border-bottom:1px solid #e5e8dc;margin:-18px -18px 18px;padding:7px 15px;font-size:10px;color:#76816a}.demo-address>span{float:right}.calendar-demo h3{font-family:var(--serif);font-size:25px;font-weight:400;margin:12px 0 23px;line-height:1.2;letter-spacing:-.5px}.calendar-week{display:flex;justify-content:space-between;margin-bottom:25px}.calendar-week>span{text-align:center;font-size:11px;color:#778369;line-height:1.8;padding:5px 10px}.calendar-week>.selected{background:#e3eadb;border-radius:7px;color:#445738}.calendar-event{display:flex;gap:13px;padding:12px 0;border-top:1px solid #e3e7db;font-size:11px}.calendar-event time{color:#7b876e}.calendar-event strong{font-weight:500;display:block}.calendar-event div>span{font-size:10px;color:#7f8a73;display:block;margin-top:3px}.demo-footnote{font-size:9px;color:#7f8a73;margin-top:16px}.drop-target{border:1px dashed #b6c5a6;background:#edf1e5;border-radius:9px;text-align:center;padding:18px 10px;margin-bottom:13px}.drop-target>span{font-size:26px;color:#748d61}.drop-target h3{font-family:var(--serif);font-size:24px;font-weight:400;margin:3px 0 6px}.drop-target p{font-size:11px;color:#778368;line-height:1.7}.shelf-file{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e3e7da}.file-symbol{display:grid;place-items:center;width:32px;height:36px;border:1px solid #d6ddca;background:#f1f3e9;border-radius:5px;font-size:9px;color:#788567}.shelf-file>div{min-width:0;flex:1}.shelf-file strong{display:block;font-size:12px;font-weight:500;overflow-wrap:anywhere}.shelf-file small{display:block;font-size:10px;color:#7b876d}.shelf-file>span:last-child{color:#96a18b}.shelf-note{font-size:10px;color:#738364;margin-top:14px}.scratch-demo h3{font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.25;margin:22px 0}.scratch-demo>p{font-size:13px;line-height:1.8;color:#6d7961;margin:20px 0}.math-line{display:flex;justify-content:space-between;gap:8px;font-size:12px;border-top:1px solid #e2e6d9;padding:13px 0}.math-line strong{color:#587046;font-weight:500}.web-app-story{display:grid;grid-template-columns:1fr 370px;gap:65px;padding:45px 55px;background:#e9ede1;border:1px solid #dde3d3;border-radius:13px;align-items:center}.app-context h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.2;margin:15px 0}.app-context>p{font-size:15px;color:#707b64;max-width:310px}.work-document{background:#fafbf6;border:1px solid #d9e0cd;margin-top:30px;border-radius:6px;padding:25px;box-shadow:0 7px 20px #3e4d3310}.work-document small{font-size:9px;color:#7f8c71;letter-spacing:1.3px}.work-document h4{font-family:var(--serif);font-size:23px;font-weight:400;margin:12px 0}.work-document p{font-size:12px;color:#7f8a71}.feature-story{display:grid;grid-template-columns:1fr 420px;gap:100px;align-items:center}.feature-copy h2{margin:20px 0 25px}.feature-copy>p{font-size:16px;color:var(--muted);line-height:1.8}.quiet-list{list-style:none;padding:0;margin:27px 0 0}.quiet-list li{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding:15px 0;line-height:1.8}.quiet-list strong{font-weight:550;color:#46523d}.shelf-story{grid-template-columns:420px 1fr}.supporting-capabilities{grid-template-columns:repeat(2,1fr);gap:45px 50px}.supporting-capabilities article>p{max-width:100%}.supporting-capabilities .mini-ui{height:210px;padding:22px 25px}.supporting-capabilities .mini-ui small{font-size:11px}.command-preview small{display:flex;align-items:center;justify-content:space-between}.command-preview>p{font-size:14px;margin:16px 0 11px;color:#6c785e}.command-preview>div{font-size:12px;padding:4px 9px}.command-result{background:#e0e8d6;border-radius:4px}.command-result>span{float:right}.sleeping-preview>div{display:flex;justify-content:space-between;font-size:13px;padding:13px 0;border-bottom:1px solid #dbe1d1;gap:12px}.sleeping-preview b{font-weight:400;font-size:11px;color:#6b7e59}.sleeping-preview p{font-family:var(--serif);font-style:italic;font-size:14px;color:#77836a;margin-top:14px}.maths-preview>p{font-family:var(--serif);font-size:19px;margin:17px 0}.maths-preview>div{font-family:monospace;font-size:13px;display:flex;justify-content:space-between;margin:10px 0}.maths-preview strong{font-weight:400;color:#637c4c}.theme-swatches{display:flex;gap:13px;margin:30px 0 20px}.theme-swatches>span{width:29px;height:35px;border-radius:6px;border:1px solid #0002;background:var(--swatch)}.theme-preview p{font-size:12px;color:#6d7a60}.automation-note{display:flex;gap:60px;border-top:1px solid var(--line);padding-top:28px;margin-top:50px}.automation-note>span{font-size:11px;letter-spacing:1px;flex:0 0 210px;color:#627353}.automation-note p{font-size:14px;color:var(--muted);max-width:640px}.closing-copy{color:var(--muted);font-size:16px;margin:-5px 0 25px}.reveal{transition:transform .9s}.reveal:not(.visible){transform:translateX(12px)}
@media(max-width:1000px){.workspace-hero{grid-template-columns:1fr 390px;gap:35px}.hero-story h2{font-size:31px}.web-app-story{padding:30px;gap:25px;grid-template-columns:1fr 350px}.feature-story{gap:45px;grid-template-columns:1fr 370px}.shelf-story{grid-template-columns:370px 1fr}.feature-copy h2{font-size:36px}}
@media(max-width:760px){.workspace-hero{grid-template-columns:1fr;margin-top:55px}.hero-story{text-align:center}.hero-story h2{font-size:34px}.hero-story>p{margin:auto;max-width:400px}.margin-shortcut{margin:23px 0 5px}.hero-demo{width:min(440px,100%);margin:auto}.web-app-story{grid-template-columns:1fr;gap:30px;padding:25px}.web-app-story margin-workspace{max-width:380px;margin:auto}.work-document{display:none}.app-context>p{max-width:none}.feature-story,.shelf-story{grid-template-columns:1fr;gap:35px}.feature-story margin-workspace{max-width:420px;width:100%;margin:auto}.shelf-story .feature-copy{grid-row:1}.supporting-capabilities{gap:30px 20px}.supporting-capabilities .mini-ui{padding:17px}.supporting-capabilities .mini-ui small{font-size:9px}.theme-swatches{gap:7px;flex-wrap:wrap;margin:20px 0 13px}.theme-swatches>span{width:23px;height:27px}.maths-preview>p{font-size:17px}.maths-preview>div{font-size:11px}.sleeping-preview>div{font-size:11px}.sleeping-preview b{font-size:10px}.automation-note{display:block}.automation-note p{margin-top:12px}.section-heading>p{max-width:none}.section-heading{display:block}.section-heading>p{margin-top:20px}}
@media(max-width:480px){.workspace-hero{gap:25px}.hero-story h2{font-size:32px}.workspace-shell{height:495px}.workspace-rail{width:44px;flex-basis:44px;padding-inline:4px}.workspace-rail button,.rail-item{width:32px;height:34px}.workspace-toolbar{padding:0 12px}.workspace-toolbar>span{font-size:10px}.workspace-content{padding:14px}.context-attachment{padding:10px}.context-attachment p{font-size:11px}.demo-response>p{font-size:12px}.ai-conversation{margin:16px 0}.attachment-options{font-size:9px}.workspace-footer{font-size:9px;padding-inline:10px}.web-app-story{padding:20px 12px}.app-context{padding:5px 8px}.calendar-demo h3{font-size:23px}.calendar-week>span{padding:5px 7px}.calendar-event{gap:9px}.feature-copy h2{font-size:35px}.supporting-capabilities{grid-template-columns:1fr}.supporting-capabilities .mini-ui{height:200px;padding:23px}.supporting-capabilities .mini-ui small{font-size:11px}.theme-swatches{gap:15px;margin:25px 0 20px}.theme-swatches>span{width:28px;height:32px}.maths-preview>div{font-size:13px}.sleeping-preview>div{font-size:13px}.sleeping-preview b{font-size:11px}}

.hero-demo{animation:settle .8s both}
/* Screenshot-grounded WIP presentation: native shell retained, Paper material. */
.screenshot-reference{height:600px;background:#f6f5f0;color:#333631;border-color:#d1d1c7}.screenshot-reference .workspace-rail{width:43px;flex-basis:43px;padding:12px 5px;gap:10px;background:#e9e8e1;border-color:#d6d5cc}.rail-layout{font-size:15px;color:#7b7b72;margin:0 0 9px}.screenshot-reference .workspace-rail button,.reference-rail-item{display:grid;place-items:center;position:relative;width:32px;height:33px;flex-shrink:0;padding:3px;border:1px solid transparent;border-radius:7px}.screenshot-reference .workspace-rail button[aria-pressed=true],.reference-rail-item.selected{border-color:#bbb4d2;background:#ded9ea}.reference-icon{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:18px}.reference-icon.claude{background:#e9d8ca;color:#b66640;font-size:23px}.reference-icon.gpt{background:#159b80;color:white}.reference-icon.dev{background:#243344;color:#89b8fa;font-size:13px;font-weight:600}.reference-icon.notion{background:white;color:#202020;font-family:Georgia;font-weight:700;font-size:24px}.reference-icon.cal{background:linear-gradient(#3280dd 22%,#fff 22%);color:#2275dc;font-size:15px;font-weight:700;padding-top:4px}.reference-icon.keep{background:#f5bd32;color:#6b4c07}.reference-icon.mail{background:#fff;color:#d85845;font-weight:700}.reference-icon.scratch-icon{background:#7860d8;color:#fff}.reference-icon.shelf-icon{background:#e89a37;color:#fff}.reference-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.sleep-badge{position:absolute;bottom:0;right:-1px;background:#e9f1f0;color:#477b82;border:1px solid #d5dfdc;border-radius:50%;font-size:9px;line-height:11px}.reference-add{border:1px solid #d1d0c5;border-radius:7px;display:grid;place-items:center;width:30px;height:30px;color:#8a8a80;font-size:23px}.reference-utilities{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}.reference-settings{border-top:1px solid #cecec3;padding-top:10px;font-size:22px;color:#73756e}.screenshot-reference .workspace-toolbar{min-height:40px;padding-inline:13px;border-color:#dbdad1}.screenshot-reference .workspace-toolbar strong{font-size:12px}.screenshot-reference .workspace-toolbar>span{font-size:12px;color:#8a819b}.workspace-toolbar b{font-size:10px;font-weight:500;background:#e8e6de;padding:3px 5px;border-radius:4px}.screenshot-reference .workspace-content{padding:0;display:flex;flex-direction:column}.screenshot-reference .workspace-footer{font-size:9px;background:#eeede6;border-color:#dad9cf;color:#777c71;padding:6px 10px}.reference-native{padding:20px 15px 12px;display:flex;flex-direction:column;flex:1;min-height:0}.reference-native>small{font-size:9px;font-weight:650;letter-spacing:1.7px;color:#88877d}.reference-native>h3{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:23px;font-weight:600;letter-spacing:-.8px;margin:3px 0}.reference-native>p{font-size:11px;color:#838379;line-height:1.6}.reference-drop{border:1px dashed #d4d0dd;border-radius:9px;text-align:center;padding:24px 12px;margin-top:16px;background:#eeecef66}.reference-drop>svg{width:31px;height:31px;display:block;margin:0 auto 12px;stroke:#8c7ea7;stroke-width:2;fill:none}.reference-drop>strong{display:block;font-size:12px;font-weight:600;line-height:1.5}.reference-drop>p{font-size:10px;color:#868479;margin:8px 0 13px}.reference-control{display:inline-block;background:#e4e1e6;border-radius:5px;padding:5px 10px;font-size:11px;font-weight:550}.reference-retention{margin-top:auto;padding-top:35px;font-size:10px;color:#7d8174;line-height:1.8}.reference-retention>span{font-size:9px}.reference-math-label{font-size:9px;background:#e9e7df;color:#697965;align-self:flex-start;border-radius:20px;padding:3px 7px;margin:7px 0}.reference-editor-tools{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #d9d8cd;font-size:8px;color:#858376}.reference-editor-tools>span:last-child{color:#8875a5;white-space:nowrap}.reference-notes{border:1px solid #dddcd1;background:#fcfbf7;border-radius:7px;margin-top:10px;padding:13px 11px;font:10px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;flex:1;overflow:auto;overflow-wrap:anywhere}.reference-notes .note-heading{color:#909184}.reference-notes strong{color:#8170ae}.reference-editor-status{font-size:8px;color:#8a8c7d;margin-top:9px}.reference-address{display:flex;justify-content:space-between;padding:6px 10px;background:#e9e8e1;color:#818276;font-size:9px;border-bottom:1px solid #dad9d1}.reference-claude{background:#faf9f5;flex:1;padding:17px 20px;color:#37362e;display:flex;flex-direction:column}.claude-brand{font-family:Georgia,serif;font-size:24px}.claude-brand>span{color:#bb704b}.claude-welcome{margin:auto 0;text-align:center;padding:30px 0}.claude-welcome h3{font:32px/1.15 Georgia,serif;letter-spacing:-1px}.claude-welcome>p{font:12px/1.6 Georgia,serif;margin-top:12px}.reference-signin{border:1px solid #e2dfd6;border-radius:14px;padding:15px;margin:24px auto 0;max-width:255px;display:flex;flex-direction:column;gap:9px}.reference-signin>span{display:block;border-radius:5px;background:#eceae3;padding:7px 5px;font-size:10px}.reference-signin>small{font-size:9px;color:#88857b}.reference-signin>.email-placeholder{text-align:left;color:#928d82;border:1px solid #dedacf;background:transparent}.reference-signin>span:last-child{background:#3e4037;color:#fff}.hero-demo>.caption{max-width:390px;line-height:1.7;margin-inline:auto}.feature-story .screenshot-reference{height:570px}.web-app-story .screenshot-reference{height:540px}
@media(max-width:480px){.screenshot-reference{height:570px}.reference-native{padding:15px 11px 10px}.reference-drop{padding:20px 10px}.reference-drop>strong{font-size:11px}.reference-claude{padding:15px}.claude-welcome h3{font-size:27px}.reference-notes{font-size:9px}.screenshot-reference .workspace-toolbar>span{font-size:10px}}
/* Editorial tightening: less repetition, closer section rhythm. */
.hero{padding-top:35px}.hero-copy{line-height:1.65}.workspace-hero{margin-top:40px;gap:55px}.hero-story h2{font-size:35px}.hero-story .eyebrow{display:none}.hero-demo>.caption{font-size:11px;margin-top:12px}.section{padding-top:72px}.section-heading{display:block;margin-bottom:25px}.section-heading h2{margin-top:12px}.web-app-story{padding:30px 40px;gap:45px}.app-context>p{max-width:300px}.feature-story{gap:65px}.feature-copy h2{margin:12px 0 19px}.feature-copy>p{max-width:350px;line-height:1.7}.detail-tags{font-size:12px;color:#758268;margin-top:22px}.detail-tags span{margin:0 8px}.digital h2{margin:12px 0 30px}.supporting-capabilities{gap:28px 35px}.supporting-capabilities article>h3{margin:15px 0 6px}.supporting-capabilities article>p{font-size:14px}.supporting-capabilities .mini-ui{height:190px}.maths-preview>div{font-size:12px;gap:8px;line-height:1.4;margin:10px 0}.maths-preview>small:first-child{display:block;margin-bottom:15px}.maths-preview .rate-note{font:9px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:0;color:#75816a;display:block;margin-top:9px}.supporting-capabilities .maths-preview{height:215px}.automation-note{margin-top:30px;padding-top:20px;gap:30px}.philosophy{margin-top:65px;padding:50px 0}.philosophy>p{font-size:39px;margin-top:18px}.final-cta{padding:60px 0}.app-icon{margin-bottom:18px}.reference-icon svg{width:19px;height:19px;display:block}.reference-icon img{width:19px;height:19px;display:block;filter:invert(1)}.reference-icon.cal{padding-top:4px}.reference-icon.cal svg{width:21px;height:21px}.reference-icon.claude svg{stroke-width:1.25}.reference-icon.shelf-icon svg{width:20px;height:20px}.sleep-badge{width:10px;height:10px;display:grid;place-items:center;right:-1px;bottom:0}.sleep-badge svg{width:7px;height:7px;stroke-width:2}.reference-icon{box-shadow:inset 0 0 0 1px #00000008}.screenshot-reference .workspace-rail{gap:8px}.screenshot-reference{height:545px}.feature-story .screenshot-reference{height:535px}.web-app-story .screenshot-reference{height:505px}.reference-claude .claude-welcome{padding:20px 0}.reference-native .reference-notes{scrollbar-width:thin}.command-preview .shortcut-illustration{font-size:36px;margin:12px 0 8px;color:#58694a}
@media(max-width:1000px){.feature-story{gap:35px}.web-app-story{gap:25px;padding:25px}.workspace-hero{gap:30px}.section{padding-top:60px}}
@media(max-width:760px){.workspace-hero{margin-top:32px}.hero-story{display:none}.section{padding-top:52px}.web-app-story{padding:22px}.feature-story{gap:25px}.feature-copy>p{max-width:none}.philosophy{margin-top:45px;padding:35px 0}.philosophy>p{font-size:30px}.final-cta{padding:45px 0}.supporting-capabilities{gap:25px}.reference-retention{padding-top:20px}}
@media(max-width:480px){.hero{padding-top:25px}.section-heading h2{font-size:32px}.feature-copy h2{font-size:32px}.supporting-capabilities .mini-ui{height:185px}.supporting-capabilities .maths-preview{height:215px}.maths-preview>div{font-size:11px}.screenshot-reference{height:540px}}
/* A single product view per chapter, with one consistent type hierarchy. */
:root{--ui-font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}body{font-family:var(--ui-font);font-weight:400}h1,h2,.hero-story h2,.philosophy>p{font-weight:400}h1{letter-spacing:-2.5px}h2{letter-spacing:-1.2px}.hero-story em{font-style:normal}.brand{font-weight:500}.eyebrow{font-weight:500;letter-spacing:1.5px}.button,.small-download{font-weight:500}.feature-copy>p,.hero-story>p{font-weight:400;color:#6a6e63}.reference-native>h3{font-weight:500;letter-spacing:-.5px}.screenshot-reference .workspace-toolbar strong{font-weight:500}.reference-native>small{font-weight:500;letter-spacing:1.25px}.reference-control,.reference-drop>strong{font-weight:500}.reference-editor-tools,.reference-editor-status,.reference-native>small{color:#727467}.reference-notes{font-weight:400}.reference-notes strong{font-weight:500}.rail-layout{display:grid;place-items:center;width:29px;height:29px;margin:0 0 5px;color:#55634a}.rail-layout svg{display:block;width:27px;height:27px}.edge-hint{display:flex;align-items:center;gap:12px;margin-top:26px;font-size:13px;color:#65725a;letter-spacing:0}.edge-hint>span{font-size:23px;letter-spacing:2px}.hero-demo .screenshot-reference{height:545px}.hero-demo .claude-welcome h3{font-size:31px}.hero-demo .reference-signin{margin-top:20px}.workspace-hero{align-items:center}.hero-demo>.caption{font-weight:400}.feature-copy h2{font-weight:400}
@media(max-width:600px){h1{letter-spacing:-1.7px}.hero-demo .claude-welcome h3{font-size:27px}}
/* Balanced product sequence: main window right, scratchpad left, shelf right. */
@media(min-width:761px){
 .workspace-hero{max-width:none;grid-template-columns:minmax(0,1fr) 420px;gap:65px}
 #experience.feature-story{grid-template-columns:420px minmax(0,1fr);gap:65px}
 #experience>.feature-copy{grid-column:2;grid-row:1}
 #experience>margin-workspace,#experience>.panel-screenshot-frame{grid-column:1;grid-row:1}
 .shelf-story{grid-template-columns:minmax(0,1fr) 420px;gap:65px}
 .shelf-story>.feature-copy{grid-column:1;grid-row:1}
 .shelf-story>margin-workspace,.shelf-story>.panel-screenshot-frame{grid-column:2;grid-row:1}
 .notch-story{grid-template-columns:440px minmax(0,1fr);gap:65px}
 .notch-story>.feature-copy{grid-column:2;grid-row:1}
 .notch-story>.notch-preview-frame{grid-column:1;grid-row:1}
 .hero-demo .screenshot-reference,.feature-story .screenshot-reference{height:545px}
 .hero-story,.feature-copy{max-width:390px}
}
@media(min-width:761px) and (max-width:1000px){
 .workspace-hero,.shelf-story{grid-template-columns:minmax(0,1fr) 370px;gap:35px}
 #experience.feature-story,.notch-story{grid-template-columns:370px minmax(0,1fr);gap:35px}
}
@media(max-width:760px){
 #experience>.feature-copy,.shelf-story>.feature-copy,.notch-story>.feature-copy{grid-column:1;grid-row:1}
 #experience>margin-workspace,#experience>.panel-screenshot-frame,.shelf-story>margin-workspace,.shelf-story>.panel-screenshot-frame,.notch-story>.notch-preview-frame{grid-column:1;grid-row:2}
 .hero-demo,.feature-story margin-workspace,.panel-screenshot-frame,.notch-preview-frame{width:min(440px,100%);margin-inline:auto}
}
.reference-icon.notion img{filter:none;width:20px;height:20px}
.macbook-hero{margin:35px 0 0}.macbook-hero>img{display:block;width:100%;height:auto;border-radius:12px}.macbook-hero figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:12px;text-align:left;font-size:13px;color:#626e59}.macbook-hero figcaption>span:first-child{color:#424d3b;font-weight:500}.image-disclosure{font-size:10px;color:#79816f;text-align:center;margin-top:12px}.reference-icon.notion{background:#fff}
@media(max-width:600px){.macbook-hero{margin:28px -10px 0}.macbook-hero figcaption{flex-direction:column;gap:5px;text-align:center;padding:0 12px;font-size:12px}.image-disclosure{font-size:9px;padding:0 12px}}
/* Quieter supporting details: one title and one visual per row. */
.macbook-hero figcaption{display:block;text-align:center;font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--ink);margin:17px 0 0;font-weight:400}
.feature-details{border-top:1px solid var(--line)}.feature-details article{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}.detail-summary h3{font-size:18px;line-height:1.4;font-weight:500;margin-bottom:7px}.detail-summary p{font-size:15px;color:var(--muted);line-height:1.6;max-width:330px}.detail-visual{justify-self:end;width:100%;max-width:340px}.key-visual{display:flex;gap:8px;justify-content:flex-start}.key-visual kbd{font-size:23px;font-weight:400;background:#eeeee6;padding:6px 14px;border:1px solid #d9ddce;border-radius:6px;margin:0}.sleep-visual{color:#617256;font-size:15px;display:flex;align-items:center;gap:12px}.sleep-visual>span{font-size:24px}.calculation-visual>div{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px;font-size:13px}.calculation-visual code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}.calculation-visual strong{font-weight:500;color:#61784e}.calculation-visual small{font-size:12px;color:#747e69}.palette-visual{display:flex;gap:13px}.palette-visual i{display:block;width:29px;height:35px;border-radius:6px;border:1px solid #0002}.automation-note{margin-top:0;padding-top:20px;border-top:0;align-items:baseline}.automation-note>span{font-size:11px}.automation-note p{font-size:14px}.digital+.philosophy{margin-top:26px;padding-top:30px;padding-bottom:35px}
@media(max-width:600px){.macbook-hero figcaption{font-size:20px;margin-top:15px;padding:0 15px}.feature-details article{grid-template-columns:1fr;gap:18px;padding:23px 0}.detail-visual{justify-self:start;max-width:100%}.detail-summary p{max-width:none}.calculation-visual>div{font-size:12px}.digital+.philosophy{margin-top:24px}.automation-note{padding-top:18px}}

/* Copper identity: warm paper, quiet metal accents, contained layout. */
::selection{background:#ead4c5}
.button{background:#925136;border-color:#81472f;box-shadow:0 2px 4px #44271912,inset 0 1px #ffffff20}
.button:hover{background:#78412d}
.small-download{border-color:var(--line)}
.small-download:hover{background:#eee6df}
.brand-icon,.footer-brand-icon,.cta-app-icon{box-shadow:none;border-radius:0}
.brand-icon{width:36px;height:36px}
.footer-brand-icon{width:26px;height:26px}
.cta-app-icon{width:88px;height:88px;margin-bottom:20px}
.feature-copy>p,.hero-story>p,.meta,.caption,.scene-caption,footer,footer button,.scratch-annotation{color:var(--muted)}
.philosophy>p>span{color:var(--accent)}
.key-visual kbd{background:#f0eae3;border-color:var(--line);color:#704b38}
.sleep-visual,.calculation-visual strong,.automation-note>span{color:var(--accent)}
.calculation-visual small{color:var(--muted)}
.screenshot-reference{border-color:#d9d0c7;box-shadow:0 24px 50px -28px #533c3050}
.screenshot-reference .workspace-rail{background:#ece7df;border-color:#d9d0c7}
.screenshot-reference .workspace-footer{background:#f0ece5;color:#746b61;border-color:#ddd4ca}
.reference-math-label{background:#eee5da;color:#7f513b}
.reference-notes strong,.reference-editor-tools>span:last-child{color:#955438}
.rail-layout{color:#955438}
.rail-divider{display:block;width:20px;height:1px;background:var(--line);margin:3px auto 6px;opacity:0.8}
.feature-copy,.detail-summary,.detail-visual{min-width:0}
@media(max-width:380px){.brand{gap:6px;font-size:20px}.brand-icon{width:30px;height:30px}.header nav{gap:10px}.small-download{padding:7px 8px;font-size:12px}}

/* Keep the closing capability row aligned with the feature rows above it. */
.automation-note{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start;margin-top:0;padding:26px 0;border-top:0}
.automation-note>span{font-family:var(--ui-font);font-size:18px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--ink)}
.automation-note p{width:100%;max-width:340px;justify-self:end;margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
@media(max-width:600px){.automation-note{grid-template-columns:1fr;gap:7px;padding:23px 0}.automation-note p{max-width:none;justify-self:start}}

/* Real App Screenshots & Interactive Tour */
.panel-screenshot-frame {
  max-width: 442px;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 28px 60px -20px rgba(50, 40, 30, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08);
  background: #fbfbf7;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.panel-screenshot-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 70px -20px rgba(50, 40, 30, 0.30), 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.panel-screenshot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  image-rendering: -webkit-optimize-contrast;
}
.notch-preview-frame {
  max-width: 580px;
  width: 100%;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.notch-preview-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.notch-preview-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  image-rendering: -webkit-optimize-contrast;
}

/* Tour Section */
.tour-section {
  padding-top: 90px;
  text-align: center;
}
.tour-heading {
  max-width: 620px;
  margin: 0 auto;
}
.tour-heading h2 {
  margin: 14px 0 12px;
}
.tour-heading p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 30px 0 34px;
}
.tour-tab-btn {
  background: #ede8e0;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tour-tab-btn:hover {
  background: #e2ddd3;
  color: var(--ink);
}
.tour-tab-btn.active {
  background: #925136;
  border-color: #81472f;
  color: #fff;
  box-shadow: 0 2px 8px rgba(146, 81, 54, 0.25);
}
.tour-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.tour-caption {
  max-width: 440px;
  text-align: center;
}
.tour-caption h3 {
  font-size: 19px;
  font-weight: 550;
  margin-bottom: 6px;
}
.tour-caption p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
#tour-display-img {
  transition: opacity 0.22s ease-in-out;
}
#tour-display-img.fading {
  opacity: 0.2;
}

/* Product film */
.film-section{padding-top:104px;padding-bottom:64px;text-align:center}
.film-heading p{max-width:520px;margin:18px auto 0;font-size:16px;line-height:1.7;color:var(--muted)}
.film-frame{position:relative;margin:46px 0 0;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#efece6;box-shadow:0 44px 90px -44px rgba(60,40,25,.42),0 0 0 1px rgba(48,42,38,.08)}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#efece6}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:12px;padding:8px 20px 8px 8px;border:0;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:var(--ink);font-size:14px;font-weight:500;box-shadow:0 10px 28px rgba(40,30,20,.16),0 0 0 1px rgba(48,42,38,.08);transition:transform .2s,background .2s,opacity .25s}
.film-play:hover{background:rgba(255,255,255,.96);transform:translate(-50%,calc(-50% - 1px))}
.film-play small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.film-play-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#925136;box-shadow:inset 0 1px #ffffff26}
.film-play-icon svg{width:14px;height:14px;margin-left:2px;fill:#fff}
.film-frame.is-playing .film-play{opacity:0;pointer-events:none}
@media(max-width:760px){.film-section{padding-top:72px;padding-bottom:28px}.film-heading p{font-size:15px}.film-frame{margin-top:32px;border-radius:12px}.film-play{gap:9px;padding:6px 14px 6px 6px;font-size:13px}.film-play-icon{width:30px;height:30px}.film-play-icon svg{width:12px;height:12px}}
@media(prefers-reduced-motion:reduce){.film-play{transition:none}}

/* Auto-rotating tour: progress line in the active tab drives the rotation */
.tour-tab-btn{position:relative;overflow:hidden}
.tour-tabs.is-auto .tour-tab-btn.active::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.6);transform-origin:0 50%;animation:tour-progress var(--tour-ms,4500ms) linear forwards}
.tour-tabs.is-paused .tour-tab-btn.active::after{animation-play-state:paused}
@keyframes tour-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.tour-tabs.is-auto .tour-tab-btn.active::after{display:none}}

/* Balanced line breaks: no one-word last lines */
h1,h2,h3,.hero-copy,.macbook-hero figcaption,.film-heading p,.tour-heading p,.tour-caption p{text-wrap:balance}
.feature-copy p,.detail-summary p{text-wrap:pretty}
.film-heading p{line-height:1.6}
/* Film play control: a single round button */
.film-play{width:84px;height:84px;padding:0;gap:0;justify-content:center;border-radius:50%;background:rgba(255,255,255,.72)}
.film-play:hover{background:rgba(255,255,255,.9);transform:translate(-50%,-50%) scale(1.05)}
.film-play-icon{width:auto;height:auto;background:none;box-shadow:none}
.film-play-icon svg{width:30px;height:30px;margin:0;fill:#925136}
@media(max-width:760px){.film-play{width:64px;height:64px;padding:0}.film-play-icon svg{width:24px;height:24px;margin:0}}
.film-heading p{max-width:640px}
@media(max-width:600px){h1 br{display:none}}
/* Play button: solid brand circle so it reads on any part of the poster */
.film-play{background:#925136;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 14px 34px -8px rgba(80,40,20,.45),0 0 0 6px rgba(255,255,255,.55)}
.film-play:hover{background:#7f452d}
.film-play-icon svg{fill:#fff}