/* The pages that aren't the overview: features, FAQ, legal. */

/* legal pages */
  .legal { max-width: 74ch; display: grid; gap: 18px; }
  .legal h2 { font-size: clamp(26px, 3vw, 34px); }
  .legal h3 { font-size: 17px; margin-top: 10px; }
  .legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.62; }
  .legal ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
  .legal b { color: var(--ink); font-weight: 600; }
  .legal .stamp-line { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
  .legal .fill { border-bottom: 1px dashed var(--accent); color: var(--accent); }
  .stamp { position: absolute; top: 7px; left: 7px; z-index: 2; width: 16px; height: 16px; border: 1.2px solid rgba(255,255,255,.75); border-radius: 2px; }
  .draft-note { font-family: var(--mono); font-size: 11.5px; }
  .draft-note { font-family: var(--mono); font-size: 11.5px; }
  /* faq */
  .faq { border: 1px solid var(--line); border-radius: 4px; background: var(--raised); }
  .draft-note { font-family: var(--mono); font-size: 11.5px; }
  /* ---------- features page ---------- */
  .feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
  .feat { background: var(--raised); padding: 18px; display: grid; gap: 6px; align-content: start; text-decoration: none; }
  .feat:hover { background: var(--surface); }
  .feat b { font-size: 15px; display: flex; align-items: center; gap: 7px; }
  .feat span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
  .feat em { font-family: var(--mono); font-style: normal; font-size: 10.5px; color: var(--accent); }
  /* ---------- faq page ---------- */
  .faq-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-nav a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); text-decoration: none; background: var(--raised); }
  .faq-nav a:hover { color: var(--ink); border-color: var(--ink); }
  .faq-group { display: grid; gap: 14px; }
  /* ---------- app shell ---------- */
  .page { display: none; }
  .page.active { display: block; }