/* Legal and support pages: same surface, header and footer as the home page, text straight on the page (no sheet). */
html:not([data-theme="dark"]) body.doc-page {
  --bg: #f0efeb; --bg-alt: #e6e9e8; --surface: #fffefa; --ink: #283038; --muted: #5e666b;
  --line: rgba(48, 60, 66, .2); --rose: #973f53;
  --seg-track: #e4e3de; --seg-thumb: #fffefa; --seg-ink: #242c31;
}
html[data-theme="dark"] body.doc-page {
  --bg: #171c21; --bg-alt: #202830; --surface: #252e36; --ink: #f5f3ef; --muted: #c0c8cd;
  --line: rgba(219, 229, 232, .19); --rose: #8bc27b;
  --seg-track: #313a43; --seg-thumb: rgba(255, 255, 255, .12); --seg-ink: #f2f0ec;
}
body.doc-page { position: relative; isolation: isolate; background: var(--bg); color: var(--ink); }
/* the same pencil doodles as the home page, kept to the sides so long text stays easy to read */
body.doc-page::before {
  content: ""; display: block; position: absolute; inset: 0; height: auto; z-index: -1; pointer-events: none; background-color: transparent;
  background-image: var(--scribble); background-repeat: repeat-y; background-position: 50% 0; background-size: 1600px auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 470px), transparent calc(50% - 400px), transparent calc(50% + 400px), #000 calc(50% + 470px));
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 470px), transparent calc(50% - 400px), transparent calc(50% + 400px), #000 calc(50% + 470px));
}

/* the header floats over the hero on the home page; here it keeps its own space */
body.doc-page .site-header { margin-bottom: 0; }

/* no sheet behind the text */
body.doc-page .legal-main {
  width: min(calc(100% - 2 * clamp(14px, 5vw, 32px)), 720px);
  margin: clamp(48px, 8vw, 88px) auto clamp(80px, 10vw, 124px);
  padding: 0; border-radius: 0; background: none;
}
body.doc-page .legal-main h1 { font-size: clamp(2.8rem, 8vw, 5.2rem); line-height: 1.08; letter-spacing: -.035em; }
body.doc-page .legal-lead { margin-top: 16px; font-size: 1.12rem; }
body.doc-page .legal-main h2 { margin: 40px 0 16px; font-size: 1.35rem; }
body.doc-page .legal-main article p, body.doc-page .legal-main article li { font-size: 1.06rem; line-height: 1.7; }

/* Support: contact options as plain text blocks instead of cards */
body.doc-page .support-cards { gap: 16px 40px; margin-top: 32px; }
body.doc-page .support-card { padding: 0; border: 0; border-radius: 0; background: none; }
body.doc-page .support-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
body.doc-page .support-card p { margin: 0 0 8px; color: var(--muted); }

/* Privacy / Terms selector: the app's segmented control (pill track, raised pill thumb, bold active label) */
body.doc-page .legal-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  width: min(100%, 320px); min-height: 44px; margin-bottom: 40px; padding: 4px;
  border: 0; border-radius: 999px; background: var(--seg-track); box-shadow: none;
}
body.doc-page .legal-switch a {
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  color: var(--seg-ink); font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: color .2s ease;
}
body.doc-page .legal-switch a[aria-current] { color: var(--seg-ink); font-weight: 700; }
body.doc-page .legal-switch a:not([aria-current]):hover { color: var(--ink); opacity: .8; }
body.doc-page .legal-switch a:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
body.doc-page .legal-selection {
  top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--seg-thumb); box-shadow: 0 1px 3px rgba(36, 44, 49, .1);
}
@media (max-width: 860px) {
  body.doc-page .legal-switch { margin-bottom: 32px; }
  body.doc-page .legal-switch a { font-size: .875rem; }
}