:root{color-scheme:light dark;--ink:#1d1d1f;--muted:#6e6e73;--blue:#0071e3;--line:#e5e5e7;--page:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-synthesis:none;color:var(--ink);background:var(--page)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #006edb;outline-offset:5px}button{cursor:pointer}a:hover{text-decoration:underline;text-underline-offset:4px}::selection{background:#cce5ff}.skip{position:fixed;z-index:20;top:8px;left:10px;padding:12px;background:white;transform:translateY(-150%)}.skip:focus{transform:none}.section-width{width:min(980px,calc(100% - 64px));margin-inline:auto}.nav{border-bottom:1px solid var(--line);background:rgba(250,250,250,.88);backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}.nav-inner{max-width:1100px;height:66px;margin:auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center}.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:650;letter-spacing:-.6px}.wordmark img{display:block}.nav-links{display:flex;align-items:center;gap:30px;font-size:13px}.nav-download{background:var(--ink);color:white;padding:8px 15px;border-radius:100px}.nav-download:hover{text-decoration:none;background:#333}.nav-download span{margin-left:8px}.hero{text-align:center;padding:84px 24px 47px}.eyebrow{font-size:12px;font-weight:650;letter-spacing:1.4px;line-height:1.5;color:var(--muted);margin:0 0 18px}.hero h1{font-size:clamp(54px,7.3vw,92px);font-weight:650;line-height:1.025;letter-spacing:-.065em;margin:0}.hero h1 span{color:#2e3ebe}.hero-copy{font-size:21px;line-height:1.45;letter-spacing:-.45px;margin:25px auto 27px;color:#5b5b60}.hero-actions,.open-actions{display:flex;align-items:center;justify-content:center;gap:27px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;border-radius:100px;padding:14px 23px;font-size:16px;font-weight:500;transition:background .18s,transform .18s}.button:hover{text-decoration:none}.button:active{transform:scale(.97)}.primary{background:var(--blue);color:white}.primary:hover{background:#0077ed}.dark{background:var(--ink);color:white}.dark:hover{background:#38383b}.text-link{color:#0066cc;font-size:16px}.compatibility{font-size:12px;line-height:1.6;color:var(--muted);margin:19px 0 0}.compatibility span{padding:0 7px}.demo-section{width:min(980px,calc(100% - 64px));margin:0 auto}.demo-window{position:relative;overflow:hidden;background:#101012;border:7px solid #202023;border-radius:22px;box-shadow:0 28px 54px -32px #0005,0 2px 5px #0002;aspect-ratio:1.6}.demo-window video{display:block;width:100%;height:100%;object-fit:cover}.replay{position:absolute;bottom:18px;right:18px;display:flex;align-items:center;gap:8px;border:1px solid #fff5;border-radius:100px;padding:10px 15px;color:white;background:#24282cbf;backdrop-filter:blur(15px);font-size:12px;transition:background .15s}.replay:hover{background:#191b20e6}.demo-controls{max-width:600px;margin:25px auto 0;display:flex;align-items:center;gap:25px}.demo-controls label{font-size:14px;font-weight:550;white-space:nowrap}.range-wrap{display:flex;gap:14px;align-items:center;width:100%;font-size:12px;color:var(--muted)}input[type=range]{accent-color:var(--ink);height:30px;width:100%;min-width:50px;cursor:ew-resize}.demo-caption{text-align:center;font-size:12px;color:var(--muted);margin:11px 0 0}.details{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-block:124px 112px}.details h2,h2{font-size:clamp(34px,4vw,48px);font-weight:630;line-height:1.08;letter-spacing:-.045em;margin:0 0 24px}.details-intro>p:last-child{max-width:370px;font-size:18px;line-height:1.55;color:var(--muted);letter-spacing:-.2px}.details-list{display:flex;flex-direction:column;gap:27px;padding-top:3px}.details-list h3{font-size:18px;font-weight:600;letter-spacing:-.3px;margin:0 0 8px}.details-list p{font-size:16px;color:var(--muted);line-height:1.55;margin:0}.open-source{background:#f0f0f2;text-align:center;padding:87px 24px 80px}.open-inner{max-width:780px;margin:auto}.open-source h2{font-size:clamp(38px,5vw,60px);margin-bottom:21px}.open-source .open-inner>p:not(.eyebrow){color:var(--muted);font-size:19px;line-height:1.5;letter-spacing:-.2px;margin:0 auto 28px}.open-actions{margin:0 0 30px}.open-source .open-inner .contribution-note{font-size:14px;margin-bottom:0;line-height:1.7}.contribution-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.getting-started{padding-block:94px 65px;max-width:820px}.getting-started h2{font-size:36px;text-align:center;margin-bottom:36px}.questions details{border-bottom:1px solid var(--line);padding:0}.questions summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;font-weight:550;line-height:1.4;padding:24px 0;list-style:none}.questions summary::-webkit-details-marker{display:none}.questions summary span{font-size:22px;font-weight:300;color:var(--muted)}.questions details[open] summary span{transform:rotate(45deg)}.questions p{font-size:16px;line-height:1.65;color:var(--muted);max-width:700px;margin:0 25px 22px 0}.credit{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;border-top:1px solid var(--line);padding:34px 0 42px;margin-top:25px}.credit p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.credit p:first-child{font-size:20px;font-weight:550;letter-spacing:-.4px;color:var(--ink)}.credit a{color:#0066cc}.footer{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:24px 0 30px;border-top:1px solid var(--line)}.footer .wordmark{font-size:16px}.footer p{font-size:12px;color:var(--muted)}.footer>div{margin-left:auto;display:flex;gap:22px;font-size:12px}.footer small{flex-basis:100%;font-size:11px;color:var(--muted)}
@media(min-width:1500px){.hero{padding-top:96px}.demo-section{width:980px}}@media(max-width:700px){.nav-inner{height:60px;padding-inline:20px}.nav-links{gap:19px}.nav-links>a:first-child:not(.nav-download){display:none}.wordmark{font-size:18px}.hero{padding-top:62px;padding-bottom:36px}.hero h1{font-size:64px}.hero-copy{font-size:18px}.hero-actions{gap:20px}.hero-actions .text-link{font-size:15px}.button{font-size:15px;padding:13px 20px}.section-width,.demo-section{width:calc(100% - 40px)}.demo-window{border-width:5px;border-radius:14px}.replay{bottom:10px;right:10px;padding:8px 11px;font-size:11px}.demo-controls{gap:14px;margin-top:18px}.demo-controls label{font-size:12px}.range-wrap{gap:9px;font-size:11px}.demo-caption{font-size:11px}.details{grid-template-columns:1fr;gap:26px;padding-block:73px}.details-intro>p:last-child{max-width:none}.details-list{gap:25px}.open-source{padding:62px 24px}.open-source .open-inner>p:not(.eyebrow){font-size:17px}.open-source br{display:none}.getting-started{padding-block:68px 38px}.getting-started h2{font-size:30px}.questions summary{font-size:16px}.credit{grid-template-columns:1fr;gap:14px;padding-block:30px}.footer{gap:12px}.footer>div{width:100%;margin-left:0;gap:24px}.footer p{margin-left:auto}.open-actions{gap:21px}}@media(max-width:380px){.hero h1{font-size:53px}.hero-copy{font-size:16px}.hero-actions{gap:16px}.nav-links{gap:14px}.nav-links a{font-size:12px}.compatibility{font-size:11px}.compatibility span{padding-inline:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}@media(prefers-reduced-transparency:reduce){.nav{background:var(--page);backdrop-filter:none}.replay{background:#24282c;backdrop-filter:none}}

/* Small, stateful icons; Morphicons supplies the spring transitions. */
.ui-icon{width:20px;height:20px;display:block;flex-shrink:0}
.questions summary .ui-icon{color:var(--muted)}
.github-stars{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border:1px solid #d5d5d9;border-radius:100px;background:#fff;font-size:13px;font-weight:550;white-space:nowrap}
.github-stars:hover{background:#f0f0f2;text-decoration:none;border-color:#b5b5bb}
.github-stars .ui-icon{width:16px;height:16px}
.star-count{padding-left:8px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums;min-width:2ch}
@media(max-width:850px){.nav-links{gap:15px}.nav-links>a[href="#effect"]{display:none}}
@media(max-width:600px){.nav-links>a[href="#open-source"]{display:none}.nav-links{gap:10px}.nav-inner{padding-inline:16px}.github-stars{padding:7px 10px}}
@media(max-width:380px){.nav-download{padding:7px 12px;font-size:12px}}


/* Match the device appearance without waiting for JavaScript. */
:root {
  --nav-surface: rgba(250,250,250,.88);
  --surface: #fff;
  --surface-raised: #f0f0f2;
  --button-ink: #fff;
  --button-hover: #38383b;
  --link: #0066cc;
  --hero-muted: #2e3ebe;
  --body-muted: #5b5b60;
  --star-border: #d5d5d9;
  --star-hover-border: #b5b5bb;
  --selection: #cce5ff;
}
.nav { background: var(--nav-surface); }
.skip, .github-stars { background: var(--surface); }
.nav-download, .dark { color: var(--button-ink); }
.nav-download:hover, .dark:hover { background: var(--button-hover); }
.hero h1 span { color: var(--hero-muted); }
.hero-copy { color: var(--body-muted); }
.text-link, .credit a { color: var(--link); }
.open-source, .github-stars:hover { background: var(--surface-raised); }
.github-stars { border-color: var(--star-border); }
.github-stars:hover { border-color: var(--star-hover-border); }
::selection { background: var(--selection); }
:focus-visible { outline-color: var(--link); }


  :root[data-theme="dark"] {
    --page: #111113;
    --ink: #f5f5f7;
    --muted: #a1a1aa;
    --line: #303035;
    --nav-surface: rgba(17,17,19,.88);
    --surface: #1c1c1f;
    --surface-raised: #1b1b1e;
    --button-ink: #171719;
    --button-hover: #d7d7dd;
    --link: #70b7ff;
    --hero-muted: #7f9bf4;
    --body-muted: #b4b4bd;
    --star-border: #404047;
    --star-hover-border: #73737e;
    --selection: #224b77;
  }
  :root[data-theme="dark"] .demo-window {
    border-color: #34343b;
    box-shadow: 0 28px 54px -32px #000b, 0 0 0 1px #ffffff0d;
  }

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--page); }
}

.download-total { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.download-total a { font-variant-numeric: tabular-nums; }
.scroll-reveal { transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.reveal-pending { opacity: 0; transform: translateY(18px); }
.scroll-reveal:focus-within { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .scroll-reveal { opacity: 1; transform: none; }
}

/* Reserve icon space so morphs never move the surrounding label. */
.link-icon { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-left: 4px; }
.button .link-icon { margin-left: 0; }
.nav-download { display: inline-flex; align-items: center; gap: 8px; }
.nav-download .link-icon { width: 15px; height: 15px; margin-left: 0; }
.credit .link-icon, .footer .link-icon { width: 14px; height: 14px; vertical-align: -2px; }

/* The cutout's rear hinge meets the display; transparent margins stay outside. */
.macbook { isolation: isolate; pointer-events: none; }
.macbook .demo-window { width: 65%; margin-inline: auto; z-index: 1; border-radius: 18px 18px 5px 5px; box-shadow: 0 0 0 1px #ffffff26; }
.macbook-base { display: block; width: 100%; height: auto; margin-top: calc(-10.6% - 2px); margin-bottom: -9%; position: relative; z-index: 0; pointer-events: none; }
#scrub-preview { position: absolute; inset: 0; width: 100%; height: 100%; }
#scrub-preview[hidden] { display: none; }
.replay { z-index: 2; }
input[type=range] { min-height: 44px; touch-action: pan-y; }
@media(max-width:700px) {
  .macbook .demo-window { border-width: 4px; border-radius: 10px 10px 3px 3px; }
  .macbook .replay { padding: 8px; bottom: 7px; right: 7px; }
  .macbook .replay span { display: none; }
}

/* Rotate around the rear hinge while the keyboard remains on the desk. */
.macbook { perspective: 1200px; perspective-origin: 50% 40%; --lid-angle: 0deg; --lid-shade: 0; }
.lid-stage { position: relative; width: 65%; aspect-ratio: 1.6; margin-inline: auto; transform-origin: 50% 100%; transform: rotateX(var(--lid-angle)); transform-style: preserve-3d; z-index: 2; }
.macbook .lid-stage .demo-window { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid-back { position: absolute; inset: 0; border-radius: 18px 18px 5px 5px; background: linear-gradient(145deg,#e4e5e7,#b7b9bd 65%,#d1d3d6); border: 1px solid #a6a8ac; box-shadow: inset 0 1px 2px #fff9; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.macbook .demo-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #000; opacity: var(--lid-shade); }
.demo-controls { position: relative; z-index: 3; isolation: isolate; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.demo-controls .replay { position: static; min-height: 44px; font-size: 14px; color: var(--ink); background: var(--surface-raised); border-color: var(--line); }
.demo-controls .range-wrap { flex: 1; }
@media(max-width:700px) { .demo-controls { gap: 12px; } .demo-controls .range-wrap { flex-basis: 100%; } .lid-back { border-radius: 10px 10px 3px 3px; } }

/* The light belongs to the hero, never to the controls above it. */
.light-stage { position:relative; isolation:isolate; overflow:hidden; }
#ascii-art { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.2s ease;
  /* A clear gutter on both sides, then a fade, so the sculpture never sits cut off against the edge.
     The canvas itself stays full width because ascii.js lays the glyphs out against the stage. */
  -webkit-mask-image:linear-gradient(to right, transparent 0, transparent 3%, #000 13%, #000 87%, transparent 97%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, transparent 3%, #000 13%, #000 87%, transparent 97%, transparent 100%); }
.has-light #ascii-art { opacity:1; }
.light-stage .hero { position:relative; }
.light-stage .demo-section { position:relative; }
@media (prefers-reduced-motion:reduce) { #ascii-art { transition:none; } }

.maker { display:grid; grid-template-columns:1fr 1.6fr; gap:80px; padding-block:96px 48px; }
.maker-signature { display:block; margin-bottom:22px; font-family:Georgia,serif; font-size:32px; font-style:italic; color:var(--link); letter-spacing:-1px; }
.maker-heading h2 { font-size:clamp(34px,4vw,46px); }
.maker-note p { font-size:17px; line-height:1.7; color:var(--muted); margin:0 0 20px; }
.maker-note p:first-child { color:var(--ink); }
.coffee { background:var(--surface-raised); border:1px solid var(--line); color:var(--ink); margin-top:5px; }
.coffee:hover { border-color:var(--muted); background:var(--surface); }
.support-note { display:block; color:var(--muted); font-size:13px; margin-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; }
@media(max-width:700px) { .maker { grid-template-columns:1fr; gap:10px; padding-block:64px 20px; } .maker-heading h2 br { display:none; } }

/* Compatibility stays visible before the download, including on touch devices. */
.compatibility-note{display:block;margin:9px auto 0;padding:6px 8px;border:0;background:none;color:var(--blue);font-size:12px;line-height:1.5;text-wrap:balance}
.compatibility-note:hover{text-decoration:underline;text-underline-offset:3px}
#compatibility-dialog{position:fixed;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--page);color:var(--ink);box-shadow:0 24px 90px #0004;overflow:auto;text-align:left}
#compatibility-dialog::backdrop{background:#0006;backdrop-filter:blur(8px)}
#compatibility-dialog[open]{animation:compatibility-enter .22s ease-out}
#compatibility-dialog h2{font-size:29px;letter-spacing:-.04em;margin:0 24px 14px 0}
#compatibility-dialog p{font-size:14px;line-height:1.55;color:var(--muted);margin:6px 0 16px}
#compatibility-dialog .compatibility-kicker{font-size:12px;margin:0 0 10px;color:var(--muted)}
.compatibility-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:25px}
.compatibility-close:hover{background:var(--line)}
.model-note{padding:12px 0;border-top:1px solid var(--line);font-size:13px}
#compatibility-dialog .model-note p{margin:5px 0 0}
#compatibility-dialog .preview-note{font-size:12px;margin:10px 0 20px}
#compatible-download{width:100%;font-size:14px}
@keyframes compatibility-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#compatibility-dialog[open]{animation:none}}

@media print { #ascii-art { display:none!important; } }

/* Larger character drawings, with one horizontal row of feature stories. */
.details { display: block; }
.details-intro { display: block; max-width: 610px; margin-bottom: 52px; }
.details-intro > .eyebrow, .details-intro > h2, .details-intro > p { grid-column: 1; }
.details-intro > p:not(.eyebrow) { max-width: 550px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); letter-spacing: -.2px; }
.details-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 0; }
.details-list > div { min-width: 0; }
.feature-ascii {
  display: grid;
  place-content: center;
  height: 220px;
  margin: 0 0 26px;
  color: #2e3ebe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
  white-space: pre;
  user-select: none;
}
:root[data-theme="dark"] .feature-ascii { color: #9db3f8; }
@media (min-width: 701px) and (max-width: 1000px) {
  .details-list { gap: 24px; }
  .feature-ascii { font-size: 9px; height: 180px; }
}
/* Icons stand in for the illustrations on phones only. */
.feature-icon { display: none; }
@media (max-width: 700px) {
  .details-intro { grid-template-columns: 1fr; gap: 0; margin-bottom: 30px; }
  .details-intro > p:not(.eyebrow) { max-width: none; }
  /* On phones the three points read as a tight list: no illustrations, small gaps. */
  .details-list { grid-template-columns: 1fr; gap: 18px; }
  .feature-ascii { display: none; }
  .details-intro > p:not(.eyebrow) { display: none; }
  .details-intro { margin-bottom: 22px; }
  .details-list h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
  .feature-icon { display: block; width: 22px; height: 22px; flex: none; color: #2e3ebe; }
  :root[data-theme="dark"] .feature-icon { color: #7f9bf4; }
  .details { padding-block: 56px; }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-toggle {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-grid; place-items: center; padding: 5px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--surface-raised); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: block; }
/* The outgoing appearance closes like a lid, revealing the new one underneath. */
::view-transition-group(root) { animation-duration: 650ms; perspective: 1800px; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 2; transform-origin: 50% 100%; backface-visibility: hidden; }
::view-transition-new(root) { z-index: 1; }
@media (max-width: 420px) {
  .nav-links { gap: 6px; }
  .nav-download { padding: 7px 12px; }
}

/* On phones the header scrolls away with the page (the bottom bar carries the buy
   action). On desktop it floats, so the buy pill can step in once the hero's is gone. */
.nav {
  position: static;
  height: 67px;
  background: var(--page);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transition: background 420ms ease, border-color 420ms ease;
}
.nav-inner {
  position: relative;
  width: calc(100% - 32px);
  max-width: 860px;
  height: 66px;
  padding: 0 16px;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: 0;
  pointer-events: auto;
  background: transparent;
  transform: translateY(0);
  transition: max-width 520ms cubic-bezier(.22,1,.36,1), transform 520ms cubic-bezier(.22,1,.36,1), border-radius 520ms cubic-bezier(.22,1,.36,1), background 420ms ease, border-color 420ms ease, box-shadow 520ms ease;
}
.nav-links { gap: 14px; }
.nav-links > a:not(.nav-download):not(.github-stars) { display: inline-flex; align-items: center; min-height: 44px; }
.nav .theme-toggle { margin-left: -8px; }
.nav.is-floating { background: transparent; border-color: transparent; }
.nav.is-floating .nav-inner {
  max-width: 790px;
  transform: translateY(12px);
  border-radius: 24px;
  background: rgba(250,250,250,.78);
  border-color: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 34px -12px #172a4430, inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff70;
}
:root[data-theme="dark"] .nav.is-floating .nav-inner {
  background: rgba(28,28,33,.78);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 34px -12px #0009, inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff08;
}
.nav.is-floating .github-stars { background: transparent; }
@media (max-width: 850px) { .nav-links > a[href="#effect"] { display: none; } }
@media (max-width: 700px) {
  .nav { height: 61px; }
  .nav-inner { width: calc(100% - 24px); height: 60px; padding-inline: 12px; gap: 12px; }
  .nav-links { gap: 10px; }
  .nav-links > a[href="#open-source"] { display: none; }
  .nav.is-floating .nav-inner { transform: translateY(8px); border-radius: 21px; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 8px; padding-inline: 10px; }
  .nav .wordmark { font-size: 17px; gap: 7px; }
  .nav .wordmark img { width: 25px; height: 25px; }
  .nav-links { gap: 8px; }
  .nav .github-stars > span:not(.star-count) { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-floating .nav-inner,
  :root[data-theme="dark"] .nav.is-floating .nav-inner {
    background: var(--page);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-floating .nav-inner,
  :root[data-theme="dark"] .nav.is-floating .nav-inner { background: var(--page); }
}

/* Full-bleed branching artwork sits behind the open-source invitation. */
.open-source { position: relative; isolation: isolate; overflow: hidden; }
#shared-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.open-inner { position: relative; }
@media print { #shared-art { display: none; } }

#compatibility-dialog { width: min(940px, calc(100vw - 32px)); padding: 30px; }
#compatibility-dialog .compat-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 0; border-block: 1px solid var(--line); }
#compatibility-dialog .compat-legend p { margin: 0; font-size: 13px; }
#compatibility-dialog .compat-legend strong { color: var(--ink); }
#compatibility-dialog .compat-find { margin: 16px 0 10px; font-size: 13px; }
.compat-find span { color: var(--muted); }
.compat-table-wrap { max-height: 44vh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; }
.compat-table-wrap:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.compat-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13px; line-height: 1.5; }
.compat-table caption { padding: 12px 14px; text-align: left; color: var(--muted); font-size: 12px; }
.compat-table th, .compat-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compat-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-raised); font-weight: 600; white-space: nowrap; }
.compat-table tbody th { font-weight: 550; }
.compat-table tbody th > span { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.compat-table .compat-family th { background: var(--surface-raised); font-weight: 650; padding-block: 9px; }
.compat-table td > a, #compatibility-dialog .compat-footnote a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.compat-status { white-space: nowrap; }
.compat-status.tested { font-weight: 650; color: var(--ink); }
.compat-status.expected { color: var(--link); }
.compat-status.limited { color: var(--muted); }
#compatibility-dialog .compat-footnote { font-size: 12px; margin: 12px 0; }
#compatible-download { margin-top: 8px; }
@media (max-width: 600px) {
  #compatibility-dialog { padding: 22px 18px; }
  #compatibility-dialog .compat-legend { grid-template-columns: 1fr; gap: 10px; }
  .compat-table-wrap { max-height: 40vh; }
}

/* One decision at a time; the detailed research stays available on demand. */
#compatibility-dialog { width: min(510px, calc(100vw - 32px)); padding: 34px; }
#compatibility-dialog.show-reference { width: min(940px, calc(100vw - 32px)); }
#compatibility-dialog #compatibility-title { font-size: 30px; line-height: 1.12; }
#compatibility-title:focus { outline: none; }
#compatibility-intro:empty { display: none; }
.compat-panel[hidden], #compat-back[hidden], #compatible-download[hidden], #compat-source[hidden] { display: none; }
.compat-panel { animation: compat-step-in 200ms ease-out; }
.compat-families { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 10px; }
.compat-families button { min-height: 108px; text-align: left; padding: 20px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.compat-families button:hover { background: var(--surface-raised); border-color: var(--link); }
.compat-families strong { display: block; font-size: 17px; font-weight: 600; }
.compat-families span { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.compat-quiet { min-height: 44px; border: 0; padding: 10px 0; background: none; color: var(--link); font-size: 13px; }
.compat-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
#compat-model-step label { display: block; font-size: 14px; margin: 24px 0 9px; }
#compat-model { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
#compat-model:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
#compatibility-dialog .compat-help { font-size: 12px; margin: 10px 0 24px; }
#compat-continue { width: 100%; border: 0; min-height: 48px; }
#compat-continue:disabled { opacity: .45; cursor: default; }
#compatibility-dialog #compat-selected { font-size: 13px; margin: 14px 0 20px; color: var(--link); }
#compatibility-dialog #compat-result-copy { font-size: 16px; line-height: 1.6; color: var(--ink); }
#compatibility-dialog #compat-result-requirement { font-size: 12px; }
#compat-result-requirement:empty { display: none; }
.compat-reference { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 12px; }
.compat-reference summary { cursor: pointer; font-size: 13px; color: var(--muted); padding-block: 10px; }
.compat-reference[open] summary { margin-bottom: 12px; }
@keyframes compat-step-in { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .compat-panel { animation: none; } }
@media (max-width: 420px) {
  #compatibility-dialog { padding: 28px 20px; }
  #compatibility-dialog #compatibility-title { font-size: 27px; }
  .compat-families button { padding: 16px 12px; }
  .compat-families strong { font-size: 15px; }
  .compat-families span { line-height: 1.5; }
}

/* FoldMyMac's sign-off is made of letters that bend, in its own blue. */
.site-footer { overflow: hidden; }
.footer-art {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: clamp(150px, 31vw, 570px);
  padding: 3vw 1vw 0;
  overflow: hidden;
  color: var(--blue);
}
.footer-type {
  display: flex; justify-content: center; align-items: baseline;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 20vw; font-weight: 750; line-height: .95;
  letter-spacing: -.035em; perspective: 1200px;
  user-select: none;
}
.footer-type span { display: block; transform-origin: 50% 100%; }
:root[data-theme="dark"] .footer-art { color: #70b7ff; }
@media print { .footer-art { display: none; } }

.wizard-rail { display: flex; align-items: flex-start; gap: 8px; padding: 0; margin: 18px 0 28px; list-style: none; }
.wizard-rail li { display: flex; flex: 1; align-items: flex-start; gap: 8px; }
.wizard-rail li:last-child { flex: 0; }
.wizard-rail button { display: grid; justify-items: center; gap: 6px; min-width: 54px; min-height: 56px; padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.wizard-rail button:disabled { cursor: default; opacity: .55; }
.wizard-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 12px; font-weight: 600; transition: background 220ms ease, color 220ms ease, transform 300ms ease; }
.wizard-rail button[aria-current="step"] { color: var(--ink); }
.wizard-rail button[aria-current="step"] .wizard-number { border-color: var(--blue); color: var(--link); transform: scale(1.08); }
.wizard-rail .is-done .wizard-number { color: #fff; background: var(--blue); border-color: var(--blue); }
.wizard-connector { position: relative; flex: 1; height: 3px; margin-top: 20px; border-radius: 2px; overflow: hidden; background: var(--line); }
.wizard-connector::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 380ms cubic-bezier(.23,1,.32,1); }
.is-done .wizard-connector::after { transform: scaleX(1); }
.compat-panel { animation: none; }
.compat-families button { min-height: 90px; }
@media (max-width: 420px) { .wizard-rail { gap: 4px; } .wizard-rail li { gap: 4px; } }

.compat-result-status { display: inline-flex; align-items: center; padding: 10px 14px; margin: 0 0 14px; border-radius: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.compat-result-status.success { background: #e5f5eb; color: #17653a; }
.compat-result-status.caution { background: #fff1d2; color: #805400; }
.compat-result-status.unsupported { background: #ffe8e6; color: #a22c25; }
:root[data-theme="dark"] .compat-result-status.success { background: #153a28; color: #9be5b7; }
:root[data-theme="dark"] .compat-result-status.caution { background: #3c3016; color: #f5cf7d; }
:root[data-theme="dark"] .compat-result-status.unsupported { background: #421f23; color: #ffaaa5; }
#compatibility-dialog #compat-result-copy { font-size: 14px; margin-bottom: 12px; }
#compatibility-dialog #compat-selected { margin-bottom: 16px; }


/* The header no longer follows the scroll, so its floating pill state is inert. */
.nav.is-floating .nav-inner {
  transform: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}

/* On phones the buy action stays reachable at the bottom of the screen. */
.mobile-buy { display: none; }
@media (max-width: 700px) {
  .mobile-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    /* Same pill as the hero, contents centred. */
    justify-content: center;
    gap: 13px;
    border-radius: 100px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: translateY(150%);
    pointer-events: none;
    transition: opacity .25s ease, transform .38s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-buy.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mobile-buy:hover,
  .mobile-buy:active { text-decoration: none; }
  body { padding-bottom: 88px; }
}
@media (prefers-reduced-transparency: no-preference) {
  .mobile-buy { backdrop-filter: none; }
}


/* Launch pricing: the old price stays legible but clearly secondary. */
.price-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 22px;
}
.price-was { color: var(--muted); font-size: 22px; text-decoration-thickness: 2px; }
/* The section colours its paragraphs grey; the live price has to stay full strength. */
.price-now { font-size: 40px; font-weight: 650; letter-spacing: -.03em; color: var(--ink); }
/* The discount plays out on the button itself as soon as the page is open: the old
   price is struck through, then the new one arrives. Both prices sit in the layout
   from the start, so the button never changes width mid-animation. */
.hero-price { display: inline-flex; align-items: baseline; gap: 9px; }
.hero-was { position: relative; opacity: .72; }
.hero-was::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-now {
  font-weight: 650;
  opacity: 0;
  transform: scale(.55);
}

/* Hero plays on arrival; the bottom bar plays when it slides into view. */
.hero-buy .hero-was::after,
.mobile-buy.is-visible .hero-was::after {
  animation: hero-strike .42s cubic-bezier(.22, 1, .36, 1) .75s forwards;
}
.hero-buy .hero-now,
.mobile-buy.is-visible .hero-now {
  animation: hero-reveal .52s cubic-bezier(.34, 1.56, .64, 1) 1.25s forwards;
}

@keyframes hero-strike { to { transform: scaleX(1); } }
@keyframes hero-reveal {
  0% { opacity: 0; transform: scale(.55); }
  62% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-was::after { transform: scaleX(1); animation: none; }
  .hero-now { opacity: 1; transform: none; animation: none; }
}


@media (max-width: 700px) {
  .price-now { font-size: 34px; }
  .price-was { font-size: 19px; }
}


/* What happens right after paying, said next to the button that takes the money. */
.delivery-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 520px;
  margin: 0 auto 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.delivery-note .ui-icon { width: 17px; height: 17px; flex: none; }
@media (max-width: 700px) {
  .delivery-note { font-size: 13px; text-align: left; }
}


/* The section greys its paragraphs, so the promise people are buying stays dark. */
.lifetime { color: var(--ink); font-weight: 650; }


.hero-lifetime {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 17px 0 0;
}
.hero-lifetime strong { color: var(--ink); font-weight: 600; }


/* ============================================================
   Hero: words on the left, the folding laptop on the right.
   ============================================================ */


/* The purchase control: one black pill carrying its own price chip. */
:root { --chip-face: rgba(255, 255, 255, .17); --chip-edge: rgba(255, 255, 255, .28); }
:root[data-theme="dark"] { --chip-face: rgba(0, 0, 0, .10); --chip-edge: rgba(0, 0, 0, .16); }

.hero-buy {
  gap: 13px;
  padding: 8px 8px 8px 24px;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -.2px;
}
.hero-buy .hero-price {
  padding: 9px 14px;
  gap: 8px;
  border-radius: 100px;
  background: var(--chip-face);
  box-shadow: inset 0 0 0 1px var(--chip-edge);
  font-size: 15px;
  letter-spacing: -.2px;
}
/* The chip must not change width while the discount plays, so both prices are
   laid out from the start; only their paint changes. */
.hero-buy .hero-was { opacity: .68; }

.hero-actions {
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  justify-content: center;
}
.hero-actions .hero-lifetime {
  max-width: none;
  white-space: nowrap;
  margin: 0;
  text-align: center;
}

@media (max-width: 700px) {
  .hero-buy { font-size: 16px; padding: 7px 7px 7px 20px; gap: 11px; }
  .hero-buy .hero-price { font-size: 14px; padding: 8px 12px; }
  .hero-actions { justify-content: center; }
  .hero-actions .hero-lifetime { text-align: center; max-width: none; }
}

/* ===== Real-world film (shipped hidden until the footage lands) ===== */
.film { padding-block: 56px 10px; }
.film[hidden] { display: none; }
.film-frame { border-radius: 22px; overflow: hidden; background: #0f1012; box-shadow: 0 30px 60px -34px #0006; }
.film-frame video { display: block; width: 100%; height: auto; }
.film-caption { text-align: center; max-width: 620px; margin: 22px auto 0; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* ===== App screenshot ===== */
/* The intrinsic 1600x1440 ratio is pinned in CSS too, so the section keeps its
   height — and its rounded, tinted panel — even before assets/settings.png exists. */
.shot { padding-block: 64px 10px; }
.shot-figure { margin: 0; }
.shot-figure img {
  display: block;
  width: min(100%, 900px);
  height: auto;
  aspect-ratio: 1600 / 1440;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: 0 30px 60px -30px #0007, 0 0 0 1px #0000000f;
}
.shot-figure figcaption { text-align: center; max-width: 560px; margin: 22px auto 0; font-size: 17px; line-height: 1.55; color: var(--muted); }

/* ===== Facts (how it works / requirements / privacy) ===== */
.facts { display: grid; gap: 18px; padding-block: 56px 24px; }
.facts-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 22px; padding: 26px 30px 8px; }
.facts-eyebrow { font-size: 12px; font-weight: 650; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.facts-list { margin: 0; }
.facts-list > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.facts-list > div:first-child { border-top: 0; }
.facts-list dt { font-size: 17px; font-weight: 550; color: var(--ink); margin: 0; }
.facts-list dd { font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0; }
:root[data-theme="dark"] .facts-card { --card: #1a1a1d; }
@media (max-width: 700px) {
  .facts { padding-block: 40px 16px; }
  .facts-card { padding: 20px 20px 4px; border-radius: 18px; }
  .facts-list > div { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .facts-list dt, .facts-list dd { font-size: 15px; }
  .film-caption, .shot-figure figcaption { font-size: 15px; }
  .film, .shot { padding-block: 40px 6px; }
}


/* ===== Footer: copyright left, the three legal links right ===== */
.footer-copy { margin: 0; font-size: 12px; color: var(--muted); }
.footer-links { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }
.footer-links a + a::before { content: "·"; margin-right: 12px; color: var(--muted); opacity: .5; }
@media (max-width: 700px) {
  .footer .footer-copy { margin-left: 0; margin-right: auto; }
  .footer .footer-links { width: 100%; margin-left: 0; gap: 12px; }
}


/* ===== Privacy and terms: the same shell, a single column of prose ===== */
body.plain { padding-bottom: 0; }
.legal { max-width: 720px; padding-block: 54px 88px; }
.legal h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; margin: 0 0 10px; }
.legal .legal-updated { font-size: 13px; color: var(--muted); margin: 0 0 40px; }
.legal h2 { font-size: 21px; font-weight: 600; letter-spacing: -.3px; margin: 38px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.legal .legal-back { display: inline-block; margin-top: 34px; font-size: 14px; }
@media (max-width: 700px) {
  .legal { padding-block: 36px 56px; }
  .legal h2 { margin-top: 30px; font-size: 19px; }
}

/* The new headline is longer than the old one: on phones it scales with the
   viewport so both lines stay whole instead of wrapping into four. */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(40px, 11.2vw, 58px); }
  .hero-copy { margin-bottom: 30px; }
}

/* ============================================================
   Desktop scale: the hero, laptop and headings sit a notch smaller so the
   headline, button and folding laptop all fit one laptop-screen height.
   ============================================================ */
@media (min-width: 701px) {
  .hero { padding: 44px 24px 26px; }
  .hero h1 { font-size: clamp(46px, 5.2vw, 68px); }
  .hero-copy { font-size: 18px; margin: 16px auto 20px; }
  .hero-buy { font-size: 16px; padding: 7px 7px 7px 22px; }
  .hero-buy .hero-price { font-size: 14px; padding: 8px 13px; }
  .hero-actions { gap: 12px; }
  .demo-section { width: min(680px, calc(100% - 64px)); }
  .details h2, h2 { font-size: clamp(30px, 3.1vw, 40px); }
  .details { padding-block: 84px 72px; gap: 72px; }
  .details-intro > p:last-child { font-size: 17px; }
  .feature-ascii { height: 190px; font-size: 11px; }
  .open-source h2 { font-size: clamp(34px, 3.8vw, 48px); }
  .open-source { padding: 72px 24px 64px; }
  .price-now { font-size: 36px; }
  .getting-started h2 { font-size: 32px; }
}
@media (min-width: 1500px) { .demo-section { width: 680px; } .hero { padding-top: 60px; } }

/* ============================================================
   Contact: a short form between the price band and the FAQ. Same rhythm as
   the FAQ (94px above on desktop, 68px on phones), 16px gutters on a phone.
   ============================================================ */
.contact { width: min(560px, calc(100% - 32px)); margin-inline: auto; padding-block: 94px 0; text-align: center; }
.contact h2 { font-size: 32px; margin-bottom: 12px; }
.contact-lede { max-width: 460px; margin: 0 auto 30px; font-size: 17px; line-height: 1.55; color: var(--muted); letter-spacing: -.2px; }
.contact-form { position: relative; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.contact-form[hidden], .contact-done[hidden] { display: none; }
.contact-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 550; color: var(--ink); }
.contact-field label span { color: var(--muted); font-weight: 400; }
.contact-form input:not([type="hidden"]), .contact-form textarea {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .15s;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--muted); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-color: var(--link); }
.contact-form ::placeholder { color: var(--muted); }
.contact-field.is-invalid input, .contact-field.is-invalid textarea { border-color: var(--contact-error); }
.contact-error { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: var(--contact-error); }
.contact-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.contact-form .button { border: 0; min-width: 120px; min-height: 48px; }
.contact-form .button[disabled] { opacity: .55; cursor: default; transform: none; }
.contact-status { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.contact-status.is-error { color: var(--contact-error); }
.contact-done { margin: 0; padding: 18px 20px; font-size: 16px; font-weight: 550; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; }
:root { --contact-error: #c0392b; }
:root[data-theme="dark"] { --contact-error: #ff8a80; }
:root[data-theme="dark"] .contact-form input:not([type="hidden"]), :root[data-theme="dark"] .contact-form textarea { background: var(--surface); }
@media (max-width: 700px) {
  .contact { padding-block: 68px 0; }
  .contact h2 { font-size: 30px; }
  .contact-lede { font-size: 16px; margin-bottom: 24px; }
  .contact-form { gap: 16px; }
  .contact-form .button { width: 100%; }
  .contact-status { width: 100%; text-align: center; }
}


/* ============================================================
   Header buy button: desktop only, and only once the hero's own button has
   scrolled away. It is the same pill as the hero, a size smaller.
   ============================================================ */
.nav-download.hero-buy {
  gap: 10px;
  padding: 5px 5px 5px 16px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.nav-download.hero-buy .hero-price { font-size: 12px; padding: 6px 10px; gap: 6px; }
.nav.has-buy .nav-download.hero-buy { opacity: 1; transform: none; pointer-events: auto; }
/* The discount plays each time the pill arrives, like the phone bar. */
.nav-download.hero-buy .hero-was::after,
.nav-download.hero-buy .hero-now { animation: none; }
.nav.has-buy .nav-download.hero-buy .hero-was::after {
  animation: hero-strike .42s cubic-bezier(.22, 1, .36, 1) .35s forwards;
}
.nav.has-buy .nav-download.hero-buy .hero-now {
  animation: hero-reveal .52s cubic-bezier(.34, 1.56, .64, 1) .8s forwards;
}
@media (max-width: 700px) { .nav-download.hero-buy { display: none; } }

@media (min-width: 701px) { .nav { position: sticky; top: 0; z-index: 10; } }
.shot[hidden] { display: none; }