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

    :root {
      /* ── Accent ── */
      --accent:          #d4a030;
      --accent-bg:       #3d2a08;
      --accent-fg:       #f0c060;
      --accent-muted:    #2a1f08;
      --accent-border:   rgba(212,160,48,0.35);

      /* ── Surfaces ── */
      --bg:              #0c0c0a;
      --surface:         #141412;
      --surface2:        #1e1e1e;
      --editor-bg:       #252526;

      /* ── Borders ── */
      --border:          rgba(255,255,255,0.06);
      --border-strong:   rgba(255,255,255,0.18);
      --border-divider:  #333;

      /* ── Text ── */
      --fg-1:            #e8e8e8;
      --fg-2:            #d4d4d4;
      --fg-3:            #888780;
      --fg-4:            #555555;

      /* Aliases for backwards compat with existing rules */
      --text:            var(--fg-2);
      --muted:           var(--fg-3);
      --faint:           var(--fg-4);
      --amber:           var(--accent);
      --amber-bg:        var(--accent-bg);
      --amber-border:    var(--accent-border);

      /* ── Semantic ── */
      --success:         #6a9955;
      --danger:          #f48771;

      /* ── Roadmap status tags — "cool trio", saturated, clear of amber ── */
      --status-next:        #34d399;                    /* emerald */
      --status-next-bg:     rgba(52,211,153,0.12);
      --status-next-border: rgba(52,211,153,0.32);
      --status-planned:        #38bdf8;                 /* sky blue */
      --status-planned-bg:     rgba(56,189,248,0.12);
      --status-planned-border: rgba(56,189,248,0.32);
      --status-exploring:        #a78bfa;               /* violet */
      --status-exploring-bg:     rgba(167,139,250,0.12);
      --status-exploring-border: rgba(167,139,250,0.32);

      /* ── Fonts ── */
      --font-sans:       'Public Sans', system-ui, -apple-system, sans-serif;
      --font-mono:       'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
      --font-display:    var(--font-mono);
      --font-body:       var(--font-sans);

      --nav-h:           52px;
    }

    html, body {
      height: 100%;
      background: var(--bg);
      color: var(--fg-2);
      font-family: var(--font-sans);
      font-size: 14px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── NAV ─────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-h);
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0px 40px;
      z-index: 100;
      gap: 52px;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      cursor: pointer;
      flex-shrink: 0;
    }

    .nav-links {
      display: flex;
      gap: 32px;
      flex: 1;
    }

    .nav-links a {
      color: var(--fg-3);
      text-decoration: none;
      font-size: 20px;
      font-family: var(--font-sans);
      letter-spacing: 0.04em;
      transition: color 0.15s;
      cursor: pointer;
    }

    .nav-links a:hover { color: var(--fg-1); }
    .nav-links a.active { color: var(--fg-2); }

    .nav-support {
      background: var(--accent-bg);
      border: 1px solid var(--accent);
      color: var(--accent);
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      padding: 6px 16px;
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s;
      white-space: nowrap;
    }

    .nav-support:hover {
      background: rgba(212,160,48,0.18);
      border-color: rgba(212,160,48,0.55);
    }

    /* ── SECTION TRANSITIONS ─────────────────────── */
    section {
      display: none;
      opacity: 0;
      transition: opacity 0.2s ease;
      padding-top: var(--nav-h);
    }

    section.active  { display: block; }
    section.visible { opacity: 1; }

    /* ── HOME — HERO ─────────────────────────────── */
    .hero {
      min-height: calc(80vh - var(--nav-h));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 40px;
    }

    .hero-hook {
      font-family: var(--font-mono);
      font-size: clamp(22px, 3vw, 36px);
      font-weight: 500;
      letter-spacing: -0.02em;
      color: var(--fg-1);
      line-height: 1.3;
      max-width: 520px;
      margin-bottom: 28px;
      cursor: default;
      user-select: none;
      transition: opacity 0.13s ease;
    }

    .hero-hook em {
      color: var(--accent);
      font-style: normal;
    }

    .hero-instruction {
      font-size: 15px;
      color: var(--fg-4);
      font-family: var(--font-sans);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    /* ── HERO — PLATFORM CARD (detected OS) ─────── */
    /* Width is set by the instruction line above; cards fill it. */
    .hero-cta {
      width: max-content;
      max-width: 100%;
    }

    .hero-download {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 6px;
    }

    .platform-card {
      position: relative;
      overflow: hidden;
      width: 100%;
      background: linear-gradient(180deg, var(--accent-muted) 0%, var(--surface) 60%);
      border: 1px solid var(--accent-border);
      border-radius: 18px;
      padding: 22px 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .platform-card > * { position: relative; }

    /* Amber glow from centre-top */
    .platform-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(120% 80% at 50% 0%, rgba(212,160,48,0.09), transparent 70%);
      pointer-events: none;
    }

    /* Gradient top edge */
    .platform-card::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-fg) 50%, var(--accent) 70%, transparent);
    }

    .platform-card-name {
      font-family: var(--font-sans);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: var(--fg-1);
    }

    .platform-card-version {
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--fg-3);
      margin-top: 4px;
      margin-bottom: 38px;
    }

    /* Full accent fill — matches .btn-download-free / .donate-submit-btn */
    .btn-platform-download {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 13px 16px;
      border-radius: 4px;
      border: none;
      background: var(--accent);
      color: #1a1200;
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: opacity 0.15s, transform 0.1s;
    }
    .btn-platform-download:hover  { opacity: 0.88; }
    .btn-platform-download:active { transform: scale(0.99); }

    /* Free / Pay split — two equal buttons with a quiet OR between */
    .platform-choice-row {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .platform-choice-row .btn-platform-download {
      flex: 1;
      width: auto;
    }
    .platform-or {
      flex-shrink: 0;
      font-family: var(--font-sans);
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--fg-4);
    }

    .platform-other {
      font-size: 13px;
      color: var(--fg-4);
      margin-top: 14px;
      font-family: var(--font-sans);
    }
    .platform-other a { color: var(--accent); text-decoration: none; }
    .platform-other a:hover { text-decoration: underline; }

    /* Fallback — two equal-weight buttons + version */
    .platform-fallback {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .platform-fallback .btn-platform-download + .btn-platform-download {
      margin-top: 10px;
    }
    .platform-fallback-version {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--fg-4);
      text-align: center;
      margin-top: 14px;
    }

    /* ── HOME — LOWER (PREVIEW + BLURB) ─────────── */
    .home-lower {
      display: grid;
      grid-template-columns: 1fr 33%;
      border-top: 1px solid var(--border);
      min-height: 0;
    }

    .preview-col {
      padding: 48px 40px 56px 64px;
      border-right: 1px solid var(--border);
    }

    .preview-label {
      font-size: 13px;
      font-family: var(--font-sans);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--fg-4);
      margin-bottom: 20px;
    }

    /* ── SHARED — INLINE ELEMENTS ────────────────── */
    .inline-code {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 12px;
      font-variant-ligatures: none;
    }

    /* ── BLURB COLUMN ────────────────────────────── */
    .blurb-col {
      padding: 48px 48px 56px 44px;
    }

    .blurb-heading {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--fg-4);
      margin-bottom: 20px;
    }

    .community-box {
      margin-top: 40px;
      min-height: 72px;
      padding: 0 12px 0 0;
      width: 425px;
      display: flex;
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 3px;
    }

    .community-text {
      padding-left: 12px;
      font-size: 22px;
      font-family: var(--font-mono);
      color: var(--fg-3);
      line-height: 1.4;
    }

    .community-icon {
      margin-left: auto;
      text-decoration: none;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #5865F2;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .community-icon svg {
      width: 28px;
      height: auto;
    }

    .community-icon-ig {
      background: radial-gradient(circle at 30% 110%,
        #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
    }

    .community-box + .community-box {
      margin-top: 16px;
    }

    .blurb-points {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .blurb-points li {
      display: flex;
      gap: 12px;
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.65;
      align-items: flex-start;
    }

    .blurb-points li::before {
      content: '>';
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      flex-shrink: 0;
      margin-top: 0px;
    }

    /* ── FOOTER ──────────────────────────────────── */
    .site-footer {
      border-top: 1px solid var(--border);
      padding: 22px 64px;
      font-size: 13px;
      color: var(--fg-4);
      display: flex;
      justify-content: space-between;
      align-items: center;
      letter-spacing: 0.04em;
      font-family: var(--font-sans);
    }

    .footer-quote {
      font-family: var(--font-mono);
      color: var(--accent);
      letter-spacing: -0.01em;
    }

    /* ── DOCUMENTATION ───────────────────────────── */
    html { scroll-behavior: smooth; }

    .docs-page {
      min-height: calc(100vh - var(--nav-h));
      max-width: 1600px;
      margin: 0 auto;
      padding: 64px 64px 96px 84px;
    }

    .docs-layout {
      display: grid;
      grid-template-columns: 250px 1fr;
      grid-template-areas:
        ".   title"
        "toc content";
      column-gap: 24px;
      align-items: start;
    }

    .docs-content { min-width: 0; grid-area: content; }

    /* ── CONTENTS PANEL ── */
    .docs-toc {
      grid-area: toc;
      position: sticky;
      top: calc(var(--nav-h) + 24px);
      left: auto;
      right: auto;
      z-index: auto;
      align-self: flex-start;
      height: auto;
      padding: 0;
      gap: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
    }

    .docs-toc a {
      display: block;
      text-align: left;
      text-decoration: none;
      line-height: 23.6px;
      padding-top: 5px;
      padding-bottom: 5px;
      border-radius: 4.8px;
      transition: background 0.12s ease, color 0.12s ease;
    }

    .docs-toc a:hover {
      background: var(--accent-bg);
      color: var(--accent);
    }

    .docs-toc-head {
      font-size: 14px;
      font-weight: 400;
      font-family: 'Martian Mono', var(--font-mono);
      color: var(--fg-1);
      padding-left: 8px;
    }

    .docs-toc-sub {
      font-size: 14px;
      font-weight: 400;
      color: var(--fg-2);
      padding-left: 28px;
    }

    /* Anchor targets clear the fixed nav when scrolled to */
    .docs-section-title,
    .about-section-label { scroll-margin-top: calc(var(--nav-h) + 24px); }

    .docs-page .page-heading {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--fg-1);
      margin-bottom: 10px;
    }

    .docs-page .about-premise {
      grid-area: title;
      font-size: 24px;
      margin-bottom: 10px;
      padding-bottom: 0;
      border-bottom: none;
    }

    .docs-page .docs-wip {
      margin-bottom: 48px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }

    /* Long-form docs copy — readable left-aligned column under the header */
    .docs-body {
      max-width: 820px;
      text-align: justify;
    }

    .docs-section-title {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--fg-1);
      margin-top: 16px;
      margin-bottom: 22px;
    }

    .docs-body .docs-intro {
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.9;
      margin-bottom: 32px;
      font-family: var(--font-sans);
    }

    .docs-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 4px;
    }

    .docs-list li {
      position: relative;
      padding-left: 18px;
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.7;
      font-family: var(--font-sans);
    }

    .docs-list li::before {
      content: '>';
      position: absolute;
      left: 0;
      color: var(--accent);
      font-family: var(--font-mono);
    }

    .docs-list li strong { color: var(--fg-2); font-weight: 600; }

    .docs-uth {
      font-style: italic;
      color: var(--fg-4);
    }

    /* ── KEYBOARD KEYCAPS ── */
    .kbd {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      color: var(--fg-2);
      background: var(--surface2);
      border: 1px solid var(--border-strong);
      border-bottom-width: 2px;
      border-radius: 4px;
      padding: 3px 6px;
      white-space: nowrap;
      vertical-align: baseline;
    }

    /* ── MARKDOWN GUIDE (two-column rows) ── */
    .md-guide-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 24px;
      align-items: baseline;
      margin-bottom: 14px;
    }
    .md-guide-head .about-section-label { margin-bottom: 0; }
    .md-guide-head-cols {
      display: flex;
      justify-content: space-between;
      padding: 0 14px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--fg-4);
      font-family: var(--font-sans);
    }
    .md-guide { display: flex; flex-direction: column; margin-top: 4px; }
    .md-guide-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 24px;
      padding: 14px 0;
      border-top: 1px solid var(--border);
      align-items: center;
    }
    .md-guide-row:first-child { border-top: none; padding-top: 0; }
    .md-guide-desc {
      font-size: 15px; color: var(--fg-3); line-height: 1.7;
      font-family: var(--font-sans);
    }
    .md-guide-desc strong { color: var(--fg-2); font-weight: 600; }
    .md-guide-eg {
      font-size: 15px; color: var(--fg-2); line-height: 1.7;
      font-family: var(--font-sans);
      background: var(--editor-bg);
      border: 1px solid var(--border);
      border-left: 2px solid var(--accent);
      border-radius: 6px;
      padding: 10px 14px;
      display: grid;
      grid-template-columns: 130px 1.6em 1fr;
      align-items: center;
    }
    .md-guide-eg > .inline-code { justify-self: start; }
    .md-arrow { color: var(--fg-4); justify-self: center; }
    .md-guide-eg > :last-child { justify-self: end; }
    .md-guide-eg a { color: var(--accent); }

    /* Rendered-result helpers (right of the arrow) */
    .md-render-h {
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 18px;
      color: var(--fg-1);
    }
    .md-render-quote {
      border-left: 2px solid var(--accent);
      padding-left: 10px;
      color: var(--fg-3);
      font-style: italic;
    }
    .md-render-hr {
      display: inline-block;
      width: 100%;
      min-width: 80px;
      height: 0;
      border-top: 1px solid var(--border-strong);
      vertical-align: middle;
    }
    .md-render-code,
    .md-render-codeblock {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--fg-1);
      background: var(--bg);
      border: 1px solid var(--border-strong);
      border-radius: 4px;
    }
    .md-render-code { padding: 2px 7px; }
    .md-render-codeblock { display: inline-block; padding: 6px 10px; }

    /* ── ABOUT ───────────────────────────────────── */
    .about-page {
      max-width: 1600px;
      margin: 0 auto;
      padding: 32px 64px 96px;
    }

    .about-sections-grid {
      display: flex;
      flex-direction: column;
      max-width: 720px;
      gap: 0;
      margin: 0 auto;
    }

    .about-sections-grid .about-section {
      padding-bottom: 16px;
      margin-bottom: 36px;
      border-bottom: 1px solid var(--border);
    }

    .about-sections-grid .about-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    @media (max-width: 640px) {
      .about-page { padding: 48px 32px 72px; }
    }

    .page-heading {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--fg-1);
      margin-bottom: 10px;
    }

    .about-premise {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 400;
      color: var(--accent);
      letter-spacing: -0.01em;
      margin-bottom: 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--border);
    }

    .about-section {
      margin-bottom: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid var(--border);
      text-align: justify;
    }

    .about-section:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .about-section-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--fg-4);
      margin-bottom: 14px;
      font-family: var(--font-sans);
    }

    .about-section p {
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.9;
      margin-bottom: 14px;
      font-family: var(--font-sans);
    }

    .about-section p:last-child { margin-bottom: 0; }

    .about-section p + p.donate-p { margin-top: 0; }
    .about-section p:has(+ p.donate-p) { margin-bottom: 6px; }

    .donate-inline-btn {
      display: inline-block;
      margin-left: 0px;
      margin-bottom: 6px;
      padding: 2px 10px;
      font-size: 13px;
      font-family: var(--font-sans);
      font-weight: 500;
      color: var(--fg-3);
      background: transparent;
      border: 1px solid var(--border-strong);
      border-radius: 4px;
      text-decoration: none;
      vertical-align: baseline;
      transition: color 120ms ease, background 120ms ease;
    }
    .donate-inline-btn:hover {
      color: var(--accent);
      border-color: var(--border-strong);
      background: var(--surface2);
    }

    /* ── HOME ROADMAP TEASER ─────────────────────── */
    .roadmap-teaser {
      max-width: 720px;
      margin: 56px auto 0;
      padding-top: 48px;
      border-top: 1px solid var(--border);
    }

    .roadmap-teaser-card {
      position: relative;
      padding: 28px 32px;
      border-radius: 10px;
      border: 1px solid var(--accent-border);
      background: linear-gradient(160deg, var(--accent-muted) 0%, var(--surface) 60%);
      overflow: hidden;
    }

    /* Amber halo behind the top-left */
    .roadmap-teaser-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(120% 80% at 20% 0%, rgba(212,160,48,0.18), transparent 70%);
      pointer-events: none;
    }

    /* Gradient top edge */
    .roadmap-teaser-card::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-fg) 50%, var(--accent) 70%, transparent);
    }

    .roadmap-teaser-badge {
      position: relative;
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--bg);
      padding: 3px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent-fg), var(--accent));
      margin-bottom: 16px;
    }

    .roadmap-teaser-title {
      position: relative;
      font-family: var(--font-sans);
      font-size: 22px;
      font-weight: 700;
      line-height: 1.3;
      color: var(--fg-1);
      margin-bottom: 18px;
    }

    .roadmap-teaser-link {
      position: relative;
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 500;
      color: var(--accent);
      text-decoration: none;
      transition: color 120ms ease;
    }
    .roadmap-teaser-link:hover { color: var(--accent-fg); }

    @media (max-width: 640px) {
      .roadmap-teaser { margin-top: 40px; padding-top: 36px; }
      .roadmap-teaser-card { padding: 24px 22px; }
      .roadmap-teaser-title { font-size: 19px; }
    }

    /* ── SUPPORT ─────────────────────────────────── */
    .support-page {
      min-height: calc(100vh - var(--nav-h));
      max-width: none;
      margin: 0;
      padding: 64px 40px 96px;
    }

    .support-grid {
      display: grid;
      grid-template-columns: minmax(460px, 1fr) 1fr;
      gap: 72px;
      align-items: start;
    }

    .support-main { max-width: 460px; margin-left: auto; }

    /* Right column — Nelson's letter */
    .support-copy {
      max-width: 640px;
      margin: 0;
      font-size: 16px;
      line-height: 1.85;
      color: var(--fg-3);
      font-family: var(--font-sans);
    }
    .support-copy .page-heading { line-height: 1.6; }
    .support-copy p { margin: 0 0 18px; text-align: justify; }
    .support-copy a { color: var(--accent); text-decoration: none; }
    .support-copy a:hover { text-decoration: underline; }
    .support-copy .support-sign {
      margin-top: 24px;
      color: var(--fg-2);
      font-weight: 500;
    }

    .support-page .page-heading { margin-bottom: 14px; }

    .page-sub {
      font-size: 16px;
      color: var(--fg-3);
      line-height: 1.85;
      max-width: 500px;
      margin-bottom: 52px;
      text-align: justify;
      font-family: var(--font-sans);
    }

    /* ── SUPPORT — DONATE WIDGET & FUNDING TRACKERS ── */
      .donate-widget { max-width: 460px; }

      .donate-amt-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 10px;
      }

      .donate-amt-btn {
        padding: 16px 8px;
        border: 1px solid var(--border-strong);
        border-radius: 4px;
        background: var(--surface);
        color: var(--fg-2);
        font-family: var(--font-sans);
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
      }
      .donate-amt-btn:hover { background: var(--surface2); border-color: rgba(255,255,255,0.28); }
      .donate-amt-btn.selected {
        border: 1.5px solid var(--accent);
        background: var(--accent-bg);
        color: var(--accent-fg);
      }
      .donate-amt-custom { grid-column: 1 / -1; font-size: 14px; }

      .donate-toggle-row {
        padding: 14px 16px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 4px;
        margin-bottom: 20px;
        transition: opacity 0.2s;
      }
      .donate-toggle-inner { display: flex; align-items: center; justify-content: space-between; }
      .donate-toggle-label { font-size: 14px; font-weight: 500; color: var(--fg-2); margin-bottom: 2px; font-family: var(--font-sans); }
      .donate-toggle-sub   { font-size: 12px; color: var(--fg-3); font-family: var(--font-sans); }

      .donate-toggle-track {
        position: relative;
        width: 42px; height: 24px;
        background: var(--border-strong);
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
      }
      .donate-toggle-track.on { background: var(--accent); }
      .donate-toggle-track.disabled { cursor: default; }
      .donate-toggle-thumb {
        position: absolute;
        top: 3px; left: 3px;
        width: 18px; height: 18px;
        border-radius: 50%;
        background: white;
        transition: transform 0.2s;
      }
      .donate-toggle-track.on .donate-toggle-thumb { transform: translateX(18px); }

      .donate-custom-note {
        font-size: 12px;
        color: var(--fg-3);
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
        display: none;
        line-height: 1.5;
        font-family: var(--font-sans);
      }
      .donate-custom-note.visible { display: block; }

      .donate-submit-btn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 14px 16px;
        border-radius: 4px;
        border: none;
        background: var(--accent);
        color: #1a1200;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: opacity 0.15s, transform 0.1s;
      }
      .donate-submit-btn::after {
        content: "";
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask: url("new_tab.svg") center / contain no-repeat;
                mask: url("new_tab.svg") center / contain no-repeat;
      }
      .donate-submit-btn:hover { opacity: 0.88; }
      .donate-submit-btn:active { transform: scale(0.99); }
      .donate-submit-btn:disabled {
        background: var(--surface2);
        color: var(--fg-4);
        cursor: not-allowed;
        transform: none;
        opacity: 1;
      }

      .donate-secure-note {
        font-size: 13px;
        color: var(--fg-1);
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
        font-family: var(--font-sans);
      }
      .donate-lock-icon { width: 12px; height: 12px; opacity: 0.5; }

      /* ── FUNDING TRACKERS ── */
      .funding-trackers {
        max-width: 460px;
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .tracker-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }
      .tracker-label {
        font-size: 14px;
        font-weight: 600;
        color: var(--fg-2);
        font-family: var(--font-sans);
      }
      .tracker-pct {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--accent);
        flex-shrink: 0;
      }
      .tracker-track {
        position: relative;
        height: 32px;
        background: var(--surface);
        border: 1px solid var(--accent);
        border-radius: 8px;
        overflow: hidden;
      }
      .tracker-fill {
        height: 100%;
        width: 0;
        background: var(--accent);
        transition: width 0.6s ease;
      }
      /* Done state — fires automatically at 100% (see renderTracker) */
      .tracker.done .tracker-fill { background: var(--accent-bg); }
      .tracker-done-label {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--accent);
        pointer-events: none;
      }
      .tracker.done .tracker-done-label { display: flex; }
      .tracker-figure {
        font-size: 12px;
        color: var(--fg-3);
        margin-top: 8px;
        font-family: var(--font-sans);
      }
      .tracker-note {
        font-size: 12px;
        color: var(--fg-4);
        margin-top: 6px;
        font-family: var(--font-sans);
      }
      .tracker-lock-note {
        font-size: 12px;
        color: var(--fg-4);
        margin-top: 8px;
        font-family: var(--font-sans);
        display: none;
      }
      /* Locked (macOS gated until monthly is funded) */
      .tracker.locked { opacity: 0.5; }
      .tracker.locked .tracker-pct { color: var(--fg-4); }
      .tracker.locked .tracker-lock-note { display: block; }

    /* ── DOWNLOAD PAGE ──────────────────────────── */
    .download-page {
      min-height: calc(100vh - var(--nav-h));
      max-width: 640px;
      margin: 0 auto;
      padding: 64px 40px 96px;
    }
    .download-page .page-heading { margin-bottom: 14px; }

    /* Widen page content to the full 640px container (overrides shared caps) */
    .download-page .donate-widget,
    .download-page .page-sub { max-width: 640px; }

    .free-download {
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }
    .free-download-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-align: center;
      color: var(--fg-4);
      margin-bottom: 16px;
      font-family: var(--font-sans);
    }

    /* Same visual weight as .donate-submit-btn, minus the new-tab glyph */
    .btn-download-free {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 16px;
      border-radius: 4px;
      border: none;
      background: var(--accent);
      color: #1a1200;
      font-family: var(--font-sans);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: opacity 0.15s, transform 0.1s;
    }
    .btn-download-free:hover  { opacity: 0.88; }
    .btn-download-free:active { transform: scale(0.99); }
    .btn-download-free + .btn-download-free { margin-top: 10px; }

    .fd-other {
      margin-top: 12px;
      font-size: 13px;
      color: var(--fg-3);
      text-align: center;
      font-family: var(--font-sans);
    }
    .fd-other a { color: var(--accent); text-decoration: none; }
    .fd-other a:hover { text-decoration: underline; }

    .fd-version {
      margin-top: 16px;
      font-size: 12px;
      color: var(--fg-4);
      text-align: center;
      font-family: var(--font-sans);
    }
    .fd-version span { font-family: var(--font-mono); }

    /* ── THANKS PAGE ────────────────────────────── */
    /* Match the gap above the divider to the gap below it (28px both sides). */
    #thanks .page-sub      { margin-bottom: 28px; }
    #thanks .free-download { margin-top: 0; }
    #free-dl-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
    .thanks-brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      margin-top: 30px;
      opacity: 0.9;
    }
    .thanks-brand img,
    .thanks-brand svg { display: block; flex-shrink: 0; }

    /* ── SYNOPSIS PAGE ──────────────────────────── */
    /* Wide two-row layout: percentage side margins, not a fixed max-width. */
    .synopsis-page {
      min-height: calc(100vh - var(--nav-h));
      margin: 0 auto;
      padding: 64px 5vw 40px;
    }

    .synopsis-page .page-heading { margin-bottom: 10px; }

    .synopsis-intro {
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.9;
      font-family: var(--font-sans);
      margin-bottom: 8px;
    }

    /* Intro aligns to the Roadmap column (5fr of the 5fr/3fr band, 40px gap) */
    .synopsis-page .synopsis-intro { max-width: calc(62.5% - 25px); }

    /* Anchor targets clear the fixed nav when jumped to */
    .synopsis-section-title { scroll-margin-top: calc(var(--nav-h) + 24px); }

    /* Row 1 — roadmap / patch notes, ratio held at 5:3.
       Default align-items (stretch) + the height:0 trick on .synopsis-patch
       make the roadmap card the sole height authority for the row. */
    .synopsis-band {
      display: grid;
      grid-template-columns: 3fr 5fr;
      gap: 40px;
      margin-top: 40px;
    }

    /* Row 2 — community (45%) / support (45%) */
    .synopsis-row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
    }

    .synopsis-section-title {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--fg-1);
      margin-bottom: 22px;
    }

    /* ── Section panels ── */
    /* All four sections are cards. Roadmap + support (the forward-looking
       pair) wear the amber-gradient treatment from the home download card;
       patch notes + community sit back in quiet surface panels. */
    .synopsis-roadmap,
    .synopsis-patch,
    .synopsis-community,
    .synopsis-support {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      padding: 28px 30px;
    }

    /* ── Roadmap — amber card; gradient + glow pooling at the bottom-right ── */
    .synopsis-roadmap {
      border: 1px solid var(--accent-border);
      background:
        radial-gradient(120% 90% at 100% 100%, rgba(212,160,48,0.18), transparent 65%),
        linear-gradient(315deg, var(--accent-muted) 0%, var(--surface) 55%);
    }

    /* ── Patch notes — top-right gradient, toned down; no edge bars,
         no shadow. Tune the glow intensity (0.10) ── */
    /* height: 0 keeps this card from contributing to the grid row's size —
       the roadmap card alone sets the row height — while min-height: 100%
       stretches it back to fill that height. Overflow scrolls in .patch-scroll. */
    .synopsis-patch {
      border: 1px solid var(--accent-border);
      background:
        radial-gradient(100% 80% at 100% 0%, rgba(212,160,48,0.10), transparent 60%),
        linear-gradient(225deg, var(--accent-muted) 0%, var(--surface) 50%);
      height: 0;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
    .synopsis-patch .synopsis-section-title { flex-shrink: 0; }

    /* Scrollable version history under the pinned "Patch Notes" title */
    .patch-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding-right: 12px;
      scrollbar-width: thin;
      scrollbar-color: var(--border-strong) transparent;
    }
    .patch-scroll::-webkit-scrollbar { width: 8px; }
    .patch-scroll::-webkit-scrollbar-track { background: transparent; }
    .patch-scroll::-webkit-scrollbar-thumb {
      background: var(--border-strong);
      border-radius: 4px;
    }

    /* ── Community + Support — mirrored side glows, as if lit from the gap
         between them; toned down to match patch notes. Tune glow (0.10) ── */
    .synopsis-community,
    .synopsis-support {
      border: 1px solid var(--accent-border);
    }
    /* Community sits on the left — lit from its bottom-right corner */
    .synopsis-community {
      background:
        radial-gradient(100% 80% at 100% 100%, rgba(212,160,48,0.10), transparent 60%),
        linear-gradient(315deg, var(--accent-muted) 0%, var(--surface) 50%);
    }
    /* Support sits on the right — lit from its bottom-left corner */
    .synopsis-support {
      background:
        radial-gradient(100% 80% at 0% 100%, rgba(212,160,48,0.10), transparent 60%),
        linear-gradient(45deg, var(--accent-muted) 0%, var(--surface) 50%);
    }

    /* ── Roadmap list ── */
    .roadmap-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .roadmap-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .roadmap-item:last-child { border-bottom: none; padding-bottom: 0; }

    .roadmap-status {
      flex-shrink: 0;
      width: 92px;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 0;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    .roadmap-status.is-next {
      color: var(--status-next);
      background: var(--status-next-bg);
      border-color: var(--status-next-border);
    }
    .roadmap-status.is-building {
      color: var(--accent);
      background: var(--accent-bg);
      border-color: var(--accent);
    }
    .roadmap-status.is-planned {
      color: var(--status-planned);
      background: var(--status-planned-bg);
      border-color: var(--status-planned-border);
    }
    .roadmap-status.is-exploring {
      color: var(--status-exploring);
      background: var(--status-exploring-bg);
      border-color: var(--status-exploring-border);
    }

    .roadmap-item-title {
      font-family: var(--font-sans);
      font-size: 16px;
      font-weight: 600;
      color: var(--fg-1);
      line-height: 1.4;
      margin-bottom: 4px;
    }
    .roadmap-item-desc {
      font-size: 14px;
      color: var(--fg-3);
      line-height: 1.6;
      font-family: var(--font-sans);
    }

    /* ── Patch notes — append-only; template in WEBSITE_UPDATES.md ── */
    .patch-block {
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .patch-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    /* Summary row — the always-visible header of each <details> block */
    .patch-head {
      display: flex;
      align-items: baseline;
      gap: 10px;
      cursor: pointer;
      list-style: none;              /* hide the browser's default marker */
      user-select: none;
    }
    .patch-head::-webkit-details-marker { display: none; }
    .patch-head:focus-visible {
      outline: 1px solid var(--accent-border);
      outline-offset: 3px;
      border-radius: 4px;
    }
    /* Gap below the header only when the block is open */
    details[open] > .patch-head { margin-bottom: 10px; }

    /* Caret — chevron right of the version number; points right when
       collapsed, rotates to point down when open */
    .patch-caret {
      align-self: center;
      width: 7px;
      height: 7px;
      flex-shrink: 0;
      border-right: 1.5px solid var(--fg-4);
      border-bottom: 1.5px solid var(--fg-4);
      transform: rotate(-45deg);
      transition: transform 0.18s ease, border-color 0.15s ease;
    }
    details[open] > .patch-head .patch-caret { transform: rotate(45deg); }
    .patch-head:hover .patch-caret { border-color: var(--accent); }
    .patch-version {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--fg-1);
    }
    .patch-date {
      margin-left: auto;
      font-size: 13px;
      color: var(--fg-4);
      font-family: var(--font-sans);
    }
    .patch-intro {
      font-size: 14px;
      color: var(--fg-3);
      line-height: 1.6;
      font-family: var(--font-sans);
      margin-bottom: 10px;
    }
    .patch-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .patch-list li {
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      color: var(--fg-3);
      line-height: 1.6;
      font-family: var(--font-sans);
    }
    .patch-list li::before {
      content: '>';
      position: absolute;
      left: 0;
      color: var(--accent);
      font-family: var(--font-mono);
    }

    /* ── Community intent ── */
    .synopsis-community p {
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.9;
      margin-bottom: 14px;
      font-family: var(--font-sans);
    }
    .synopsis-community p:last-child { margin-bottom: 0; }

    .synopsis-community-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: 28px;
    }
    .synopsis-community-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    /* neutralise the right-push .community-icon uses inside index's box */
    .synopsis-community-links .community-icon {
      margin-left: 0;
    }
    .synopsis-community-link-title {
      font-size: 22px;
      font-family: var(--font-mono);
      color: var(--fg-3);
      line-height: 1.4;
    }

    /* ── Support CTA copy — matches community text (panel styling shared above) ── */
    .synopsis-support p {
      font-size: 15px;
      color: var(--fg-3);
      line-height: 1.9;
      margin-bottom: 14px;
      font-family: var(--font-sans);
    }
    .synopsis-support p:last-of-type { margin-bottom: 18px; }
    .synopsis-support-cta {
      display: inline-block;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 500;
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid var(--accent-border);
      padding-bottom: 2px;
      transition: border-color 0.15s ease;
    }
    .synopsis-support-cta:hover { border-color: var(--accent); }

    /* Stack everything below 720px */
    @media (max-width: 720px) {
      .synopsis-page .synopsis-intro { max-width: none; }
      .synopsis-band,
      .synopsis-row2 { grid-template-columns: 1fr; gap: 32px; }
      .synopsis-row2 { margin-top: 40px; padding-top: 32px; }
      .synopsis-roadmap,
      .synopsis-patch,
      .synopsis-community,
      .synopsis-support { padding: 22px 20px; }

      /* Stacked cards: patch notes returns to natural height, no inner
         scroll — collapsed versions keep it compact */
      .synopsis-patch { height: auto; min-height: 0; }
      .patch-scroll {
        flex: none;
        min-height: auto;
        overflow: visible;
        padding-right: 0;
      }
    }

    /* ── FEEDBACK PAGE ───────────────────────────── */
    .feedback-page {
      min-height: calc(100vh - var(--nav-h));
      max-width: 600px;
      margin: 0 auto;
      padding: 64px 64px 96px;
    }

    .feedback-page .page-heading { margin-bottom: 10px; }

    /* Spacing separates the intro sentence from the "How is WriteLite…" line */
    .feedback-page .synopsis-intro {
      margin-bottom: 32px;
    }

    .feedback-page .about-premise {
      padding-bottom: 0;
      border-bottom: none;
    }

    .feedback-field-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--fg-4);
      margin-bottom: 14px;
      font-family: var(--font-sans);
    }

    .star-row {
      display: flex;
      gap: 8px;
      margin-bottom: 36px;
    }

    .star {
      font-size: 30px;
      color: var(--fg-4);
      cursor: pointer;
      transition: color 0.1s, transform 0.1s;
      line-height: 1;
      user-select: none;
    }

    .star.lit      { color: var(--accent); }
    .star.preview  { color: var(--accent); }

    .star:hover    { transform: scale(1.12); }

    .feedback-textarea {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border-strong);
      border-radius: 3px;
      color: var(--fg-2);
      font-family: var(--font-sans);
      font-size: 13px;
      line-height: 1.7;
      padding: 14px 16px;
      resize: vertical;
      min-height: 110px;
      margin-bottom: 20px;
      transition: border-color 0.15s;
      outline: none;
    }

    .feedback-textarea::placeholder { color: var(--fg-4); }
    .feedback-textarea:focus { border-color: var(--accent-border); }

    #feedback-submit:disabled {
      opacity: 0.28;
      cursor: not-allowed;
    }

    .feedback-thanks {
      padding: 32px 0;
    }

    .feedback-thanks-heading {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--fg-1);
      margin-bottom: 10px;
    }

    .feedback-thanks-stars {
      font-size: 22px;
      color: var(--accent);
      margin-bottom: 14px;
      letter-spacing: 2px;
    }

    .feedback-thanks p {
      font-size: 12px;
      color: var(--fg-3);
      line-height: 1.8;
      font-family: var(--font-sans);
    }

    /* ── BURGER MENU ─────────────────────────────── */
    .nav-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      padding: 4px;
      background: none;
      border: none;
      cursor: pointer;
      margin-left: auto;
      flex-shrink: 0;
      border-radius: 3px;
      transition: background 0.15s;
    }
    .nav-burger:hover { background: var(--surface2); }
    .nav-burger span {
      display: block;
      width: 20px;
      height: 1.5px;
      background: var(--fg-3);
      border-radius: 2px;
      transition: transform 0.22s ease, opacity 0.22s ease, width 0.22s ease;
      transform-origin: center;
    }
    .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity: 0; width: 0; }
    .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* Mobile nav drawer */
    .mobile-nav-drawer {
      display: none;
      position: fixed;
      top: var(--nav-h);
      left: 0; right: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border-strong);
      z-index: 99;
      flex-direction: column;
      padding: 8px 0 16px;
      transform: translateY(-8px);
      opacity: 0;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .mobile-nav-drawer.open {
      display: flex;
      transform: translateY(0);
      opacity: 1;
    }
    .mobile-nav-drawer a {
      display: block;
      padding: 13px 24px;
      color: var(--fg-3);
      text-decoration: none;
      font-size: 16px;
      font-family: var(--font-sans);
      letter-spacing: 0.02em;
      transition: color 0.15s, background 0.15s;
      cursor: pointer;
    }
    .mobile-nav-drawer a:hover,
    .mobile-nav-drawer a.active { color: var(--fg-1); background: var(--surface2); }
    .mobile-nav-drawer .mobile-nav-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 24px;
    }
    .mobile-nav-drawer .mobile-nav-support {
      margin: 4px 24px 0;
      display: block;
      text-align: center;
      background: var(--accent-bg);
      border: 1px solid var(--accent-border);
      color: var(--accent);
      font-weight: 500;
      border-radius: 3px;
      padding: 11px 16px;
      font-size: 14px;
      font-family: var(--font-sans);
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s;
    }
    .mobile-nav-drawer .mobile-nav-support:hover {
      background: rgba(212,160,48,0.18);
    }

    /* Tap overlay to close drawer */
    .mobile-nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 98;
      background: transparent;
    }
    .mobile-nav-overlay.open { display: block; }

    /* ── RESPONSIVE ──────────────────────────────── */
    @media (max-width: 960px) {
      /* Support: stack to a single column (donation above the letter) */
      .support-grid { grid-template-columns: 1fr; gap: 40px; }
      .support-main { max-width: none; margin-left: 0; }

      .home-lower { grid-template-columns: 1fr; }
      .preview-col {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 40px 32px;
      }
      .blurb-col { padding: 40px 32px; }
      nav { padding: 0 24px; gap: 16px; }
    }

    @media (max-width: 720px) {
      /* Nav: hide desktop links + support btn, show burger */
      nav { padding: 0 20px; gap: 12px; }
      .nav-links  { display: none; }
      .nav-support { display: none; }
      .nav-burger  { display: flex; }

      /* Hero */
      .hero { padding: 40px 24px; min-height: calc(70vh - var(--nav-h)); }
      .hero-hook { font-size: clamp(18px, 5.5vw, 28px); }
      .hero-instruction { font-size: 13px; letter-spacing: 0.05em; }

      /* Home lower */
      .preview-col { padding: 32px 24px; }
      .blurb-col   { padding: 32px 24px; }

      /* Pages: tighter padding */
      .about-page    { padding: 48px 24px 72px; }
      .docs-page     { padding: 48px 24px 72px; }
      .docs-toc      { display: none; }
      .docs-layout   {
        grid-template-columns: 1fr;
        grid-template-areas:
          "title"
          "content";
      }
      .md-guide-row  { grid-template-columns: 1fr; gap: 6px; }
      .synopsis-page { padding: 48px 24px 72px; }
      .feedback-page { padding: 48px 24px 72px; }
      .support-page  { padding: 48px 24px 72px; }
      .download-page { padding: 48px 24px 72px; }

      /* Feedback */
      .feedback-textarea { min-height: 90px; }

      /* Footer */
      .site-footer { padding: 20px 24px; flex-direction: column; gap: 8px; text-align: center; }

      /* Sub headings */
      .page-sub { font-size: 15px; margin-bottom: 36px; }
    }

    @media (max-width: 400px) {
      .hero-hook { font-size: 18px; }
      nav { padding: 0 16px; }
    }

    /* ── MOBILE DOWNLOAD NOTICE ──────────────────── */
    .mobile-notice {
      display: none;
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      z-index: 200;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      padding: 16px 20px;
      max-width: calc(100vw - 40px);
      width: 360px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      animation: noticeIn 0.22s ease forwards;
    }
    @keyframes noticeIn {
      from { opacity: 0; transform: translateX(-50%) translateY(12px); }
      to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    .mobile-notice.visible { display: block; }
    .mobile-notice-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .mobile-notice-title {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 500;
      color: var(--fg-1);
      letter-spacing: -0.01em;
    }
    .mobile-notice-close {
      background: none;
      border: none;
      color: var(--fg-4);
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
      padding: 0;
      flex-shrink: 0;
      transition: color 0.15s;
    }
    .mobile-notice-close:hover { color: var(--fg-2); }
    .mobile-notice p {
      font-size: 13px;
      color: var(--fg-3);
      line-height: 1.7;
      font-family: var(--font-sans);
    }