/*
 * The legal pages, served at both product hostnames from one copy.
 *
 * Deliberately neutral rather than dressed in either product's identity: this
 * text is the company's, it is identical on both domains, and a second copy
 * styled to match a third product is how the clinic's terms and the studio's
 * terms quietly stop saying the same thing.
 *
 * Readability is the whole design brief. Long measure, generous leading, real
 * heading hierarchy, and nothing that competes with the words.
 */
:root {
  --ink: #14161a;
  --ink-2: #3d434c;
  --ink-3: #6b727c;
  --paper: #fbfaf7;
  --line: #e2e0d9;
  --accent: #0a7d72;
  --note-bg: #fdf6e3;
  --note-line: #e8d9a8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ink: #e8e6df; --ink-2: #c3c0b8; --ink-3: #93908a;
    --paper: #101110; --line: #2a2c2b; --accent: #2fe3d2;
    --note-bg: #241f10; --note-line: #4a3f1d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.72; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }
header.top { padding: 22px 0; border-bottom: 1px solid var(--line); }
header.top a { font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
header.top a span { color: var(--accent); }

h1 { margin: 40px 0 6px; font-size: 32px; font-weight: 600; letter-spacing: -0.7px; }
.updated { margin: 0 0 32px; color: var(--ink-3); font-size: 14px; }
h2 { margin: 34px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.3px; }
h3 { margin: 22px 0 6px; font-size: 16.5px; font-weight: 600; }
p, li { color: var(--ink-2); }
ul, ol { padding-left: 20px; }
li { margin: 5px 0; }
a { color: var(--accent); }
strong { color: var(--ink); font-weight: 600; }

/* A field the company still has to fill in. Visible on purpose: a placeholder
   that blends in is a placeholder that ships. */
.fill {
  background: var(--note-bg); border: 1px dashed var(--note-line);
  border-radius: 3px; padding: 1px 6px; font-size: 14.5px; color: var(--ink);
}
.note {
  background: var(--note-bg); border: 1px solid var(--note-line);
  border-radius: 5px; padding: 14px 16px; margin: 26px 0;
}
.note p { margin: 0; font-size: 15px; }

table { border-collapse: collapse; width: 100%; font-size: 15.5px; margin: 14px 0; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-3); }

footer { margin-top: 54px; padding: 26px 0 60px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }