/* Shared styling for yap's informational pages (privacy, terms, about).
   Deliberately a static day-theme subset of index.html's variables/type
   scale, not the full app stylesheet — these pages don't need the call UI. */

:root {
  --bg: #f2efe7; --ink: #16150f; --soft: #55534a; --muted: #6d6a5c;
  --rule: #16150f; --rule-soft: #d9d4c4;
  --warn-bg: #fbe9d7; --warn-ink: #7a3b12; --warn-rule: #d99a5b;
}
html, body { margin: 0; padding: 0; background: var(--bg); }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
a:hover { opacity: 0.6; }
a[href^="mailto:"] { color: oklch(0.52 0.17 262); }
a[href^="mailto:"]:hover { color: oklch(0.42 0.17 262); opacity: 1; }
::selection { background: oklch(0.52 0.17 262); color: #f7f4ec; }

body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: 'Space Grotesk', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'IBM Plex Mono', monospace; }
.serif { font-family: 'Instrument Serif', Georgia, serif; }

header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding: 26px 40px 18px; border-bottom: 1.5px solid var(--rule);
}
.logo-row { display: flex; align-items: flex-end; gap: 16px; }
.logo { font-family: 'Instrument Serif', Georgia, serif; font-size: 44px; line-height: .82; letter-spacing: -0.02em; color: var(--ink); }
.logo-tag {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 3px;
}
.back-link {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 8px 0; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .16s ease;
}
.back-link:hover { border-bottom-color: var(--ink); opacity: 1; }

main.doc {
  flex: 1; max-width: 760px; width: 100%; margin: 0 auto;
  padding: 48px 40px 60px;
}
main.doc h1 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 5vw, 50px); line-height: 1; letter-spacing: -0.02em;
  margin: 0 0 10px;
}
main.doc .doc-updated {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 32px;
}
main.doc h2 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 26px; letter-spacing: -0.01em; margin: 40px 0 12px;
  border-top: 1px solid var(--rule-soft); padding-top: 24px;
}
main.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
main.doc p, main.doc li { font-size: 15px; line-height: 1.65; color: var(--soft); }
main.doc p { margin: 0 0 14px; }
main.doc ul { margin: 0 0 14px; padding-left: 22px; }
main.doc li { margin-bottom: 8px; }
main.doc strong { color: var(--ink); }
main.doc a { text-underline-offset: 2px; text-decoration: underline; overflow-wrap: anywhere; }

.demo-video {
  width: 100%; max-width: 520px; display: block; border-radius: 4px;
  border: 1.5px solid var(--rule); margin: 4px 0 24px;
}

.placeholder-box {
  border: 1.5px dashed var(--warn-rule); background: var(--warn-bg); color: var(--warn-ink);
  border-radius: 4px; padding: 14px 16px; margin: 8px 0 18px;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.placeholder-box strong { color: var(--warn-ink); }

.crisis-box {
  border: 1.5px solid var(--rule); border-radius: 4px; padding: 16px 18px; margin: 8px 0 18px;
}
.crisis-box p { color: var(--ink); margin: 0; }

footer {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px 60px;
  flex-wrap: wrap; padding: 32px 40px 28px; border-top: 1.5px solid var(--rule);
}
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.footer-heading {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
}
.footer-col span {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); line-height: 1.5;
}
.footer-col a {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); line-height: 1.5; width: fit-content;
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .16s ease;
  padding: 4px 0;
}
.footer-col a:hover { border-bottom-color: var(--ink); opacity: 1; }
footer .crisis { color: var(--ink); }

/* Phone breakpoint - matches the one in index.html's inline styles, same
   ~600px cutover. legal.css previously had no responsive rules at all;
   this handles header wrapping and the side padding that eats too much of
   a 375px screen on both the doc content and the footer. */
@media (max-width: 600px) {
  header { flex-wrap: wrap; padding: 20px 20px 14px; gap: 14px; }
  .logo-row { flex-wrap: wrap; }

  main.doc { padding: 32px 20px 40px; }
  main.doc h2 { margin: 32px 0 12px; padding-top: 20px; }

  footer { padding: 24px 20px 20px; gap: 28px 32px; }
  .footer-col { min-width: 0; }
}