/* OliveCode: neutral surfaces; colour belongs to the existing pixel brand. */
:root { color-scheme: light dark; --surface:#171717; --panel:#202020; --text:#f0f0f0; --muted:#ababab; --accent:#78bf78; --line:#454545; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--text); }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
button,input { font:inherit; }
button,a,input,summary { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.shell { width:min(1080px,calc(100% - 64px)); margin-inline:auto; }
.nav { min-height:80px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.wordmark { display:inline-flex; align-items:center; gap:6px; font-size:21px; font-weight:550; letter-spacing:-.6px; }
.wordmark picture { display:flex; }
.nav nav,.footer nav { display:flex; gap:28px; }
.nav a,.footer a { min-height:44px; display:inline-flex; align-items:center; }
.nav nav { font-size:15px; color:var(--muted); }
.install-hero { padding-block:72px 70px; text-align:center; scroll-margin-top:24px; }
h1 { margin:0; font-weight:550; letter-spacing:-.035em; line-height:1.14; text-wrap:balance; }
.hero-logo { display:block; width:min(760px,85%); height:auto; margin-inline:auto; }
.intro { margin:34px 0 46px; font-size:clamp(22px,2.4vw,30px); font-weight:400; letter-spacing:-.025em; line-height:1.4; text-wrap:balance; }
.installer { text-align:left; max-width:1000px; margin-inline:auto; background:var(--panel); border:1px solid var(--line); border-radius:4px; }
.installer-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:60px; padding-inline:26px; border-bottom:1px solid var(--line); }
.os-switch { border:0; padding:0; margin:0; display:flex; gap:30px; }
.os-switch label { position:relative; cursor:pointer; }
.os-switch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; }
.os-switch span { display:flex; align-items:center; min-height:60px; padding-inline:3px; border-bottom:2px solid transparent; color:var(--muted); font-size:15px; }
.os-switch input:checked+span { color:var(--text); border-bottom-color:var(--text); }
.os-switch input:focus-visible+span { outline:2px solid var(--accent); outline-offset:4px; }
.os-switch label:hover span { color:var(--text); }
.shell-label { color:var(--muted); font-size:13px; }
.command-row { display:flex; align-items:center; gap:16px; padding:28px 26px 20px; }
code,#prompt-sign { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
#prompt-sign { color:var(--muted); font-size:18px; }
#install-command { font-size:clamp(14px,1.55vw,20px); line-height:1.65; overflow-wrap:anywhere; flex:1; min-width:0; }
#copy-command { flex:none; min-width:64px; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--text); font-size:14px; cursor:pointer; white-space:nowrap; transition:background-color .15s,color .15s,border-color .15s; }
#copy-command:hover:not(:disabled) { background:var(--text); color:var(--surface); border-color:var(--text); }
#copy-command:active:not(:disabled) { transform:translateY(1px); }
#copy-command:disabled { cursor:default; color:var(--muted); }
.install-status { margin:0; padding:0 26px 22px; color:var(--muted); font-size:13px; line-height:1.6; }
.next-step { margin:27px 0 8px; color:var(--muted); font-size:15px; line-height:1.8; }
.next-step code { color:var(--text); }
.guide-link { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.footer { display:flex; align-items:center; flex-wrap:wrap; gap:24px; color:var(--muted); font-size:13px; padding-block:20px; }
.footer nav { margin-inline:auto; }
.skip-link { position:absolute; top:-100px; left:20px; z-index:10; background:var(--panel); padding:14px; }
.skip-link:focus { top:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.subpage { min-height:calc(100dvh - 180px); padding-block:64px 80px; }
.policy { max-width:760px; }
.subpage h1 { font-size:clamp(34px,4vw,52px); }
.subpage .lead { font-size:20px; line-height:1.6; color:var(--muted); margin-block:24px 46px; }
.policy h2 { margin:38px 0 12px; font-size:20px; font-weight:550; letter-spacing:-.02em; }
.policy p { color:var(--muted); line-height:1.8; font-size:16px; }
.policy p a { color:var(--text); text-decoration:underline; text-underline-offset:4px; }
@media (prefers-color-scheme:light) { :root { --surface:#fafafa; --panel:#f2f2f2; --text:#202020; --muted:#626262; --accent:#2f713e; --line:#ababab; } }
@media (max-width:640px) {
 .shell { width:calc(100% - 36px); }
 .nav { min-height:72px; gap:14px; }
 .wordmark { font-size:19px; }
 .wordmark img { width:32px; height:auto; }
 .nav nav { gap:18px; font-size:14px; }
 .install-hero { padding-block:54px 46px; }
 .hero-logo { width:100%; }
 .intro { font-size:23px; margin:28px 0 34px; }
 .installer-bar { padding-inline:18px; }
 .os-switch { gap:22px; }
 .command-row { padding:24px 18px 17px; gap:10px; align-items:flex-start; }
 #copy-command { min-width:54px; padding-inline:8px; }
 #install-command { font-size:14px; }
 .install-status { padding-inline:18px; }
 .next-step { font-size:14px; margin-top:24px; }
 .footer { justify-content:center; gap:12px 22px; }
 .footer nav { order:-1; width:100%; justify-content:center; margin:0; gap:24px; }
 .subpage { padding-block:48px 56px; }
}
@media (max-width:360px) { .shell-label { display:none; } .nav nav { gap:12px; } .wordmark { gap:2px; font-size:18px; } }
@media (prefers-reduced-motion:reduce) { #copy-command { transition:none; } #copy-command:active:not(:disabled) { transform:none; } }
@media (forced-colors:active) { .os-switch input:checked+span { border-color:Highlight; } .installer,#copy-command { border-color:ButtonText; } }

/* An open grove, with a quiet centre for the useful part of the page. */
.grove-stage { position:relative; isolation:isolate; min-height:calc(100svh - 155px); overflow:clip; }
.grove-art { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.grove-trees { width:100%; height:100%; object-fit:cover; object-position:center bottom; transform:scale(1.025); }
#grove-canvas { position:absolute; inset:0; width:100%; height:100%; }
.grove-stage .install-hero { max-width:850px; padding-block:100px 150px; }
.grove-stage .hero-logo { width:min(640px,84%); }
.grove-stage .intro { font-family:Georgia,"Times New Roman",serif; font-size:clamp(25px,3vw,38px); letter-spacing:-.035em; margin-block:32px 40px; }
.grove-stage .installer { background:var(--panel); box-shadow:0 12px 40px #00000016; border-radius:8px; }
.grove-stage .next-step,.grove-stage .guide-link { background:var(--surface); border-radius:4px; }
.grove-stage .next-step { width:fit-content; margin-inline:auto; padding-inline:8px; }
.grove-stage .guide-link { padding-inline:10px; }
@media (prefers-reduced-motion:no-preference) {
 .grove-stage h1 { animation:arrive .8s both; }
 .grove-stage .intro { animation:arrive .8s .1s both; }
 .grove-stage .installer { animation:arrive .8s .2s both; }
 @keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
}
@media (max-width:1000px) {
 .grove-stage .install-hero { max-width:760px; padding-top:82px; }
 .grove-trees { opacity:.7; }
}
@media (max-width:640px) {
 .grove-stage { min-height:760px; }
 .grove-stage .install-hero { padding-block:50px 210px; }
 .grove-stage .hero-logo { width:100%; }
 .grove-stage .intro { font-size:27px; margin-block:27px 32px; }
 .grove-trees { object-fit:contain; object-position:center bottom; opacity:1; }
 .grove-art { top:470px; }
 #grove-canvas { height:100%; }
 .grove-stage .next-step { font-size:14px; }
}
@media (forced-colors:active) { .grove-art { display:none; } }

/* Match the approved grove study without shrinking the useful controls. */
body:has(.grove-stage) .nav { position:relative; z-index:2; }
body:has(.grove-stage) .nav { width:min(850px,calc(100% - 64px)); }
.grove-stage { margin-top:-80px; min-height:calc(100svh - 75px); }
.grove-stage .install-hero { padding-top:180px; }
.grove-stage .intro { font-weight:400; }
.grove-stage .installer { padding:12px; }
.grove-stage .installer-bar { padding:0; min-height:48px; border:0; }
.grove-stage .shell-label { display:none; }
.grove-stage .os-switch { width:100%; gap:6px; }
.grove-stage .os-switch label { flex:1; }
.grove-stage .os-switch span { min-height:48px; justify-content:center; border:1px solid var(--line); border-radius:5px; }
.grove-stage .os-switch input:checked+span { background:var(--line); color:var(--text); border-color:var(--muted); }
.grove-stage .command-row { margin-top:12px; border:1px solid var(--line); border-radius:5px; padding:22px 20px; }
.grove-stage .install-status { padding:12px 8px 2px; }
@media (prefers-color-scheme:dark) {
 .grove-stage .installer { background:#202020e8; box-shadow:0 14px 45px #00000030; }
 .grove-stage .next-step,.grove-stage .guide-link { background:#171717ed; }
 .grove-stage .os-switch input:checked+span { background:#353535; }
 .grove-stage .command-row { background:#17171780; }
}
@media (max-width:1000px) and (min-width:641px) { .grove-stage .install-hero { padding-top:162px; } }
@media (max-width:640px) {
 body:has(.grove-stage) .nav { width:calc(100% - 36px); }
 .grove-stage { margin-top:-72px; min-height:832px; }
 .grove-stage .install-hero { padding-top:122px; }
 .grove-art { top:542px; }
 .grove-trees { mask-image:linear-gradient(to bottom,transparent,#000 15%); }
 .grove-stage .command-row { padding:20px 12px; }
}

.product-section,.cost-section { padding-block:110px; display:grid; grid-template-columns: .85fr 1.35fr; gap:70px; align-items:center; }
.product-section h2,.cost-section h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,3.7vw,52px); font-weight:400; line-height:1.12; letter-spacing:-.04em; margin:0 0 38px; }
.benefits { margin:0; }
.benefits div+div { margin-top:28px; }
.benefits dt { font-size:18px; color:var(--text); margin-bottom:8px; }
.benefits dd { margin:0; color:var(--muted); font-size:15px; line-height:1.65; max-width:34ch; }
.product-shot { margin:0; min-width:0; }
.product-shot img { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:6px; background:#101519; }
.product-shot figcaption { color:var(--muted); font-size:12px; margin-top:14px; line-height:1.6; }
.product-shot figcaption a { display:inline-flex; align-items:center; min-height:44px; margin-inline-start:8px; text-decoration:underline; text-underline-offset:4px; }
.cost-section { border-top:1px solid var(--line); padding-block:90px; }
.cost-section p { color:var(--muted); font-size:16px; line-height:1.7; max-width:35ch; }
.cost-section .cost-context { font-size:13px; }
.cost-row+.cost-row { margin-top:27px; }
.cost-row>div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:16px; font-size:16px; }
.cost-row strong { font-size:25px; font-weight:400; white-space:nowrap; }
.cost-row small { font-size:12px; color:var(--muted); }
.cost-track { position:relative; height:5px; background:var(--line); margin-top:14px; border-radius:5px; }
.cost-track span { display:block; width:var(--amount); height:100%; border-radius:5px; background:var(--muted); }
.our-cost { color:var(--accent); }
.our-cost .cost-track i { display:block; width:7px; height:7px; border-radius:50%; position:absolute; top:-1px; background:var(--accent); }
.cost-section .chart-note,.cost-section .chart-sources { max-width:none; font-size:12px; line-height:1.6; margin-top:25px; }
.cost-section .chart-sources { margin-top:8px; }
.chart-sources a { text-decoration:underline; text-underline-offset:3px; }
.closing-link { padding:0 0 65px; text-align:center; }
.closing-link a { display:inline-flex; min-height:44px; align-items:center; color:var(--accent); }
.guide-language { background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:5px; min-height:44px; padding:8px 16px; margin-bottom:30px; cursor:pointer; }
.language-dialog { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:26px; width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; }
.language-dialog::backdrop { background:#0009; }
.language-heading { display:flex; gap:16px; align-items:center; justify-content:space-between; margin-bottom:20px; }
.language-heading h2 { margin:0; font-size:23px; font-weight:450; letter-spacing:-.03em; }
.dialog-close { background:transparent; color:var(--muted); border:0; min-height:44px; min-width:44px; font-size:28px; cursor:pointer; }
.language-dialog input { width:100%; padding:12px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--text); min-height:44px; }
.language-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-block:18px; }
.language-list button { text-align:start; background:var(--panel); color:var(--text); padding:12px 14px; border:1px solid transparent; border-radius:5px; min-height:46px; cursor:pointer; }
.language-list button[aria-pressed="true"] { border-color:var(--accent); }
.language-list button:hover { border-color:var(--muted); }
.language-list button[hidden],.language-empty[hidden] { display:none; }
.language-more { display:inline-flex; min-height:44px; align-items:center; color:var(--accent); font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.language-note,.language-empty { color:var(--muted); font-size:12px; line-height:1.6; margin-bottom:0; }
@media (prefers-reduced-motion:no-preference) {
 .reveal-ready { opacity:0; transform:translateY(18px); transition:opacity .65s,transform .65s; }
 .reveal-ready.revealed { opacity:1; transform:translateY(0); }
}
@media (max-width:850px) {
 .product-section,.cost-section { grid-template-columns:1fr; gap:35px; padding-block:65px; }
 .benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
 .benefits div+div { margin-top:0; }
 .product-section h2 br { display:none; }
 .cost-section h2 { margin-bottom:25px; }
}
@media (max-width:640px) {
 .product-section,.cost-section { padding-block:50px; }
 .benefits { grid-template-columns:1fr; gap:22px; }
 .benefits dd { max-width:none; }
 .language-dialog { padding:20px; }
 .language-heading h2 { font-size:21px; }
 .cost-row>div:first-child { font-size:14px; }
 .cost-row strong { font-size:22px; }
 .closing-link { padding-bottom:35px; }
}

/* The same grove continues into the product story, rather than ending at the hero. */
.botanical-chapter { position:relative; isolation:isolate; overflow:clip; color:#f0f0f0; background:#171717; --text:#f0f0f0; --muted:#bcbcb7; --accent:#9ac784; --line:#555650; }
.chapter-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; pointer-events:none; }
.product-section { display:block; padding-block:90px 65px; }
.product-inner { max-width:1120px; }
.product-copy { text-align:center; }
.product-section h2,.flow-chapter h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(36px,4.5vw,64px); font-weight:400; line-height:1.08; letter-spacing:-.045em; margin:0 0 22px; }
.product-section h2 span { white-space:nowrap; }
.chapter-lead { font-size:clamp(18px,1.9vw,24px); line-height:1.5; margin:0; color:#eeeae0; text-wrap:balance; }
.chapter-detail { color:var(--muted); font-size:15px; line-height:1.7; margin:14px 0 0; text-wrap:balance; }
.product-shot { width:min(840px,92%); margin:45px auto 30px; }
.product-shot img { border-color:#64685e; border-radius:8px; box-shadow:0 24px 45px #0008; }
.product-shot figcaption { text-align:center; background:#171717ee; width:fit-content; margin:12px auto 0; padding-inline:12px; border-radius:4px; }
.product-section .benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding:26px 30px; background:#171717ed; border-radius:6px; }
.product-section .benefits div+div { margin:0; border-inline-start:1px solid var(--line); padding-inline-start:28px; }
.product-section .benefits dt { font-family:Georgia,"Times New Roman",serif; font-size:22px; }
.product-section .benefits dd { max-width:none; font-size:14px; }
.flow-chapter { padding-block:95px 55px; }
.flow-chapter .chapter-art { object-position:right center; mask-image:linear-gradient(to bottom,#000 55%,#0003 82%,transparent); }
.flow-story { width:min(760px,75%); }
.flow-story .chapter-lead { font-size:22px; max-width:35ch; }
.flow-story .chapter-detail { max-width:53ch; }
.model-route { margin:38px 0 28px; position:relative; }
.model-route ol { display:flex; justify-content:space-between; gap:20px; list-style:none; padding:0; margin:0; }
.model-route li { width:30%; text-align:center; line-height:1.5; font-size:16px; position:relative; }
.route-node { display:block; width:58px; height:58px; margin:0 auto 16px; border:1px solid #8c9386; border-radius:50%; background:#1b221d; position:relative; }
.route-node::after { content:''; width:12px; height:12px; background:var(--accent); border-radius:50%; position:absolute; top:22px; left:22px; }
.route-node.waiting { background:#25231c; }
.route-node.waiting::after { background:#c6b389; border-radius:2px; transform:rotate(45deg); }
.route-node.next { border-color:var(--accent); background:#2d3927; }
.route-line { position:absolute; top:-12px; left:0; width:100%; height:80px; overflow:visible; }
.route-line path { fill:none; stroke:#89927f; stroke-width:1; }
.model-route figcaption { margin-top:25px; font-size:12px; color:var(--muted); line-height:1.65; max-width:53ch; }
.local-note { border-inline-start:2px solid var(--accent); padding-inline-start:18px; margin-top:30px; }
.local-note strong { font-weight:450; font-size:16px; }
.local-note p { color:var(--muted); font-size:14px; line-height:1.7; margin:6px 0 0; }
.flow-chapter .cost-section { margin-top:60px; padding:45px 0 0; grid-template-columns:.75fr 1.25fr; gap:70px; }
.flow-chapter h2.free-price { color:var(--accent); font-size:clamp(100px,12vw,170px); margin:0; line-height:1; }
.flow-chapter .free-label { font-family:Georgia,"Times New Roman",serif; font-size:25px; color:var(--text); margin:15px 0; }
.flow-chapter .cost-chart { background:#171717ed; padding:28px; border-radius:6px; }
.flow-chapter .chart-note { margin-top:23px; }
@media (prefers-reduced-motion:no-preference) {
 .product-shot a img { transition:transform .5s; }
 .product-shot a:hover img,.product-shot a:focus-visible img { transform:translateY(-4px); }
}
@media (max-width:850px) {
 .flow-story { width:100%; }
 .flow-chapter .chapter-art { opacity:.35; }
 .flow-chapter .cost-section { grid-template-columns:.65fr 1.35fr; gap:30px; }
 .product-section .benefits { padding:22px; gap:20px; }
 .product-section .benefits div+div { padding-inline-start:20px; }
}
@media (max-width:640px) {
 .product-section,.flow-chapter { padding-block:55px 40px; }
 .product-section h2 span { display:block; }
 .product-section .chapter-art { opacity:.55; object-position:center; }
 .product-shot { width:100%; margin-top:30px; }
 .product-shot figcaption { font-size:11px; padding:8px; }
 .product-section .benefits { grid-template-columns:1fr; gap:20px; padding:20px; }
 .product-section .benefits div+div { border-inline-start:0; border-top:1px solid var(--line); padding:18px 0 0; }
 .flow-story .chapter-lead { font-size:20px; }
 .model-route li { font-size:13px; }
 .model-route ol { gap:12px; }
 .route-node { width:44px; height:44px; }
 .route-node::after { top:16px; left:16px; width:10px; height:10px; }
 .route-line { top:-19px; }
 .flow-chapter .cost-section { grid-template-columns:1fr; gap:25px; margin-top:35px; padding-top:30px; }
 .flow-chapter .cost-chart { padding:20px; }
}

/* Product cues and a common-scale subscription comparison. */
.product-section .chapter-art { opacity:.78; }
.flow-chapter .chapter-art { opacity:.7; }
.task-example { display:flex; align-items:center; gap:20px; width:min(840px,92%); margin:0 auto 32px; padding:18px 22px; background:#111718f5; border:1px solid #45514a; border-radius:6px; box-shadow:0 12px 30px #0004; }
.task-example>span:first-child { color:#9ac784; font-size:12px; white-space:nowrap; }
.task-example code { color:#edece8; font-size:14px; line-height:1.6; }
.task-arrow { margin-inline-start:auto; color:#9ac784; }
.flow-chapter .cost-section { display:block; padding-top:70px; margin-top:70px; }
.cost-heading { margin-bottom:35px; }
.cost-heading .cost-context { max-width:65ch; margin-top:14px; }
.cost-heading h2 span { white-space:nowrap; }
.comparison { --label-width:270px; --value-width:135px; margin:0; padding:38px; border:1px solid #3d423d; border-radius:16px; background:#151717f5; box-shadow:0 20px 60px #0003; }
.comparison-rows { position:relative; }
.comparison-rows::before { content:''; position:absolute; top:0; bottom:0; left:var(--label-width); right:var(--value-width); border-left:1px solid #616960; border-right:1px solid #3c423b; background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),#363c36 calc(25% - 1px),#363c36 25%); pointer-events:none; }
.comparison-row { display:grid; grid-template-columns:var(--label-width) minmax(0,1fr); gap:0; align-items:center; min-height:104px; }
.comparison-label { display:flex; gap:16px; align-items:center; padding-inline-end:20px; }
.comparison-label strong { display:block; font-size:20px; font-weight:500; line-height:1.3; }
.comparison-label small { display:block; color:#b4b9b1; font-size:12px; line-height:1.6; margin-top:5px; }
.brand-icon { display:grid; place-items:center; flex:none; width:48px; height:48px; background:#1e2221; border:1px solid #3f4640; border-radius:10px; }
.brand-icon img { filter:invert(1); }
.olive-icon img { filter:none; }
.claude-icon { background:#cc7655; border-color:#cc7655; }
.claude-icon img { filter:invert(1); }
.comparison-data { position:relative; width:calc(100% - var(--value-width)); height:42px; }
.price-bar { display:block; height:100%; width:var(--amount); border-radius:0 7px 7px 0; background:linear-gradient(90deg,#633932,#d2755d); position:relative; }
.year-price { position:absolute; inset-inline-start:calc(var(--amount) + 16px); top:50%; transform:translateY(-50%); white-space:nowrap; font-weight:500; font-size:24px; line-height:1.2; }
.year-price small { font-size:14px; color:#aaa; font-weight:400; }
.olive-row .comparison-label strong,.olive-row .year-price { color:#a9d395; }
.olive-row .price-bar { width:3px; background:#a9d395; box-shadow:0 0 20px #9ac78455; border-radius:2px; }
.comparison-axis { display:flex; justify-content:space-between; margin:10px var(--value-width) 0 var(--label-width); padding-top:12px; border-top:1px solid #505a4f; color:#a4ada0; font-size:12px; }
.comparison-axis span { transform:translateX(50%); }
.comparison-axis span:first-child { transform:translateX(-50%); }
.comparison figcaption { margin-top:30px; border-top:1px solid #343934; padding-top:20px; }
.comparison .chart-note { margin:0; max-width:90ch; }
.comparison .chart-sources { margin-bottom:0; }
@media (max-width:850px) {
 .comparison { --label-width:215px; --value-width:115px; padding:26px; }
 .comparison-label { gap:12px; }
 .comparison-label strong { font-size:17px; }
 .year-price { font-size:21px; }
 .year-price small { font-size:12px; }
 .flow-chapter .chapter-art { opacity:.3; }
}
@media (max-width:640px) {
 .task-example { width:100%; gap:12px; padding:16px; flex-wrap:wrap; }
 .task-example code { width:calc(100% - 30px); font-size:12px; }
 .task-example>span:first-child { width:100%; }
 .task-arrow { margin:0; }
 .product-section .chapter-art { opacity:.5; }
 .flow-chapter .cost-section { margin-top:45px; padding-top:45px; }
 .cost-heading h2 span { display:block; }
 .comparison { --label-width:0px; --value-width:100px; padding:20px; border-radius:12px; }
 .comparison-rows::before { display:none; }
 .comparison-row { display:block; min-height:0; padding-block:15px; }
 .comparison-row+.comparison-row { margin-top:12px; }
 .comparison-label { margin-bottom:18px; padding:0; }
 .brand-icon { width:38px; height:38px; border-radius:8px; }
 .brand-icon img { max-width:28px; max-height:28px; }
 .comparison-label strong { font-size:17px; }
 .comparison-label small { font-size:11px; }
 .comparison-data { height:28px; border-left:1px solid #616960; }
 .year-price { font-size:19px; inset-inline-start:calc(var(--amount) + 10px); }
 .comparison-axis { display:none; }
 .comparison figcaption { margin-top:12px; }
}

/* Let the grove artwork dissolve into the site's charcoal between chapters. */
.grove-stage { position:relative; }
.grove-stage::after {
 content:'';
 position:absolute;
 z-index:1;
 inset-inline:0;
 bottom:-1px;
 height:clamp(150px,24vh,280px);
 background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--surface) 40%,transparent) 48%,var(--surface) 100%);
 pointer-events:none;
}
.grove-stage .install-hero { position:relative; z-index:2; }
.product-section .chapter-art,
.flow-chapter .chapter-art {
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 80%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 80%,transparent 100%);
}

/* A phone-to-computer vignette in the existing olive-grove story. */
.remote-chapter { padding-block:95px 80px; background:radial-gradient(ellipse at 70% 35%,#343b2b55,transparent 55%),#171717; }
.remote-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; }
.feature-kicker { color:#b8ceaa; font-size:12px; letter-spacing:.06em; margin:0 0 24px; }
.remote-copy h2 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(40px,4.5vw,65px); line-height:1.09; letter-spacing:-.045em; font-weight:400; margin:0 0 26px; }
.remote-copy h2 em { color:#bcd4a8; font-style:normal; }
.remote-copy .chapter-detail { max-width:40ch; text-wrap:pretty; }
.feature-link { display:inline-flex; gap:28px; align-items:center; margin-top:26px; padding-block:12px; color:#e6eddf; text-decoration:underline; text-underline-offset:6px; }
.remote-requirement { color:#b3b7ad; font-size:12px; line-height:1.7; max-width:40ch; margin-top:14px; }
.remote-scene { position:relative; margin:0; min-width:0; height:590px; }
.remote-desktop { position:absolute; top:65px; left:0; width:90%; min-height:255px; border:1px solid #555e51; border-radius:12px; background:#101718; box-shadow:0 25px 65px #0005; overflow:hidden; transform:rotate(-3deg); }
.demo-titlebar { display:flex; gap:10px; align-items:center; padding:15px 18px; font:12px ui-monospace,monospace; border-bottom:1px solid #343d37; color:#d7dfd1; }
.demo-olive { color:#a8ce8c; font-size:20px; }
.demo-status { margin-left:auto; color:#b5d79f; font-size:10px; }
.demo-document { padding:25px 22px 35px; }
.document-title { color:#aeb7aa; font-size:11px; }
.demo-document p { color:#f0e9db; font:clamp(13px,1.5vw,19px) ui-monospace,monospace; margin:25px 0 30px; white-space:nowrap; }
.document-note { color:#93ac89; font:10px ui-monospace,monospace; }
.demo-caret { display:inline-block; height:1.1em; width:1px; background:#acd394; vertical-align:middle; margin-left:3px; }
.remote-phone { position:absolute; right:0; top:160px; width:235px; border:5px solid #494b42; border-radius:30px; padding:13px 13px 24px; background:#21251f; color:#eeeae0; box-shadow:0 22px 55px #0008,inset 0 0 0 1px #777a6744; transform:rotate(3deg); }
.phone-speaker { width:54px; height:5px; border-radius:5px; background:#10130f; margin:0 auto 16px; }
.phone-header { display:flex; gap:9px; align-items:center; font-size:13px; padding:0 3px 14px; border-bottom:1px solid #42483b; }
.phone-header small { display:block; color:#a6b39c; font-size:10px; margin-top:3px; }
.phone-messages { display:grid; gap:13px; padding-top:16px; }
.phone-message { font-size:12px; line-height:1.6; padding:12px; margin:0; border-radius:13px; }
.phone-message.sent { margin-left:14px; background:#3d5035; border-bottom-right-radius:3px; }
.phone-message.received { margin-right:14px; background:#30352b; border-bottom-left-radius:3px; }
.phone-approval { padding:0 9px; }
.phone-approval>span,.phone-approval small { display:block; font-size:10px; color:#bac4b0; }
.phone-approval strong { display:block; border:1px solid #6c815b; border-radius:7px; padding:9px 10px; margin-block:7px; font-size:12px; font-weight:500; color:#d4e9be; background:#34452b; }
.remote-scene figcaption { position:absolute; bottom:0; left:0; right:0; text-align:center; color:#aaaFA4; font-size:11px; line-height:1.6; }
.control-story { margin-top:65px; padding-top:45px; border-top:1px solid #3a4235; }
.control-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.control-heading h3 { font:400 clamp(25px,3vw,36px)/1.2 Georgia,serif; letter-spacing:-.025em; margin:0; }
.control-heading p { font-size:13px; color:#bcbcb7; }
.control-picker { display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:28px 0 24px; }
.control-picker label { position:relative; cursor:pointer; }
.control-picker input { position:absolute; opacity:0; width:1px; height:1px; }
.control-picker span { display:block; padding:12px 19px; border:1px solid #50594a; border-radius:30px; font-size:13px; color:#bfc7b8; }
.control-picker input:checked+span { background:#d3dfc5; color:#20291b; border-color:#d3dfc5; }
.control-picker input:focus-visible+span { outline:2px solid #c7e1af; outline-offset:4px; }
.control-description { min-height:112px; max-width:730px; }
.control-description strong { color:#eeeae0; font-size:19px; font-weight:450; }
.control-description p { color:#bcbcb7; font-size:15px; line-height:1.7; margin:12px 0; }
.control-safety { display:grid; grid-template-columns:1.6fr 1fr; gap:45px; color:#bcbcb7; font-size:12px; line-height:1.8; margin-top:18px; }
.control-safety strong { color:#d5e1c9; font-weight:500; }
.control-safety a { color:#d5e1c9; white-space:nowrap; }
.control-safety code { color:#e1e8d9; }
@media(prefers-reduced-motion:no-preference) {
 .remote-scene.revealed .remote-phone { animation:phone-arrive .9s cubic-bezier(.2,.7,.2,1) both; }
 .remote-scene.revealed .remote-desktop { animation:desktop-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
 @keyframes phone-arrive { from { opacity:0; transform:translateY(25px) rotate(6deg); } to { opacity:1; transform:translateY(0) rotate(3deg); } }
 @keyframes desktop-arrive { from { opacity:0; transform:translateY(15px) rotate(-5deg); } to { opacity:1; transform:translateY(0) rotate(-3deg); } }
}
@media(max-width:850px) {
 .remote-layout { grid-template-columns:1fr; gap:10px; }
 .remote-copy { max-width:600px; }
 .remote-scene { width:min(510px,100%); margin-inline:auto; height:560px; }
 .remote-desktop { top:35px; }
 .remote-phone { top:125px; }
 .control-heading { display:block; }
}
@media(max-width:640px) {
 .remote-chapter { padding-block:60px 45px; }
 .remote-scene { height:560px; }
 .remote-desktop { top:35px; width:95%; }
 .demo-titlebar { padding:12px; font-size:10px; }
 .demo-document { padding:20px 14px; }
 .demo-document p { font-size:12px; }
 .remote-phone { width:215px; top:125px; right:3px; }
 .control-story { margin-top:40px; padding-top:30px; }
 .control-picker span { padding:12px 13px; font-size:12px; }
 .control-safety { grid-template-columns:1fr; gap:0; }
 .control-description { min-height:150px; }
}

.policy h2[id] { scroll-margin-top:36px; }
.remote-commands { overflow-x:auto; background:var(--surface); border:1px solid var(--line); padding:18px; border-radius:8px; font-size:13px; line-height:1.9; direction:ltr; text-align:left; }

/* Public launch details: wider footer, readable long addresses, stable figures. */
.footer nav { flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.policy a { overflow-wrap:anywhere; }
.year-price,.comparison-axis { font-variant-numeric:tabular-nums; }
.language-dialog { overscroll-behavior:contain; }