/* Shared styles for Roam sub-pages (terms, privacy, contact, support).
   Tokens from the Roam style guide (web/STYLE_GUIDE.md). */
:root {
  --text-primary: #222222;
  --text-secondary: #6A6A6A;
  --text-muted: #717171;
  --background: #FFFFFF;
  --background-secondary: #F7F7F7;
  --background-hover: #F2F2F2;
  --border-light: #EBEBEB;
  --border: #DDDDDD;
  --border-strong: #B0B0B0;
  --brand: #FF385C;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-floating: 0 2px 4px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
  --maxw: 1280px;
  --prose: 720px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }

.kicker {
  font-size: 12px; line-height: 1.3; font-weight: 500;
  color: var(--text-muted);
}

/* Nav — matches homepage */
nav { display: flex; align-items: center; justify-content: space-between; height: 80px; border-bottom: 1px solid var(--border-light); }
.wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand); }
nav img { height: 34px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-link { font-size: 14px; font-weight: 500; color: var(--text-primary); padding: 10px 12px; border-radius: var(--radius-pill); transition: background 150ms ease; }
.nav-link:hover { background: var(--background-hover); }
.nav-btn { font-size: 14px; font-weight: 600; color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 11px 18px; transition: box-shadow 150ms ease; }
.nav-btn:hover { box-shadow: var(--shadow-floating); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 16px; font-weight: 600; height: 48px; border-radius: var(--radius-sm); padding: 0 24px; cursor: pointer; border: 1px solid transparent; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--text-primary); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.btn-ghost:hover { background: var(--background-hover); }

/* Prose */
main { padding: 64px 0 96px; }
.prose { max-width: var(--prose); margin: 0 auto; }
.prose .doc-kicker { display: block; margin-bottom: 12px; }
.prose .doc-kicker-ic { display: flex; align-items: center; gap: 8px; }
.prose .doc-kicker-ic svg { color: #FF385C; }
.prose h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.prose .meta { margin-top: 12px; font-size: 14px; color: var(--text-muted); }
.prose .intro { margin-top: 24px; font-size: 20px; line-height: 1.45; color: var(--text-secondary); }
.prose h2 { margin-top: 48px; margin-bottom: 12px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.prose h3 { margin-top: 24px; margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.prose p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.prose ul { margin-top: 12px; padding-left: 20px; }
.prose li { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin-top: 6px; }
.prose li::marker { color: var(--text-muted); }
.prose a.inline { text-decoration: underline; text-underline-offset: 2px; color: var(--text-primary); }
.prose strong { font-weight: 600; color: var(--text-primary); }
.prose .callout { margin-top: 24px; background: var(--background-secondary); border-radius: var(--radius-md); padding: 20px 24px; }
.prose .callout p { margin-top: 0; }

/* Contact cards */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.contact-card { background: var(--background-secondary); border-radius: var(--radius-md); padding: 24px; }
.contact-card .kicker { display: block; margin-bottom: 10px; font-weight: 600; color: var(--text-primary); }
.contact-card h3 { font-size: 18px; font-weight: 600; }
.contact-card p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.contact-card a.email { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--text-primary); text-decoration: underline; text-underline-offset: 2px; }

/* FAQ accordion groups (support page) */
.group-label { display: block; margin-top: 48px; margin-bottom: 4px; font-weight: 600; color: var(--text-primary); }
.faq-group { background: var(--background-secondary); border-radius: var(--radius-md); margin-top: 12px; }
.faq-group details { border-bottom: 1px solid var(--border); }
.faq-group details:last-child { border-bottom: 0; }
.faq-group summary { list-style: none; cursor: pointer; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 500; color: var(--text-primary); }
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary .plus { flex: 0 0 auto; font-size: 18px; color: var(--text-muted); transition: transform 150ms ease; }
.faq-group details[open] summary .plus { transform: rotate(45deg); }
.faq-group .answer { padding: 0 24px 18px; font-size: 15px; line-height: 1.55; color: var(--text-secondary); max-width: 660px; }
.faq-group .answer a { text-decoration: underline; text-underline-offset: 2px; color: var(--text-primary); }
.faq-group .answer code { font-size: 14px; background: #fff; border: 1px solid var(--border-light); border-radius: 4px; padding: 1px 5px; }

a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: 4px; }

@keyframes prose-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  main .prose { animation: prose-rise 500ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 24px; }
  .contact-grid { grid-template-columns: 1fr; }
  main { padding: 40px 0 64px; }
}