/* ── Self-hosted fonts ──────────────────────────────────────────────
   Downloaded from Google Fonts (all four families are OFL) and served
   from our own origin. No visitor request reaches fonts.googleapis.com
   or fonts.gstatic.com — the site must not leak visitor IPs to a third
   party when the product's whole pitch is that it collects nothing.
   To refresh: re-download the woff2 files, keep the unicode-ranges. */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('assets/fonts/bricolage-grotesque-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('assets/fonts/bricolage-grotesque-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/geist-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/geist-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-mono-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/geist-mono-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-mono-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/geist-mono-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ============================================================
   Muse — marketing page
   Flat white. Black particle wordmark. Orbiting imagery.
   ============================================================ */

:root {
  --bg:        #ffffff;
  --ink:       #0a0a0a;   /* near-black */
  --ink-soft:  #555555;
  --ink-faint: #8c8c8c;
  --line:      rgba(10, 10, 10, 0.12);
  --line-2:    rgba(10, 10, 10, 0.06);

  /* app-window chrome — exact values from the real Muse app (light) */
  --app-paper:  #f6f5f4;            /* main grid area (flush) */
  --app-bar:    #f2f0ec;            /* toolbar (light, flush across the top) */
  --app-side:   #fcfcfc;            /* sidebar (flush, full height) */
  --app-tile:   #e7e6e3;           /* grid tile placeholder (.905/.901/.892) */
  --app-ink:    #1d1d1f;           /* .primary (near-black) */
  --app-soft:   #86868b;           /* .secondary (system gray) */
  --app-line:   rgba(0, 0, 0, 0.08);
  --app-chip:   rgba(0, 0, 0, 0.08);   /* unselected pill fill (.primary 8%) */
  --app-blue:   #007aff;           /* macOS accent */
  --app-blue-bg:rgba(0, 122, 255, 0.14);

  --serif: "Instrument Serif", Georgia, serif;
  --fat:   "Bricolage Grotesque", system-ui, sans-serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* page frame */
  --wrap:    1240px;                    /* content column */
  --gut:     clamp(28px, 6vw, 88px);    /* side margin */
  --section: clamp(96px, 11vw, 168px);  /* space under each section */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* visually hidden, still read by assistive tech (no visual footprint) */
.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;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: #fff; }

a { color: inherit; text-decoration: none; }
em { font-style: italic; }
/* ───────── Header ───────── */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  /* same centered max-width + gut as .hero-copy and every section below it —
     plain edge-to-edge --gut padding drifts from that on wide viewports,
     where the content column is centered instead of flush to the edge */
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 34px) var(--gut);
}
/* logo + nav float on rounded glass cards, above the particle pixels */
.logo {
  display: inline-flex; align-items: center; gap: 10px; color: var(--ink);
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: .5px solid rgba(0,0,0,.06); border-radius: 100px;
  padding: 10px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.18);
  /* the round card's own padding insets the mark past the header's edge —
     pull it back out so the glyph lines up with the h1 below it */
  margin-left: -10px;
}
.logo-mark { display: grid; place-items: center; color: var(--ink);
  transition: transform .6s var(--ease); }
.logo:hover .logo-mark { transform: rotate(90deg); }
.logo-word {
  font-family: var(--fat); font-weight: 800; font-stretch: 100%; font-optical-sizing: auto; font-size: 27px; letter-spacing: 0.5px;
  line-height: 1;
}
.site-nav {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: .5px solid rgba(0,0,0,.06); border-radius: 100px;
  /* Symmetric: the bordered Download pill is the only child now. The old
     asymmetric 18px left was breathing room for the bare GitHub text link
     that used to sit here — with that gone it just reads as dead space. */
  padding: 7px 8px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.18);
  /* same reasoning as .logo: pull the card back out so its edge lines up
     with the header's own right edge instead of sitting inset by its padding */
  margin-right: -8px;
}
/* App Store button — the header and the call under the screenshots share it */
.btn-appstore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity .25s var(--ease);
}
.btn-appstore:hover { opacity: .86; }
.btn-appstore svg { margin-top: -2px; }   /* optically centre the Apple glyph */

/* larger variant for the call under the screenshots */
.btn-appstore.lg { padding: 13px 24px 13px 21px; font-size: 15.5px; gap: 10px; }

/* Guide button beside the App Store button — used by the header on every
   page, so it lives here rather than in info.css. Same pill shape as
   .btn-appstore, just grey instead of ink. */
.btn-guide {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(10, 10, 10, .06);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity .25s var(--ease);
}
.btn-guide:hover { opacity: .7; }
.btn-guide[aria-current="page"] { background: rgba(10, 10, 10, .1); font-weight: 600; }

/* Legal link row beneath the footer wordmark — also on every page. */
.docs-footer {
  padding: 30px var(--gut) 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
}
.docs-footer a {
  font-size: 13px;
  color: var(--ink-faint);
  transition: color .2s var(--ease);
}
.docs-footer a:hover { color: var(--ink); }

/* ───────── Hero ───────── */
.hero {
  position: relative;
  min-height: 0;
  isolation: isolate;
  background: var(--bg);
  /* the app preview sits centered over the particle wordmark */
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* don't let the window's content widen the page */
  place-items: center;
  padding: clamp(100px, 13vh, 138px) 0 clamp(20px, 2.6vh, 34px);
}

/* grain wordmark canvas — fills the hero and extends below it (the grain field
   descends past the hero and fades down, all one animated particle system) */
.muse-canvas {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: 100%; height: calc(100svh + 900px);
  display: block; pointer-events: auto;
}


/* footer — just the static MUSE grain wordmark at 90% width */
.site-footer {
  padding: 0 0 clamp(12px, 2vh, 28px);
  display: flex; justify-content: center;
}
.foot-mark {
  display: block; width: 45%; aspect-ratio: 561 / 157;   /* tightened MUSE wordmark */
}

/* Sections are simply present — there is no scroll reveal. The class is kept
   only so the markup does not need rewriting if one is ever wanted again. */

/* fake-link toast */
.fake-toast {
  position: fixed; z-index: 100; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12.5px;
  padding: 11px 20px; border-radius: 100px; pointer-events: none;
  opacity: 0; transition: opacity .35s, transform .35s var(--ease);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.35);
}
.fake-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ───────── Hero ───────── */
.hero { place-items: center start; }
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
  text-align: left;
}
/* The copy sits on the grain field. The grain runs light (HERO_TONE in
   script.js) so the words read against it; this scrim takes the remaining
   texture out from under the text block only — no panel, no edge. */
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4%;
  top: 50%;
  width: 88%;
  height: 250%;
  transform: translateY(-50%);
  background: radial-gradient(closest-side,
              rgba(255,255,255,.96) 0%, rgba(255,255,255,.76) 46%,
              rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.hero-lede {
  font-family: var(--fat);
  font-weight: 800;
  font-stretch: 100%;
  font-optical-sizing: auto;
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.07;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 16px;
}
.hero-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ───────── Screenshot showcase ───────── */
.showcase {
  position: relative; z-index: 5;
  max-width: 1440px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 44px) var(--section);
}
.shot-stage { border-radius: 16px; overflow: hidden; }
.shot-stage img { display: block; width: 100%; height: auto; }
/* Eagle: a CENTERED strip of small thumbnails under the main image — a picker,
   not a second gallery. One card holds the whole strip and rides up over the
   main screenshot's bottom edge, so the two read as one connected unit rather
   than a stray row floating underneath. */
.shot-thumbs {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: -28px auto 0;
  padding: 10px;
  background: #e3f3e6;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 14px 32px -10px rgba(0,0,0,.16);
}
.shot-thumb {
  appearance: none;
  flex: none;
  width: 92px;
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 5px 5px 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .25s var(--ease), background .25s var(--ease);
}
.shot-thumb img { display: block; width: 100%; height: auto; border-radius: 4px; }
.shot-thumb span { display: block; padding-top: 5px; }
.shot-thumb:hover { background: rgba(10,10,10,.05); }
.shot-thumb.is-on { outline-color: var(--ink); background: rgba(10,10,10,.05); }

/* ───────── Feature sections — one pattern, used by all seven ───────── */
.feat {
  position: relative; z-index: 5;
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gut) var(--section);
}
.feat-head { max-width: 700px; margin-bottom: 44px; }
.feat-head.center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
/* #edit and #share both go straight from centered copy into a full-width
   screenshot — the generic 44px reads as too much air above an image this
   large, unlike the demo-grid sections it also serves. */
#edit .feat-head, #share .feat-head { margin-bottom: 24px; }
.feat-label {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
/* each pill gets its own light tint, so the six read as a set rather than
   one repeated chip. Green is already spoken for by the showcase thumbnail
   card, so it's left out here. */
#browse .duo-col:nth-child(1) .feat-label { background: #dce8fb; border-color: #c3d9f7; }
#browse .duo-col:nth-child(2) .feat-label { background: #fbe4e0; border-color: #f5c9bf; }
#edit .feat-label    { background: #fdf1e0; border-color: #f7e0bd; }
#move .feat-label    { background: #fbe4ee; border-color: #f5c9dc; }
#private .feat-label { background: #ece3fb; border-color: #dcd0f5; }
#share .feat-label   { background: #d9f2ec; border-color: #bfe6dc; }
.feat-head h2 {
  font-family: var(--fat);
  font-weight: 800;
  font-stretch: 100%;
  font-optical-sizing: auto;
  font-size: clamp(26px, 3.1vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
  text-wrap: balance;
}
.feat-head p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}

/* two feature columns sharing one row */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 56px); }
.duo-col .feat-head { max-width: none; margin-bottom: 26px; }
.duo-col .feat-head p { font-size: 15.5px; }

/* the three cards */
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.demo {
  padding: 0 0 4px;
  background: none;
}
.demo-stage {
  position: relative;
  height: 192px;
  border-radius: 11px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #f2f1ef 42%, #d9d8d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
/* just a corner of that section's pill color, layered over the original grey
   wash so the opposite corner keeps its depth instead of going flat white */
#browse .duo-col:nth-child(1) .demo-stage { background: radial-gradient(78% 65% at 12% 8%, #dce8fb 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#browse .duo-col:nth-child(2) .demo-stage { background: radial-gradient(78% 65% at 12% 8%, #fbe4e0 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#edit .demo-stage    { background: radial-gradient(78% 65% at 12% 8%, #fdf1e0 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#move .demo-stage    { background: radial-gradient(78% 65% at 12% 8%, #fbe4ee 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#private .demo-stage { background: radial-gradient(78% 65% at 12% 8%, #ece3fb 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
#share .demo-stage   { background: radial-gradient(78% 65% at 12% 8%, #d9f2ec 0%, transparent 78%), radial-gradient(120% 90% at 18% 8%, #ffffff 0%, #fdfdfc 42%, #f8f7f6 100%); }
.demo-body { padding: 18px 2px 0; }
.demo-body h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.demo-body p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.58;
  color: var(--ink);
}

/* a screenshot shown full width inside a section */
.feat-shot { margin: 0 0 20px; border-radius: 14px; overflow: hidden; }
.feat-shot img { display: block; width: 100%; height: auto; }
/* breaks out of .feat's narrower 1240px column to match the showcase image's
   own margins at the top of the page — same box (1440px, same side padding),
   centered on the viewport rather than on the section it sits in */
.feat-shot.wide {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1440px;
  padding: 0 clamp(16px, 3vw, 44px);
  box-sizing: border-box;
}

/* mini-UI primitives, drawn from the real app's palette */
.mini { font-family: var(--sans); color: var(--app-ink); }
.mini-panel {
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 6px 18px rgba(0,0,0,.07);
  padding: 12px 13px;
  width: 100%;
}
.mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--app-chip);
  font-size: 11.5px;
  color: var(--app-ink);
}
.mini-chip.on { background: var(--app-ink); color: #fff; }
.mini-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--app-ink);
  text-transform: uppercase;
}

/* ───────── Responsive ───────── */
@media (max-width: 980px) {
  .demo-grid { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 620px) {
  .demo-grid { grid-template-columns: 1fr; }
  /* the picker becomes a small swipeable strip rather than a stacked grid,
     still inside the one card, still riding up over the screenshot */
  .shot-thumbs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    max-width: calc(100% - 24px);
  }
  .shot-thumbs::-webkit-scrollbar { display: none; }
  .shot-thumb { width: 76px; font-size: 9px; scroll-snap-align: center; }
}

@media (max-width: 760px) {
  /* header buttons keep their full labels on mobile (no collapse), just compact */
  .site-header { padding: 10px 10px; gap: 8px; }
  .logo { padding: 7px; }
  .logo-mark svg { width: 26px; height: 26px; }
  .site-nav { gap: 6px; padding: 5px 6px; }
  .btn-appstore { font-size: 12.5px; gap: 6px; padding: 7px 12px 7px 10px; }
  .btn-appstore svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after, *::before { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}