/* Product chapters use the homepage palette, with their own editorial scale. */
html:has(.features-page) { scroll-padding-top:0; }
.features-page { overflow-x:clip; }
.features-page main { width:min(calc(100% - var(--gutter) * 2),1360px); margin-inline:auto; }
.features-page main > .shell { width:100%; }
.features-page h1,.features-page h2,.features-page h3,.features-page p,.features-page figure { margin:0; }
.features-page h1,.features-page h2,.features-page h3 { font-weight:400; text-wrap:balance; }
.features-page main p { font-size:18px; line-height:1.65; color:var(--muted); }
.features-page h2 { font-size:clamp(42px,5.15vw,80px); line-height:1.05; letter-spacing:-.055em; }
.features-page h3 { font-size:clamp(29px,3vw,42px); line-height:1.12; letter-spacing:-.04em; }
.features-page section[id],.features-page #overlay { scroll-margin-top:24px; }
.feature-header { position:static; border-bottom:1px solid var(--rule); }
.feature-header-inner { display:flex; align-items:center; gap:35px; min-height:90px; }
.feature-header-nav { margin-left:auto; display:flex; align-items:center; gap:34px; font-size:15px; }
.feature-header-nav a { padding:13px 0; color:var(--muted); }
.feature-header-nav a[aria-current] { color:var(--ink); box-shadow:0 1px var(--signal); }
.feature-header-nav a:hover { color:var(--signal); }
.feature-header-controls { display:flex; gap:15px; align-items:center; }
.feature-opening { padding-top:45px; }
.feature-opening-top { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--sage); margin-bottom:37px; }
.feature-opening-grid { display:grid; grid-template-columns:1.6fr .65fr; gap:7%; align-items:end; }
.features-page h1 { font-size:clamp(70px,9.8vw,150px); line-height:.93; letter-spacing:-.065em; }
.features-page .feature-intro p { font-size:clamp(17px,1.55vw,21px); line-height:1.6; }
.feature-intro .text-link { margin-top:22px; color:var(--signal); }
.feature-product-scene { --scene-progress:.25; margin-top:60px; padding:28px 4% 0; position:relative; }
.feature-stage-track { display:flex; gap:22px; align-items:center; color:var(--quiet); font-size:13px; margin-bottom:36px; }
.feature-stage-track i { height:1px; background:var(--rule); flex:1; position:relative; }
.feature-stage-track i::after { content:''; position:absolute; width:5px; height:5px; background:var(--signal); border-radius:50%; right:0; top:-2px; }
.feature-product-depth { position:relative; perspective:1800px; padding:15px 0 20px; }
.feature-product-window { position:relative; border:1px solid #71958185; background:#0d1512; border-radius:9px; overflow:hidden; transform:rotateX(calc(11deg - var(--scene-progress) * 11deg)) rotateY(calc(-5deg + var(--scene-progress) * 5deg)) rotateZ(calc(-1.5deg + var(--scene-progress) * 1.5deg)); transform-origin:50% 65%; box-shadow:0 45px 85px -40px #000b; }
.feature-product-window a { display:block; }
.feature-product-window a:hover { filter:brightness(1.09); }
.feature-product-window img { width:100%; }
.feature-window-caption { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 20px; color:#c1d1c5; font-size:14px; background:#101b15; }
.feature-window-caption>span:first-child { display:flex; align-items:center; gap:9px; }
.feature-stage-bottom { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:16px 0 0; }
.features-page .feature-stage-bottom p { font-size:16px; }
.feature-stage-bottom>a { font-size:16px; flex:none; display:flex; gap:18px; align-items:center; min-height:44px; }
.feature-stage-bottom>a:hover { color:var(--signal); }
.feature-chapters { display:grid; grid-template-columns:repeat(3,1fr); margin:70px auto 0; border-block:1px solid var(--rule); }
.feature-chapters>a { position:relative; padding:27px 30px; font-size:20px; line-height:1.4; border-right:1px solid var(--rule); transition:background .2s; }
.feature-chapters>a:first-child { padding-left:0; }
.feature-chapters>a:last-child { border-right:0; }
.feature-chapters>a>span:first-child { display:block; color:var(--quiet); font-size:14px; margin-bottom:8px; }
.feature-chapters>a>span:last-child { position:absolute; right:25px; top:27px; color:var(--signal); }
.feature-chapters>a:hover { background:var(--panel); }
.feature-overlay-chapter { padding-block:125px; }
.feature-chapter-heading { display:grid; grid-template-columns:1.45fr .65fr; gap:11%; align-items:end; margin-bottom:60px; }
.feature-chapter-heading>p { max-width:28em; padding-bottom:4px; }
.feature-overlay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7%; }
.feature-fact { border-top:1px solid var(--rule); padding-top:30px; display:flex; flex-direction:column; align-items:flex-start; }
.feature-icon { width:56px; height:56px; margin-bottom:30px; fill:none; stroke:var(--signal); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.feature-fact h3 { margin-bottom:24px; }
.feature-fact p+p { margin-top:17px; }
.feature-key { display:flex; align-items:flex-start; flex-direction:column; gap:10px; font-size:14px; color:var(--quiet); padding-top:28px; }
.feature-fact .feature-key { margin-top:auto; }
.feature-key kbd { font:400 15px/1.45 var(--sans); color:var(--ink); border:1px solid var(--line2); border-bottom-width:3px; background:var(--surface); border-radius:5px; padding:9px 13px; white-space:nowrap; }
.feature-sharing { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding:48px 52px; border:1px solid var(--rule); background:var(--panel); margin-top:70px; border-radius:10px; }
.feature-sharing-title { display:flex; align-items:flex-start; gap:25px; }
.feature-sharing-title svg { width:66px; height:66px; fill:none; stroke:var(--signal); stroke-width:1.3; stroke-linecap:round; }
.feature-sharing-title h3 { max-width:10em; }
.features-page .feature-sharing-caveat { font-size:16px; margin-top:20px; }
.feature-sharing .feature-key { flex-direction:row; flex-wrap:wrap; align-items:center; gap:15px; }

/* A pale, tactile workbench changes the pace of the page. */
.feature-controls-band { --ink:#203d2c; --muted:#415d49; --quiet:#496652; --rule:#a7bda9; --signal:#245a3d; --line2:#9bb39e; --surface:#e9f0e4; --panel:#ccdcca; margin-inline:calc(var(--gutter) * -1); padding-block:100px 110px; background:#dbe6d5; color:var(--ink); }
.feature-control-layout { display:grid; grid-template-columns:1.05fr 1fr; gap:10%; align-items:start; }
.features-page .feature-shortcut-disclosure { max-width:62em; font-size:14px; line-height:1.65; margin:0 0 40px; }
.feature-demo-sticky { position:sticky; top:70px; padding-top:12px; }
.feature-control-demo { border:1px solid #9eb7a2; border-radius:12px; background:#eaf0e4; box-shadow:0 25px 65px -45px #29453090; }
.feature-demo-heading { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid #bdcdb9; font-size:17px; }
.feature-demo-heading .feature-simulated { font-size:13px; color:#536e59; border:1px solid #b6c9b4; padding:4px 9px; border-radius:4px; }
.feature-demo-screens { position:relative; aspect-ratio:1.65; margin:26px 22px 17px; }
.feature-demo-screen { position:absolute; width:46%; height:74%; top:4%; border:1px solid #9fb6a0; border-radius:7px; background:linear-gradient(140deg,#ccdfc9,#e0ead9); }
.feature-demo-screen>span { position:absolute; left:13px; top:10px; color:var(--ink); font-size:12px; }
.feature-demo-screen::before { content:''; position:absolute; width:1px; height:18px; bottom:-19px; left:50%; background:#9bb29b; }
.feature-demo-screen::after { content:''; position:absolute; width:46%; height:1px; bottom:-20px; left:27%; background:#9bb29b; }
.feature-demo-screen>i { position:absolute; height:22%; width:60%; border:1px solid #aac0a8; left:20%; top:50%; transform:translateY(-50%); border-radius:3px; }
.feature-demo-screen-two { right:0; background:linear-gradient(140deg,#d6e4d1,#e6eedf); border-color:#b7c9b6; }
.feature-demo-reader { position:absolute; left:4%; top:20%; width:38%; min-height:43%; display:flex; align-items:center; padding:17px; border:1px solid #446b4f; border-radius:6px; color:#eaf3e6; background:#254a35ed; box-shadow:0 15px 28px -15px #203e2dcc; transform-origin:50% 90%; transition:transform .7s cubic-bezier(.22,.68,.15,1),opacity .3s; }
.features-page [data-demo-words] { font-size:clamp(18px,1.9vw,29px); line-height:1.35; color:#e8f3e4; letter-spacing:-.025em; }
[data-demo-words] span { transition:color .2s; }
[data-demo-words] .is-read { color:#9bbda6; }
[data-demo-words] .is-current { color:#c3fbd9; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
[data-screen='1'] .feature-demo-reader { transform:translateX(143%); }
[data-mirrored='true'] [data-demo-words] { transform:scaleX(-1); }
[data-minimised='true'] .feature-demo-reader { opacity:0; transform:translateY(75%) scale(.25); }
[data-screen='1'][data-minimised='true'] .feature-demo-reader { transform:translate(143%,75%) scale(.25); }
[data-frozen='true'] .feature-demo-reader { border-color:#a5d6b3; box-shadow:0 0 0 3px #a5d6b348; }
.feature-demo-minimised { position:absolute; bottom:9%; left:0; right:0; text-align:center; font-size:14px; color:#385840; opacity:0; }
[data-minimised='true'] .feature-demo-minimised { opacity:1; }
.feature-demo-feedback { display:flex; align-items:center; gap:12px; min-height:88px; padding:18px 22px; border-top:1px solid #bdcdb9; }
.features-page [data-demo-status] { font-size:15px; line-height:1.5; }
.feature-reset { margin-left:auto; border:0; background:transparent; color:#335b3e; padding:10px 0 10px 10px; font-size:14px; white-space:nowrap; }
.feature-reset span { margin-left:7px; }
.features-page .feature-demo-note { margin-top:22px; max-width:34em; font-size:15px; }
.features-page .feature-control-reference { margin:-15px 0 12px; max-width:62em; font-size:14px; line-height:1.55; }
.feature-control-list>section { border-top:1px solid var(--rule); padding:35px 0 42px; }
.feature-control-list>section:first-child { padding-top:22px; }
.feature-control-list>section:last-child { padding-bottom:0; }
.feature-control-title { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }
.feature-control-title h3 { font-size:clamp(29px,3vw,42px); }
.feature-try { flex:none; margin-top:3px; display:flex; gap:14px; align-items:center; justify-content:center; min-height:44px; border:1px solid #809f84; padding:10px 14px; border-radius:5px; color:#23482f; background:#edf3e8; font-size:14px; cursor:pointer; }
.feature-try:hover:not(:disabled) { background:#c8dbc4; border-color:#42694b; }
.feature-try[aria-pressed='true'] { background:#2a5137; color:#f0f5e9; border-color:#2a5137; }
.feature-try[aria-pressed='true']:hover { background:#21462e; }
.feature-try:focus-visible { outline:2px solid #245a3d; outline-offset:4px; }
.feature-try:disabled { opacity:.5; cursor:default; }
.feature-control-list .feature-key { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:6px 12px; padding-top:19px; font-size:13px; }
.feature-control-list .feature-key kbd { font-size:13px; border:0; border-radius:0; padding:0; background:transparent; color:var(--quiet); }
.features-page .feature-detail { font-size:15px; margin-top:18px; line-height:1.6; }
.feature-inline-link { display:inline-flex; align-items:center; gap:18px; min-height:44px; margin-top:17px; font-size:16px; text-decoration:underline; text-underline-offset:5px; }

/* Two views of the same app capture: a magnified editor crop and the full window. */
.feature-formatting { padding-block:125px; }
.feature-editor-stage { position:relative; display:grid; grid-template-columns:29% 1fr; align-items:center; gap:5%; padding-block:25px 40px; }
.feature-editor-detail { position:relative; z-index:2; border:1px solid var(--line2); background:var(--panel); border-radius:10px; box-shadow:0 25px 50px -30px #000b; }
.feature-detail-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); padding:16px 17px; border-bottom:1px solid var(--rule); }
.feature-toolbar-crop { display:block; width:100%; aspect-ratio:1.55; position:relative; overflow:hidden; background:#0d1312; }
.feature-toolbar-crop img { position:absolute; width:387.7%; max-width:none; left:0; top:-156.6%; height:auto; }
.feature-editor-detail figcaption { padding:20px 22px 24px; font-size:clamp(18px,1.9vw,26px); line-height:1.4; letter-spacing:-.02em; }
.feature-editor-full { min-width:0; }
.feature-editor-full>a { display:block; border:1px solid var(--line2); border-radius:8px; overflow:hidden; box-shadow:0 30px 70px -35px #000a; }
.feature-editor-full img { width:100%; }
.feature-editor-full figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 25px; margin-top:18px; color:var(--muted); font-size:15px; }
.feature-editor-full figcaption>a { color:var(--ink); }
.feature-editor-full figcaption>a:hover { color:var(--signal); }
.feature-editor-full figcaption small { display:block; margin-top:6px; font-size:13px; line-height:1.5; }
.feature-editor-full figcaption small a { text-decoration:underline; text-underline-offset:3px; }
.feature-formatting-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:7%; margin-top:35px; }
.feature-formatting-notes>div { padding-top:25px; border-top:1px solid var(--rule); }
.feature-formatting-notes h3 { font-size:28px; margin-bottom:20px; }
.feature-close { display:grid; grid-template-columns:1.2fr .8fr; gap:13%; padding:70px 0 120px; border-top:1px solid var(--rule); align-items:center; }
.feature-close .eyebrow { color:var(--sage); margin-bottom:25px; font-size:15px; }
.feature-close h2 { font-size:clamp(45px,5.2vw,78px); margin-bottom:30px; }
.feature-close>div>p:last-child { max-width:31em; }
.feature-close>div>p a { text-decoration:underline; text-underline-offset:4px; }
.feature-purchase { padding:25px 32px 30px; border:1px solid var(--rule); background:var(--panel); border-radius:10px; }
.features-page .feature-price { display:flex; align-items:baseline; justify-content:center; gap:12px; color:var(--ink); font-size:17px; }
.feature-price strong { font:400 clamp(115px,12vw,190px)/1.15 var(--serif); letter-spacing:-.06em; }
.features-page .feature-purchase>p:nth-child(2) { font-size:16px; padding-block:15px 25px; line-height:1.6; }
.feature-actions { display:flex; flex-direction:column; gap:12px; }
.feature-actions .button { justify-content:space-between; }
.feature-demo-link { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px 0; font-size:15px; color:var(--muted); }
.feature-demo-link:hover { color:var(--signal); }
@media(min-width:1532px){.feature-controls-band { margin-inline:calc((1360px - 100vw)/2); }}
@media(max-width:1100px){
 .feature-opening-grid { grid-template-columns:1.6fr 1fr; gap:5%; }
 .features-page h1 { font-size:clamp(70px,9.4vw,110px); }
 .feature-overlay-grid { gap:4%; }
 .feature-sharing { gap:7%; padding:35px; }
 .feature-sharing-title { display:block; }
 .feature-sharing-title svg { margin-bottom:20px; }
 .feature-control-layout { gap:6%; grid-template-columns:1fr 1fr; }
 .feature-control-title { flex-wrap:wrap; }
 .feature-control-title h3 { flex-basis:100%; }
 .feature-close { gap:8%; }
 .feature-chapters>a { padding-inline:20px; font-size:18px; }
 .feature-chapters>a>span:last-child { right:15px; }
}
@media(max-width:760px){
 .feature-header-inner { min-height:76px; gap:10px; }
 .feature-header .wordmark { font-size:30px; }
 .feature-header-nav { display:none; }
 .feature-header-controls { margin-left:auto; gap:5px; }
 .feature-header-controls .button { gap:10px; padding:10px; font-size:13px; white-space:nowrap; }
 .feature-opening { padding-top:30px; }
 .feature-opening-top { margin-bottom:28px; font-size:12px; }
 .feature-opening-grid { grid-template-columns:1fr; gap:27px; }
 .features-page h1 { font-size:clamp(44px,14.3vw,87px); line-height:.99; }
 .features-page .feature-intro p { font-size:18px; max-width:34em; }
 .feature-intro .text-link { margin-top:12px; }
 .feature-product-scene { margin-top:24px; padding:15px 0 0; }
 .feature-stage-track { margin-bottom:10px; font-size:12px; }
 .feature-window-caption { padding:11px 12px; font-size:11px; gap:8px; }
 .feature-product-window { transform:none; }
 .feature-stage-bottom { align-items:flex-start; gap:15px; padding-top:7px; }
 .features-page .feature-stage-bottom p { font-size:14px; max-width:15em; }
 .feature-stage-bottom>a { font-size:14px; gap:9px; min-height:36px; }
 .feature-chapters { margin-top:35px; grid-template-columns:1fr; }
 .feature-chapters>a,.feature-chapters>a:first-child { padding:16px 0; border:0; border-bottom:1px solid var(--rule); font-size:19px; }
 .feature-chapters>a:last-child { border-bottom:0; }
 .feature-chapters>a>span:first-child { font-size:13px; margin-bottom:4px; }
 .feature-chapters>a>span:last-child { top:26px; right:4px; }
 .feature-overlay-chapter,.feature-formatting { padding-block:75px; }
 .feature-chapter-heading { grid-template-columns:1fr; gap:25px; margin-bottom:35px; }
 .features-page h2 { font-size:clamp(39px,9vw,62px); }
 .feature-chapter-heading>p { max-width:33em; }
 .feature-overlay-grid { grid-template-columns:1fr; gap:40px; }
 .feature-fact { display:grid; grid-template-columns:54px 1fr; column-gap:20px; padding-top:25px; }
 .feature-fact .feature-icon { width:44px; height:44px; grid-row:1/4; margin:0; }
 .feature-fact h3 { font-size:32px; margin-bottom:20px; }
 .feature-fact p,.feature-fact .feature-key { grid-column:2; }
.features-page main p { font-size:17px; }
 .feature-sharing { grid-template-columns:1fr; padding:28px 24px; gap:25px; margin-top:45px; }
 .feature-sharing-title { display:flex; gap:20px; }
 .feature-sharing-title svg { width:45px; height:45px; margin:0; }
 .feature-sharing-title h3 { font-size:29px; }
 .feature-key kbd { font-size:14px; padding:8px 11px; }
 .feature-controls-band { padding-block:65px 70px; }
 .feature-control-layout { display:block; }
 .feature-demo-sticky { top:0; z-index:5; background:#dbe6d5; padding:12px 0 14px; }
 .feature-demo-heading { padding:11px 14px; font-size:15px; }
 .feature-demo-screens { height:148px; aspect-ratio:auto; margin:14px 16px 0; }
 .feature-demo-reader { min-height:64px; padding:10px; top:20%; }
 .features-page [data-demo-words] { font-size:17px; }
 .feature-demo-screen>span { font-size:10px; top:6px; left:9px; }
 .feature-demo-feedback { padding:8px 13px; min-height:53px; }
 .features-page [data-demo-status] { font-size:13px; }
 .feature-demo-heading .feature-simulated { font-size:11px; }
 .feature-reset { font-size:12px; }
 .features-page .feature-demo-note { font-size:12px; margin-top:9px; line-height:1.5; }
 .feature-control-list>section { scroll-margin-top:418px!important; padding:30px 0; }
 .feature-control-title { flex-wrap:nowrap; align-items:center; }
 .feature-control-title h3 { flex-basis:auto; font-size:28px; }
 .feature-try { font-size:13px; gap:8px; padding:8px 12px; }
 .features-page .feature-detail { font-size:14px; }
 .feature-editor-stage { display:flex; flex-direction:column; gap:30px; padding-top:15px; }
 .feature-editor-detail { width:min(80%,330px); align-self:flex-start; margin-left:8px; }
 .feature-editor-detail figcaption { font-size:23px; }
 .feature-editor-detail figcaption br { display:none; }
 .feature-detail-label { font-size:12px; }
 .feature-editor-full { width:100%; }
 .feature-editor-full figcaption { font-size:14px; }
 .feature-formatting-notes { grid-template-columns:1fr; gap:28px; margin-top:4px; }
 .feature-formatting-notes h3 { font-size:27px; margin-bottom:15px; }
 .feature-close { grid-template-columns:1fr; gap:40px; padding:60px 0 80px; }
 .feature-close h2 { font-size:clamp(43px,9vw,68px); }
 .feature-purchase { padding:22px 26px; width:100%; }
 .feature-price strong { font-size:155px; }
}
@media(max-height:650px){
 .feature-demo-sticky { position:static; }
 .feature-control-list>section { scroll-margin-top:135px!important; }
}
@media(prefers-reduced-motion:reduce){
 .features-page { scroll-behavior:auto; }
 .features-page *, .features-page *::before, .features-page *::after { transition:none!important; animation:none!important; }
 .feature-product-window,.feature-editor-detail { transform:none; }
}