/* ============================================================
   MindmapMD — mindmapmd.app
   Warm paper aesthetic — light, wide-door, core-only.
   ─────────────────────────────────────────────────────────────
   Plain text goes in. A living map grows out.
   ============================================================ */

:root {
  /* Surface — warm paper (a drop of soil in the white, never sterile #fff) */
  --bg:           #faf8f4;
  --bg-soft:      #f3efe6;
  --panel:        #f6f2ea;
  --panel-hi:     #efe9dc;
  --rule:         #e4ddce;
  --rule-soft:    #ece6d9;

  /* Foreground — warm ink */
  --fg:           #1f1a14;
  --fg-dim:       #5a5347;
  --fg-faint:     #8a8274;
  --fg-mute:      #b4ab98;

  /* Brand colours — hue-aligned to the product palette (src/webview/layout.ts
     DEFAULT_PALETTE: green h150 / red h12 / cyan h210 / purple h300 / orange h55),
     but at L≈0.50 so text/links/thin marks clear AA (≥4.5:1) on warm paper. The
     canonical mid-tone (L=0.65) versions live in the icon + the rendered demo map,
     where they sit on graphics, not body text. */
  --green:        #007834;     /* brand, primary action, <em> — h150 */
  --green-soft:   rgba(0, 120, 52, 0.10);
  --amber:        #9d4700;     /* inline code, warnings — h55 (orange) */
  --cyan:         #00768f;     /* links — h210 */
  --rose:         #a3394e;     /* demo / tags only — h12 (red) */
  --violet:       #714ca6;     /* demo / tags only — h300 (purple) */

  /* Type — one humanist sans for everything (wordmark, headings, body);
     mono is reserved for the install command (a quoted line of code). */
  --font-sans:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-pixel:   var(--font-sans);   /* wordmark now rides the body sans — most unbranded */

  /* Geometry */
  /* Single content width used by every section so the hero, install
     command, demo screenshots, principles list, and coda all sit in
     the same column. Subpages (privacy / terms / 404) use the narrower
     --max-content for long-form prose. */
  --max-width:    920px;
  --max-content:  720px;

  /* Easing */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-step:    steps(20, end);
}

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

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

body {
  font-family: var(--font-sans);
  font-feature-settings: 'kern', 'liga';
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}


/* Subtle vignette — very low key, just to anchor the eye */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Warm paper, lit from one source (upper-left), edges sinking into a faint
     soil-coloured shadow so the white never reads as a flat, sterile sheet. */
  background:
    radial-gradient(ellipse 70% 60% at 38% 16%, rgba(74, 61, 50, 0.05), transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 55%, rgba(74, 61, 50, 0.06) 100%);
}

main { flex: 1; position: relative; z-index: 2; }

::selection {
  background: var(--green);
  color: var(--bg);
}

a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s linear, border-color 0.12s linear, background 0.12s linear;
}
a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}
a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

code, kbd, samp {
  font-family: inherit;
  font-size: 1em;
  color: var(--amber);
}

em {
  font-style: normal;
  color: var(--green);
  background: var(--green-soft);
  padding: 0 0.2em;
}

strong { color: var(--fg); font-weight: 600; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------
   Header — looks like a status bar
   ------------------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.86rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* No leading glyph on the brand — the voxel icon carries identification.
   The old ■ cube was a second mark competing with the icon beside it. */
.brand img {
  width: 24px;
  height: 24px;
  display: inline-block;
  /* voxel tree has its own silhouette + transparent bg — no radius/box needed */
}
.brand-name {
  color: var(--fg);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid var(--fg-mute);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s, box-shadow 0.12s;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 0;
  position: relative;
}
.btn::before { content: ''; }
.btn::after  { content: ''; }

.btn:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-soft);
}
.btn:hover::before,
.btn:hover::after { color: var(--green); }
.btn:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 2px;
}

.btn-primary {
  border-color: var(--green);
  color: var(--bg);
  background: var(--green);
  box-shadow: 4px 4px 0 0 #00541f;   /* hard isometric block shadow — a 3D voxel button (deep green) */
}
.btn-primary::before,
.btn-primary::after { color: var(--bg); }
.btn-primary:hover {
  background: #006a30;
  border-color: #006a30;
  color: var(--bg);
  box-shadow: 2px 2px 0 0 #00541f;   /* button presses down toward the page */
  transform: translate(2px, 2px);
}
.btn-primary:hover::before,
.btn-primary:hover::after { color: var(--bg); }

.btn-ghost {
  border-color: var(--rule);
  color: var(--fg-dim);
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
}
.btn-ghost:hover {
  color: var(--green);
  border-color: var(--green);
}

.btn-arrow {
  color: inherit;
  margin-left: 0.15em;
}

/* ------------------------------------------------------------
   Reveal animation
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: 0.05s; }
.reveal-2 { transition-delay: 0.13s; }
.reveal-3 { transition-delay: 0.22s; }
.reveal-4 { transition-delay: 0.32s; }
.reveal-5 { transition-delay: 0.44s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------
   Title + lede stay left-aligned (CLI terminal-output flow). Only
   the action area (CTA buttons, install command block, meta) is
   centred — see the .cta-row / .install-cli-prelude / .install-cmd /
   .hero-meta rules below. This puts visual weight on the install
   action without losing the CLI feel of the opening copy. */
.hero {
  padding: 3.5rem 0 2.5rem;
  position: relative;
}

/* No internal narrowing — .hero-inner is also .container, which caps
   width at var(--max-width). Adding a separate max-width here would
   override the container cap because the two rules have equal
   specificity and the later one wins. */

.hero-title {
  font-family: inherit;
  font-size: clamp(2rem, 3.9vw, 2.95rem);   /* a hero headline that commands (was max 2.4rem) */
  font-weight: 600;
  line-height: 1.22;                         /* tighter at display size */
  color: var(--fg);
  letter-spacing: -0.022em;                  /* refined display tracking */
  margin-bottom: 1rem;   /* H1↔sub kept near (one thought); the big gap lives above the H1 */
  text-wrap: balance;   /* even lines, no orphaned words / mid-phrase breaks */
}

.hero-thesis {
  color: var(--fg-dim);                 /* softer than the headline — clear hierarchy */
  font-size: 1.14rem;                   /* lede-sized (was 1.04rem) */
  line-height: 1.55;
  margin-bottom: 0.9rem;
  letter-spacing: -0.005em;
  text-wrap: balance;   /* keep "VS Code" / ".md" from breaking awkwardly */
}
.hero-thesis em {
  color: var(--green);
  background: transparent;
  padding: 0;
  font-style: normal;
}

/* Hero now leads with the product (the before→after demo), so the whole stack
   shares one centre line: H1, lede, demo, tagline, CTA. */
.hero-inner { text-align: center; }

/* Hero lockup — the voxel icon sits to the LEFT of the headline (a logo + title
   lockup), no shadow (flat, modern). The icon signs the brand; the headline
   declares; the demo below proves. Centred as one block; the text left-aligned. */
.hero-lockup {
  display: flex;
  flex-direction: row-reverse;        /* icon on the RIGHT, the headline on the left */
  align-items: flex-end;              /* the tree's base lines up with the text's bottom */
  justify-content: center;
  gap: clamp(1.2rem, 3.2vw, 2.4rem);
  max-width: 900px;
  margin: 0 auto 2.2rem;
}
.hero-icon {
  width: clamp(150px, 19vw, 200px);   /* bigger; no shadow */
  height: auto;
  flex: 0 0 auto;
}
.hero-lockup-text {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}
.hero-lockup .hero-title { text-align: left; margin-bottom: 0.55rem; }
.hero-lockup .hero-thesis { text-align: left; margin: 0; }

/* On narrow screens the lockup stacks (icon above the headline), centred. */
@media (max-width: 600px) {
  .hero-lockup { flex-direction: column; align-items: center; gap: 0.7rem; max-width: none; }
  .hero-icon { width: clamp(104px, 30vw, 140px); }
  .hero-lockup-text,
  .hero-lockup .hero-title,
  .hero-lockup .hero-thesis { text-align: center; }
}

.hero-title { text-align: center; }
.hero-title em {
  font-style: normal;
  color: var(--green);
  background: var(--green-soft);
  padding: 0;   /* flush highlight — no trailing gap before the following comma */
}
.hero-thesis { margin-left: auto; margin-right: auto; }   /* no width cap — one line on desktop, wraps naturally on mobile */

/* Hero map — the product shown big, filling the content width, wrapped in a
   light VS Code window frame so it reads at a glance as a real editor screenshot. */
.hero-map {
  margin: 1.75rem auto 1.1rem;
  max-width: 100%;
}

/* The window. The frame owns the border/shadow/radius; the capture inside is the
   pure map. A title bar (window dots + .md tab + "VS Code") sits on top. */
.editor-frame {
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset,
              0 22px 48px -28px rgba(74, 61, 50, 0.36),
              0 0 0 1px #e4ddce;
}

/* Title bar — the warm-paper take on VS Code's light title/tab strip. */
.editor-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.85rem 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}

/* Window dots — neutral warm-grey. Deliberately NOT the brand colours: the five
   palette hues code branch type inside the map (the guarded identity asset, see
   STRATEGY §2.8.4), so reusing them as window chrome would dilute that signal.
   Three identical muted dots read as generic window controls and nothing more. */
.editor-dots {
  display: inline-flex;
  gap: 0.4rem;
  padding-bottom: 0.5rem;
  flex: 0 0 auto;
}
.editor-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
  background: var(--fg-mute);
  opacity: 0.5;
}

/* The active editor tab — connected to the canvas below (same bg, no bottom border),
   pulled down 1px to sit over the bar's rule. Names the open file: On my mind.md. */
.editor-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  margin-bottom: -1px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-bottom-color: var(--bg);
  border-radius: 5px 5px 0 0;
  font-size: 0.8rem;
  color: var(--fg-dim);
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor-tab-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--fg-faint);   /* the markdown glyph's stroke — muted, like a real file icon */
}

/* "VS Code" affordance, far right — removes any doubt about which editor. */
.editor-app {
  margin-left: auto;
  padding-bottom: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  flex: 0 0 auto;
}

/* The map capture only (direct child) — NOT the tiny tab icon nested in the bar,
   which keeps its own 15px sizing. */
.editor-frame > img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

/* Fold-out source — real, selectable, left-aligned text: "it's all one .md file". */
.md-reveal {
  max-width: 640px;
  margin: 0 auto 1.7rem;
  text-align: left;
}
.md-reveal > summary {
  cursor: pointer;
  display: inline-block;
  font-size: 0.9rem;
  color: var(--cyan);
  list-style: none;
  padding: 0.3rem 0;
}
.md-reveal > summary::-webkit-details-marker { display: none; }
.md-reveal > summary::before { content: '▸\00a0'; color: var(--fg-faint); }
.md-reveal[open] > summary::before { content: '▾\00a0'; }
.md-reveal > summary:hover { color: var(--green); }
.md-reveal > summary code { color: var(--amber); }
.md-source {
  margin: 0.85rem 0 0;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--fg-dim);
  text-align: left;
  white-space: pre-wrap;
  overflow-x: auto;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;   /* parent .hero is text-align: center; this aligns the flex buttons too */
  margin-bottom: 1.5rem;
}

.hero-meta {
  color: var(--fg-faint);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-align: center;          /* sits with the centred CTAs + install card */
}
.hero-meta::before {
  content: '';
  color: var(--fg-mute);
}

/* ------------------------------------------------------------
   Section frame
   ------------------------------------------------------------ */
.cli-section {
  padding: 2.5rem 0 0.5rem;
}

.cli-section + .cli-section { padding-top: 2rem; }

.section-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--fg-faint);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
/* No leading glyph — the small-caps label + the dashed rule are enough structure.
   The cube is reserved for the wordmark (the seed) and the principles (the nodes). */
.section-bar::before {
  display: none;
}
.section-bar .section-name {
  color: var(--fg-dim);
}
.section-bar::after {
  content: '';
  flex: 1;
  height: 1px;
  border-top: 1px dashed var(--rule);
  margin-left: 0.35rem;
}

.section-heading {
  font-family: inherit;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 1.8rem;
  letter-spacing: -0.02em;
}
.section-heading em {
  font-style: normal;
  color: var(--green);
  background: transparent;
  padding: 0;
}
.section-heading::before {
  display: none;   /* let the words stand alone — no cube on headings */
}

/* ------------------------------------------------------------
   Principles — heading + numbered list
   ------------------------------------------------------------ */
.principles-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}

.principle {
  display: grid;
  grid-template-columns: 70px 200px 1fr;
  gap: 1.5rem 2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}

.principle-num {
  color: var(--green);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.principle-num::before { content: '■ '; }
.principle-num::after  { content: ''; }
/* All three principles are equal pillars — one brand-green node each, no colour
   coding. Multi-colour is reserved for the demo, where colour genuinely codes node
   type (the app's six colour-coded branches). The amber on principle 02 was a false
   signal — amber is the warning colour (see :root), and the principles aren't ranked. */

.principle-title {
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.principle-body {
  color: var(--fg-dim);
  font-size: 0.93rem;
  line-height: 1.7;
  max-width: 58ch;
}

.principle-body code { color: var(--amber); }
.principle-body em   { background: transparent; color: var(--green); padding: 0; }

/* The "No X" lead phrase on each principle. Same colour as the section
   heading's <em>less,</em> so a reader's eye links the three side-by-side
   "No …" phrases to the "less, by design." headline above. */
.principle-lead {
  color: var(--green);
  font-weight: 500;
  margin-right: 0.4em;
}

/* ------------------------------------------------------------
   Coda (closing CTA)
   ------------------------------------------------------------ */
.coda {
  padding: 3.5rem 0 3.5rem;
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(74, 61, 50, 0.04), transparent 70%);
  /* Section bar + heading stay left-aligned (matches the terminal flow
     of the rest of the page). Only the install button + meta are
     centred — see .coda-cta and .coda-meta below. */
}

/* Coda fills the container like every other section. .coda-inner is
   also .container, so leaving max-width unset lets the container's
   var(--max-width) cap apply. */

.coda-heading {
  font-family: inherit;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 500;
  color: var(--fg);
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.coda-heading::before {
  display: none;   /* no cube on headings */
}
.coda-heading code { color: var(--amber); }
.coda-heading em   { background: transparent; color: var(--green); padding: 0; }

.coda-meta {
  margin-top: 1.4rem;
  color: var(--fg-faint);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-align: center;          /* sits with the centred install button */
}

/* Wrapper around the closing CTA button — centres the inline-flex .btn */
.coda-cta {
  text-align: center;
  margin: 0.5rem 0;
}
.coda-meta::before {
  content: '';
  color: var(--fg-mute);
}

/* ------------------------------------------------------------
   Footer — final status line
   ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--bg-soft);
  padding: 1rem 0;
  font-size: 0.78rem;
  color: var(--fg-faint);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.copy {
  color: var(--fg-faint);
}
.copy::before {
  content: '';
  color: var(--fg-mute);
}
.copy strong { color: var(--fg-dim); font-weight: 500; }

.footer-nav {
  display: flex;
  gap: 1.2rem;
}
.footer-nav a {
  color: var(--fg-faint);
  border-bottom: none;
}
.footer-nav a::before {
  content: '';
  color: var(--fg-mute);
}
.footer-nav a:hover {
  color: var(--green);
}

/* ------------------------------------------------------------
   Subpages (privacy, terms, 404) — terminal article
   ------------------------------------------------------------ */
.page {
  padding: 2.5rem 0 4rem;
  position: relative;
  z-index: 2;
}

.page article {
  max-width: var(--max-content);
  margin: 0 auto;
}

.page h1 {
  font-family: inherit;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}
/* Markdown H1 marker (#), green — pairs with the "##" on h2 below so the page reads
   as Markdown source rendered. (Was "$ ", a shell prompt, which read as running a
   command named "Privacy"; the markdown "#" is on-thesis and on-brand.) */
.page h1::before {
  content: '';
  color: var(--green);
}

.page .lede {
  color: var(--fg-dim);
  margin-bottom: 2.5rem;
  font-size: 0.96rem;
  line-height: 1.65;
  border-left: 2px solid var(--green);
  padding-left: 1rem;
  background: var(--bg-soft);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 1rem;
}

.page h2 {
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--fg);
  margin-top: 2.6rem;
  margin-bottom: 0.85rem;
  letter-spacing: -0.005em;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.page h2::before {
  content: '';
}

.page p, .page li {
  color: var(--fg);
  font-size: 0.93rem;
  line-height: 1.75;
  margin-bottom: 0.9rem;
}
.page p { color: var(--fg-dim); }
.page p code,
.page li code { color: var(--amber); }

.page ul, .page ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--fg-dim);
}
.page li { color: var(--fg-dim); margin-bottom: 0.4rem; }
.page li::marker { color: var(--green); }

.page pre {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  font-family: inherit;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--fg);
  position: relative;
}
.page pre code { color: var(--fg); }

.page a:not(.btn) {
  color: var(--cyan);
  border-bottom: 1px dotted var(--cyan);
}
.page a:not(.btn):hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.page-meta {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  font-size: 0.78rem;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.page-meta::before {
  content: '';
  color: var(--fg-mute);
}

/* 404 */
.notfound { text-align: left; }
.notfound h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  color: var(--amber);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.notfound h1::before {
  content: '';
}
.notfound .lede {
  border-left: none;
  background: transparent;
  padding: 0;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------
   Features page — intro + clustered feature grid
   ------------------------------------------------------------ */
.features-intro { padding: 3rem 0 0.5rem; }

.features-title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--fg);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.features-title em {
  font-style: normal;
  color: var(--green);
  background: var(--green-soft);
  padding: 0;
}

.features-lede {
  color: var(--fg-dim);
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 62ch;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.features-lede code { color: var(--amber); }

.feature-cluster { padding: 1.6rem 0 0.5rem; }

/* Two-up grid; horizontal rules between rows echo the homepage principles list. */
.feature-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  border-top: 1px solid var(--rule-soft);
}
.feature {
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.feature-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
/* One brand-green node per feature — the same cube that marks the principles,
   tying the page back to the map's leaves without recolouring per item. */
.feature-title::before {
  content: '■';
  color: var(--green);
  font-size: 0.6em;
  flex: 0 0 auto;
}
.feature-title code { color: var(--amber); font-weight: 600; }

.feature-body {
  color: var(--fg-dim);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 52ch;
  padding-left: 1.1rem;   /* align under the title text, clearing the cube */
}
.feature-body code { color: var(--amber); }
.feature-body a {
  color: var(--cyan);
  border-bottom: 1px dotted var(--cyan);
}
.feature-body a:hover { color: var(--green); border-bottom-color: var(--green); }

/* Keycaps — used in feature copy and in the keyboard reference below. */
.feature-cluster kbd {
  font-family: var(--font-mono);
  font-size: 0.78em;
  background: var(--panel-hi);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.08em 0.42em;
  color: var(--fg);
  white-space: nowrap;
}

/* Sub-lede that introduces a cluster (rendering reference, shortcuts). */
.cluster-lede {
  color: var(--fg-dim);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 60ch;
  margin-bottom: 1.3rem;
}

/* The rendering reference is denser than the core features — slightly less
   vertical air per row so eight items stay scannable. */
.feature-grid-tight .feature { padding: 1.05rem 0; }

/* ------------------------------------------------------------
   Keyboard & mouse reference
   ------------------------------------------------------------ */
.keymap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.5rem;
}
.keymap-cat { margin-bottom: 1.6rem; }
.keymap-cat h3 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.keymap-cat dl { margin: 0; }

.key-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.key-row dt {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: baseline;
}
.key-row dd {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.86rem;
  line-height: 1.45;
}
.key-or { color: var(--fg-mute); font-size: 0.8em; }
/* Mouse gestures sit in the keycap column but read as labels, not keys. */
.key-mouse {
  font-size: 0.82rem;
  color: var(--fg-dim);
  font-style: italic;
}
.keymap-foot {
  margin-top: 0.4rem;
  color: var(--fg-faint);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Small print — commands + the by-design omissions. */
.feature-note {
  border-top: 1px dashed var(--rule);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}
.feature-note-row {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  color: var(--fg-dim);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.7rem;
}
.feature-note-row:last-child { margin-bottom: 0; }
.feature-note-label {
  flex: 0 0 88px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  padding-top: 0.15em;
}
.feature-note-row code { color: var(--amber); }
.feature-note-row a em {
  color: var(--green);
  background: transparent;
  padding: 0;
  font-style: normal;
}

/* Active nav link (the current page) */
.nav a[aria-current="page"] {
  color: var(--green);
  border-color: var(--green);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
  .keymap { grid-template-columns: 1fr; }
  .feature-note-row { flex-direction: column; gap: 0.2rem; }
  .feature-note-label { flex: none; }
}

@media (max-width: 820px) {
  .container { padding: 0 1.25rem; }

  .demo-arrow {
    font-size: 0.72rem;
    margin: 0.6rem 0 0.75rem;
  }

  .principle {
    grid-template-columns: 60px 1fr;
    gap: 0.6rem 1rem;
    padding: 1.2rem 0;
  }
  .principle-body {
    grid-column: 1 / -1;
  }
  .principle-title { font-size: 0.95rem; }
}

@media (max-width: 540px) {
  html { font-size: 14px; }

  .hero { padding: 2.5rem 0 1.75rem; }
  .cli-section { padding-top: 1.75rem; }
  .coda { padding: 2.75rem 0; }

  /* Slightly tighter size + letter-spacing on small screens so the tagline
     "Your mindmap is just Markdown." sits comfortably at 375/414/540 widths. */
  .hero-title {
    font-size: clamp(1.25rem, 5.4vw, 1.6rem);
    letter-spacing: -0.025em;
  }

  .footer-inner {
    flex-direction: column;
    gap: 0.65rem;
    align-items: flex-start;
  }
  .footer-nav { gap: 0.9rem; }
}