/* Fonts are subset (latin plus the symbols the demo uses) and content-hashed for immutable caching.
   The hero headline gets its own tiny preloaded subset; the metric-matched local fallbacks keep a swap from shifting layout. */
@font-face{font-family:'Caveat Brush Hero';src:url('assets/fonts/caveat-brush-hero-05d7d1ca.woff2') format('woff2');font-display:swap}
/* 'Caveat Brush' (latin, 61KB) is added by load.js as the final CTA approaches the viewport. */
@font-face{font-family:Geist;src:url('assets/fonts/geist-latin-4cfe3bfa.woff2') format('woff2');font-display:swap;font-weight:100 900}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/geist-mono-regular-12157787.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/geist-mono-medium-917e9127.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Caveat Brush Fallback';src:local('Arial');size-adjust:77.11%;ascent-override:124.49%;descent-override:38.9%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';src:local('Arial');size-adjust:103.07%;ascent-override:97.51%;descent-override:28.62%;line-gap-override:0%}
@font-face{font-family:'Geist Mono Fallback';src:local('Courier New');size-adjust:99.98%;ascent-override:100.52%;descent-override:29.5%;line-gap-override:0%}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */
/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 1280px; /* GOAT: the base never drops below 14.2px, so the 12px floors on labels and buttons keep scaling with everything else */
  --size-container-max: 1600px; /* GOAT: capped from Osmo's 1920 so large screens stay compact */
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}
/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}
/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}
/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* GOAT site in the original AFTERHORN Lichen identity (design-reference/DESIGN.md): forest-black
   ground, bone ink, lichen signal, Caveat Brush marketing headlines beside Geist prose and mono
   plate labels, Osmo Button 088 pills. Layout stays product-first: centred hero, demo, sections.
   Every size is em on the Osmo base (1em = 16 design px); only 1px rules stay px. Small text is
   floored at 12px with max(); targets are at least 24px (44px on coarse pointers). */
:root{
  --ground:#101512;--panel:#171f19;--raised:#1c251e;
  --text:#edece0;--muted:#b4baaf;--faint:#9da394;
  --line:#edece033;--line-soft:#edece01f;
  --accent:#d4f77d;--accent-ink:#101512;
  --display-font:'Caveat Brush','Caveat Brush Fallback',Geist,serif;--body-font:Geist,'Geist Fallback',system-ui,sans-serif;--mono-font:'Geist Mono','Geist Mono Fallback',ui-monospace,monospace;
  --gutter:5em;--section:5em;--header:5em;--target:24px;
  --ease:cubic-bezier(.625,.05,0,1)
}
@media(pointer:coarse){
  :root{--target:44px}
  /* Short footer links get a 44px wide hit area; the negative margin keeps the row on the text edge. */
  .footer-links{gap:.5em;margin-inline:-.5em}
  .footer-links a{justify-content:center;min-width:44px;padding-inline:.5em}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  .wordmark{min-width:44px}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
/* The open menu holds the page still. The scrollbar it drops is given back as padding (and the nav
   keeps clear of it), so nothing shifts. scrollbar-gutter would also change 100vw and with it the
   whole Osmo scale. !important beats Lenis' .lenis-stopped{overflow:clip}. */
html[data-menu-open]{overflow:hidden!important;padding-right:var(--scrollbar-width,0px)}
html[data-menu-open] .nav{right:var(--scrollbar-width,0px)}
body{text-transform:lowercase;margin:0;background:var(--ground);color:var(--text);font-family:var(--body-font);font-size:var(--size-font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p,figure,pre{margin:0}
h1,h2{font-family:var(--display-font);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
h3{font-size:inherit;font-weight:500}
a{color:inherit;text-decoration:none}
button,input,textarea,select{text-transform:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation;outline-offset:4px}
:focus-visible{outline:2px solid var(--accent);border-radius:.25em}
::selection{background:var(--accent);color:var(--accent-ink)}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.container{width:100%;max-width:var(--size-container);margin-inline:auto;padding-inline:var(--gutter)}
.container.medium{max-width:calc(var(--size-container) * .85)}
.container.small{max-width:calc(var(--size-container) * .7)}
.mono{font-family:var(--mono-font);font-size:max(12px,.75em);font-weight:500;line-height:1.6;letter-spacing:.02em;text-transform:lowercase}
.skip{position:fixed;top:-6em;left:1em;z-index:100;background:var(--accent);color:var(--accent-ink);padding:.5em .875em;border-radius:2.5em;font-size:max(13px,.8125em)}
.skip:focus{top:.75em}
/* Inline links get a box at least --target tall. */
.wordmark,.footer-links a,.footer-bottom a{display:inline-flex;align-items:center;min-height:var(--target)}
/* The goat mark from the app sits beside the wordmark, as it does in the app title bar. */
.wordmark{gap:.5em}
.wordmark-mark{width:1.375em;height:1.375em}

/* Osmo Button 088: lichen pill, the dot in the icon well grows into a disc behind the arrow on
   hover (.45s), and the pill squashes on press. Exact padding, gap, radius and icon size. */
.button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:.375em;min-height:max(var(--target),3em);padding:.625em 1.125em;border:1px solid var(--accent);border-radius:.375em;background:var(--accent);color:var(--accent-ink);font-size:max(12px,.875em);font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;transition:scale .15s var(--ease)}
.button-label{position:relative;z-index:2}
.button:active{scale:.955 .925}
.button:focus-visible{outline:2px solid var(--accent);outline-offset:.25em}
.button--small{font-size:max(12px,.75em)}
.text-link{display:inline-flex;align-items:center;gap:.75em;min-height:44px;color:var(--accent)}
.text-link svg{width:1.3333em;height:1.3333em;transition:transform .45s var(--ease)}

/* Navigation: Osmo two-step-scaling-navigation, ported from the API site nav to vanilla and to
   transform and opacity only. Closed: a compact bar (menu key, wordmark, download pill) over a ticker
   of status words, floating over the hero art with no band behind it. Open: the bar's two halves
   slide out to the container width, then the panel drops under it (scaleY) and its columns rise in.
   Timings are Osmo's: grow at 0s, drop at .25s, columns at .5s / .575s / .65s; closing reverses.
   The halves and the key/pill translate by --nav-shift, half the gap between the container (100cqw)
   and the compact width. No backdrop-filter: a blur would re-rasterise the WebGL hero every frame. */
.nav{--nav-compact:32em;--nav-top:4em;--nav-r:1em;--nav-shift:max(0px,(100cqw - var(--nav-compact)) / 2);position:fixed;inset:0;z-index:30;pointer-events:none}
.nav-overlay{position:absolute;inset:0;background:#101512c4;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.nav[data-nav-status=active] .nav-overlay{opacity:1;visibility:visible;pointer-events:auto}
.nav-wrap{position:absolute;top:0;left:0;width:100%;will-change:transform}
/* Once the page moves, a ground fade sits behind the bar and ticker so content never shows through. */
.nav-wrap:before{content:'';position:absolute;inset:0 0 -1.5em;z-index:-1;background:linear-gradient(var(--ground) 0 72%,#10151200);opacity:0;transition:opacity .3s}
.nav.is-scrolled .nav-wrap:before{opacity:1}
.nav-width{container-type:inline-size;display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--size-container);margin-inline:auto;padding:1em var(--gutter) 0}
.nav-bar{position:relative;width:100%;height:var(--nav-top)}
/* Each half lives in a container that clips it at the centre line, so translating the halves in
   narrows the visible bar to the compact width without scaling borders or corners. */
.nav-halves{position:absolute;inset:0;pointer-events:none}
.nav-halves>span{position:absolute;top:0;bottom:0;width:calc(50% + 1px);overflow-x:clip}
.nav-halves>span:first-child{left:0}
.nav-halves>span:last-child{right:0}
.nav-halves i{position:absolute;inset:0;background:var(--panel);border:1px solid var(--line);transition:translate .75s var(--ease) .2s,scale .5s var(--ease)}
.nav-halves>span:first-child i{border-right:0;translate:var(--nav-shift) 0}
.nav-halves>span:last-child i{border-left:0;translate:calc(var(--nav-shift) * -1) 0}
.nav-back>span:first-child i{border-radius:var(--nav-r) 0 0 var(--nav-r)}
.nav-back>span:last-child i{border-radius:0 var(--nav-r) var(--nav-r) 0}
/* The drop starts under the bar's rounded foot so the two read as one sheet when open. */
.nav-drop{inset:calc(var(--nav-r) * -1) 0 0;z-index:-1}
.nav-drop i{border-top:0;scale:1 0;transform-origin:50% 0}
.nav-drop>span:first-child i{border-radius:0 0 0 var(--nav-r)}
.nav-drop>span:last-child i{border-radius:0 0 var(--nav-r) 0}
.nav[data-nav-status=active] :is(.nav-halves i,.nav-start,.nav-end){translate:none;transition:translate .5s var(--ease),scale .75s var(--ease) .25s}
.nav[data-nav-status=active] .nav-drop i{scale:1 1}
.nav-top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.75em;height:100%;padding:0 .625em;pointer-events:auto}
.nav-start,.nav-end{display:flex;transition:translate .75s var(--ease) .2s}
.nav-start{justify-self:start;translate:var(--nav-shift) 0}
.nav-end{justify-self:end;translate:calc(var(--nav-shift) * -1) 0}
.nav-top-line{position:absolute;left:.625em;right:.625em;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .5s var(--ease)}
.nav[data-nav-status=active] .nav-top-line{opacity:1;transition-delay:.1s}
.nav-toggle{display:inline-flex;align-items:center;gap:.625em;min-height:max(var(--target),2.75em);padding:0 .9375em 0 .8125em;border:1px solid var(--line);border-radius:2.5em;background:transparent;font-family:var(--mono-font);font-size:max(12px,.75em);font-weight:500;letter-spacing:.02em;text-transform:lowercase;color:var(--text);transition:border-color .2s}
.nav-toggle-bars{position:relative;display:block;width:1.3333em;height:1em}
.nav-toggle-bars i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.nav-toggle-bars i:first-child{top:.25em}
.nav-toggle-bars i:last-child{top:.6667em}
.nav[data-nav-status=active] .nav-toggle{border-color:var(--accent)}
.nav[data-nav-status=active] .nav-toggle-bars i:first-child{transform:translateY(.2083em) rotate(45deg)}
.nav[data-nav-status=active] .nav-toggle-bars i:last-child{transform:translateY(-.2083em) rotate(-45deg)}
.nav-top .wordmark{padding-inline:.25em}
.nav-end .button{min-height:max(var(--target),2.6667em);padding-block:.4em}
.nav-bottom{position:absolute;z-index:1;top:var(--nav-top);left:0;right:0;visibility:hidden;transition:visibility 0s linear 1s}
.nav[data-nav-status=active] .nav-bottom{visibility:visible;transition-delay:0s}
.nav-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.9fr);gap:1em;max-height:calc(100dvh - var(--nav-top) - 2em);overflow-y:auto;overscroll-behavior:contain;padding:1.25em .875em 1em;pointer-events:auto}
.nav-col{display:flex;flex-direction:column;gap:.75em;min-width:0;opacity:0;translate:0 2em;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.nav-col:nth-child(2){transition-delay:.075s}
.nav[data-nav-status=active] .nav-col{opacity:1;translate:none;transition-duration:.75s;transition-delay:.5s}
.nav[data-nav-status=active] .nav-col:nth-child(2){transition-delay:.575s}
.nav[data-nav-status=active] .nav-col:nth-child(3){transition-delay:.65s}
.nav-routes{padding:1.25em 1.375em .5em;border:1px solid var(--line-soft);border-radius:.75em;background:var(--ground)}
.nav-routes ul{margin:0;padding:0;list-style:none}
.nav-routes li+li{border-top:1px solid var(--line-soft)}
.nav-route{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25em 1em;min-height:max(var(--target),3.25em);padding:.625em 0}
.nav-route-label{position:relative;font:500 1.5em/1.1 var(--body-font);letter-spacing:-.025em;transition:color .2s}
.nav-route-line{font-size:max(12px,.8125em);color:var(--muted)}
.nav-route[aria-current] .nav-route-label{color:var(--accent)}
.nav-get{gap:1em;padding:1.25em .5em}
.nav-get .button{align-self:flex-start}
.nav-note{font-size:max(12px,.875em);color:var(--muted)}
.nav-small-links{display:flex;flex-direction:column;align-items:flex-start}
.nav-feature-card{display:flex;flex-direction:column;gap:.875em;height:100%;padding:1.375em;border:1px solid var(--accent);border-radius:.75em;background:radial-gradient(#d4f77d38 1px,transparent 1.4px) 0 0/.75em .75em,var(--raised)}
.nav-feature-title{font:500 1.5em/1.15 var(--body-font);letter-spacing:-.025em;color:var(--text)}
.nav-feature-copy{color:var(--text)}
.nav-feature-cta{display:flex;align-items:center;justify-content:center;min-height:max(var(--target),2.75em);margin-top:auto;border:1px solid var(--accent);border-radius:2.5em;font-size:max(12px,.875em);font-weight:500;color:var(--accent);transition:background .2s,color .2s}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Hero: Orca's structure in the GOAT world. A centred brush headline, a Geist subline, Download
   beside GitHub and the installer facts, then the product showcase at the full container width.
   The spectral goat (dither.js) fills the first screen behind the copy; a scrim under the copy keeps
   it readable and the art fades out behind the top of the showcase. */
.hero{position:relative;isolation:isolate;overflow-x:clip;padding-top:calc(var(--header) + 4em);padding-bottom:var(--section)}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:4.5em}
.hero-copy{display:flex;flex-direction:column;align-items:center;max-width:52em;text-align:center}
.hero-art{position:absolute;z-index:-1;inset:0 0 auto;height:calc(var(--header) + 46em);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000 50%,transparent 96%);mask-image:linear-gradient(#000 50%,transparent 96%)}
.hero-poster,.hero-dither{position:absolute;inset:0;width:100%;height:100%}
.hero-poster{object-fit:cover;object-position:75% 30%;filter:saturate(.85) brightness(.55)}
.hero-dither{opacity:.6}
/* The dither canvases render one cell per pixel (dither.js); upscale them as pixel art. */
.hero-dither canvas,.demo-field canvas,.footer-dither{image-rendering:pixelated}
.hero[data-dither-status=ready] .hero-poster{visibility:hidden}
.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#101512a6 0,#10151200 calc(var(--header) + 3em)),radial-gradient(ellipse 34em 17em at 50% calc(var(--header) + 13em),#101512f0 0%,#101512cc 55%,#10151200 100%),linear-gradient(0deg,#101512 0%,#10151200 40%)}
.hero h1{font-family:'Caveat Brush Hero',var(--display-font);font-size:4.5em;line-height:.98;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.hero h1>span{display:block}
.hero-h1-accent{color:var(--accent)}
.hero-sub{max-width:34em;margin-top:1.3333em;font-size:1.125em;line-height:1.55;color:var(--muted);text-wrap:pretty}
.hero .cta-row{gap:.75em;margin-top:2.25em}
.hero .button{flex-shrink:0}
.button--ghost{border-color:var(--line);background:transparent;color:var(--text);transition:scale .15s var(--ease),border-color .2s}
/* Installer facts and the signing note sit under every download button. */
.install-facts{margin-top:1.1667em;font:500 max(12px,.75em)/1.5 var(--mono-font);letter-spacing:.02em;color:var(--faint)}
.install-warn{margin-top:.25em;font-size:max(12px,.8125em);color:var(--muted)}
.install-warn a{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.accordion-content a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5em;margin-top:1.75em}

/* Sections: 5em padding everywhere. Headings are Geist, a tool's voice; the brush is kept for the
   hero and the closing call to download. */
.section{padding-block:var(--section);border-top:1px solid var(--line)}
.section-head{max-width:45em}
.section h2{font-family:var(--body-font);font-size:3em;font-weight:500;line-height:1.05;letter-spacing:-.035em}
.section h2 em{font-style:normal;color:var(--muted)}
.final-cta h2{font-family:var(--display-font);font-size:4em;font-weight:400;line-height:.98;letter-spacing:-.02em}
.final-cta h2 em{color:var(--accent)}
.lede{margin-top:1.3333em;font-size:1.125em;line-height:1.55;color:var(--muted);max-width:32em}
/* FAQ: one column under its heading, at a reading width. */
.split{display:grid;gap:2.5em}
.split>*{max-width:48em}
.split>.faq-list{margin-top:.75em}

/* Workflow: Osmo step-by-step-timeline. A lichen line draws through the three markers as you
   scroll (horizontal across the three columns on desktop, vertical on the left below 992px). Without
   JavaScript, paused or under reduced motion the line is full and every marker is lit (end state). */
.journey{position:relative;margin-top:2.5em}
.journey-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2em;margin:0;padding:0;list-style:none}
.journey-step{display:flex;flex-direction:column}
/* Desktop: the three steps share row lines, so every terminal card starts on one top edge
   however long its step copy runs. */
@media screen and (min-width:992px){.journey-steps{grid-template-rows:auto 1fr;row-gap:0}.journey-step{display:grid;grid-row:span 2;grid-template-rows:subgrid}}
.journey__line{position:absolute;z-index:0;top:1.5em;left:1.5em;right:calc((100% - 4em) / 3 - 1.5em);height:1px;background:var(--line);pointer-events:none}
.journey__fill{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;will-change:transform}
.journey__marker{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:max(36px,3em);height:max(36px,3em);border:1px solid var(--accent);border-radius:50%;background:var(--accent);color:var(--accent-ink);letter-spacing:0;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
[data-step-timeline-item][data-status=inactive] .journey__marker{background:var(--ground);color:var(--muted);border-color:var(--line)}
[data-step-timeline-item][data-current] .journey__marker{outline:1px solid var(--accent);outline-offset:.3125em}
.journey-step h3{margin-top:1em;font-size:1.375em;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.step-copy>p{margin-top:.5em;font-size:1em;color:var(--muted)}
/* Each step links to its scene in the demo, so the section explains the demo instead of repeating it. */
.step-copy{display:flex;flex-direction:column;align-items:flex-start}
.step-scene{display:inline-flex;align-items:center;min-height:var(--target);margin-top:.5em;font-size:max(12px,.875em);color:var(--accent);text-decoration:underline;text-decoration-color:#d4f77d59;text-underline-offset:4px}


/* Elastic dividers (Osmo elastic-line) between the major sections. */
.divider{color:var(--line)}
.elastic-line{display:block;width:100%;height:1px;overflow:visible}
.divider+.section{border-top:0}


/* Footer: a quiet dithered goat beside the wordmark, links and footnotes. */
.footer-wrap{position:relative;overflow:hidden}
.footer-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%)}
.footer-poster,.footer-dither{position:absolute;inset:0;width:100%;height:100%}
.footer-dither{object-fit:cover;object-position:75% 30%}
.footer-poster{object-fit:cover;object-position:70% 30%;filter:saturate(.85) brightness(.35)}
.footer-dither{opacity:.4}
/* Keep the link rows on plain panel: the goat only shows beside the sign-off. */
.footer-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--panel) 0%,var(--panel) 22%,#171f1900 60%)}
[data-goat-footer][data-dither-status=ready] .footer-poster{visibility:hidden}
.footer-inner{position:relative}

/* FAQ: fieldnotes accordions (Osmo accordion-css-animation). */
.faq-list{border-top:1px solid var(--line)}
.accordion{border-bottom:1px solid var(--line)}
.accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:.9412em;width:100%;min-height:3.5294em;padding:.8824em 0;border:0;background:transparent;text-align:left;font-size:1.0625em;font-weight:400;letter-spacing:-.01em}
.accordion-icon{position:relative;width:.7059em;height:.7059em;flex-shrink:0}
.accordion-icon:before,.accordion-icon:after{content:'';position:absolute;top:calc(50% - .5px);left:0;width:100%;height:1px;background:currentColor}
.accordion-icon:after{transform:rotate(90deg);transition:transform .6s var(--ease)}
.accordion-trigger[aria-expanded=true] .accordion-icon:after{transform:rotate(0)}
.accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.accordion[data-accordion-status=active] .accordion-panel{grid-template-rows:1fr}
.accordion-clip{overflow:hidden;min-height:0}
.accordion-content{padding-bottom:1.5em}
.accordion-content p{max-width:38em;color:var(--muted)}

/* Final CTA */
.final-cta{text-align:center}
.final-cta .lede{margin-inline:auto}
.final-cta .cta-row{margin-top:2em}

/* Footer */
.site-footer{position:relative;isolation:isolate;background:var(--panel);padding-block:6em 1em;color:var(--muted)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:1.5em}
.footer-top .wordmark{color:var(--text)}
.footer-links{display:flex;gap:1.5385em;font-size:max(12px,.8125em)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:2em;margin-top:1.3333em;padding-top:.6667em;border-top:1px solid var(--line);color:var(--muted)}
.footer-bottom a{color:var(--faint);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.motion-toggle{display:inline-flex;align-items:center;gap:.6667em;min-height:max(var(--target),3.3333em);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted)}
.motion-symbol{display:flex;align-items:center;gap:.25em;width:.8333em;height:1em}
.motion-symbol i{width:2px;height:.75em;background:currentColor}
.motion-toggle[aria-pressed=true] .motion-symbol{width:0;height:0;border-left:.5833em solid currentColor;border-block:.4167em solid transparent}
.motion-toggle[aria-pressed=true] .motion-symbol i{display:none}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important;transition:none!important}
.motion-paused{scroll-behavior:auto}

@media(hover:hover) and (pointer:fine){
  .text-link:hover svg{transform:translateY(2px)}
  .button--ghost:hover{border-color:var(--text)}
  .install-warn a:hover,.accordion-content a:hover{color:var(--accent)}
  .step-scene:hover{text-decoration-color:var(--accent)}
  .footer-links a:hover,.footer-bottom a:hover,.motion-toggle:hover,.accordion-trigger:hover,.nav-route:hover .nav-route-label{color:var(--accent)}
  .nav-toggle:hover{border-color:var(--accent)}
  .nav[data-nav-status=not-active] .nav-toggle:hover .nav-toggle-bars i:first-child{transform:translateY(.125em)}
  .nav[data-nav-status=not-active] .nav-toggle:hover .nav-toggle-bars i:last-child{transform:translateY(-.125em)}
  .nav-feature-cta:hover{background:var(--accent);color:var(--accent-ink)}
}

@media screen and (max-width:1279px){
  /* Below 1280 the three footnotes no longer fit one line: they wrap as whole items, never mid-label. */
  .footer-bottom{flex-wrap:wrap;gap:.25em 2em}
  .footer-bottom>*{white-space:nowrap}
}
/* Tablet (Osmo ideal 834) */
@media screen and (max-width:991px){
  :root{--gutter:2.5em;--section:4.5em}
  .hero h1{font-size:3.75em}
  .section h2{font-size:2.625em}
  .final-cta h2{font-size:3.25em}
  .split>.faq-list{margin-top:0}
  .journey-steps{grid-template-columns:1fr;gap:3em;padding-left:4.5em}
  .journey__line{top:1.5em;bottom:auto;left:1.5em;right:auto;width:1px;height:calc(100% - 6em)}
  .journey__fill{transform-origin:50% 0}
  .journey__marker{position:absolute;left:-4.5em;top:0}
  .journey-step{position:relative}
  .journey-step h3{margin-top:.35em}
  /* The menu drops two columns; the feature card stays on wide screens. */
  .nav-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nav-feature{display:none}
  .nav-route{flex-direction:column;align-items:flex-start;gap:.25em}
}
/* Mobile landscape (Osmo ideal 550) */
@media screen and (max-width:767px){
  :root{--gutter:1.5em;--section:3.5em;--header:4.5em}
  /* Phones: the bar spans the screen, the pill drops "for Windows", the menu is one column. */
  .nav{--nav-top:3.75em}
  .nav-width{padding:.625em .625em 0}
  .nav-pill-extra{display:none}
  .nav-panel{grid-template-columns:minmax(0,1fr);gap:.5em;max-height:calc(100dvh - var(--nav-top) - 1.5em);padding:.875em .5em .5em}
  .nav-routes{padding:.875em 1.125em .25em}
  .nav-route-label{font-size:1.375em}
  .nav-get{gap:.75em;padding:.75em .5em .5em}
  .hero h1{font-size:3.25em}
  .hero-sub,.lede{font-size:1.0625em}
  .section h2{font-size:2.25em}
  .final-cta h2{font-size:3em}
  .journey{margin-top:2.5em}
  .journey-steps{gap:2.5em;padding-left:3.5em}
  .journey__marker{left:-3.5em}
  .journey__line{left:max(18px,1.5em)}
  .journey-step h3{font-size:1.25em}
  .accordion-trigger{font-size:1em}
  .footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-top{gap:.5em}
  .footer-bottom{gap:.25em}
  .footer-bottom>*{white-space:normal}
}
/* Mobile portrait (Osmo ideal 390) */
@media screen and (max-width:479px){
  :root{--gutter:1em}
  /* The hero headline stays the largest type on the page: section h2s are 3em here. */
  .hero h1{font-size:3.5em}
  .cta-row{flex-direction:column;gap:.25em;margin-top:1.5em}
  .hero .cta-row{align-self:stretch;align-items:stretch;gap:.5em}
  .hero .cta-row .button{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Decorative motion stops; state feedback (hover, focus, accordion, tabs) keeps a short colour/opacity fade. */
  *,*:before,*:after{animation:none!important;transition-property:opacity,color,background-color,border-color!important;transition-duration:.15s!important;transition-delay:0s!important}
}

/* Code and the app replica keep their real casing. */
.demo-frame{text-transform:none}
/* Direct links to a section land below the floating nav. */
[id]{scroll-margin-top:calc(var(--header) + 1.5em)}