/* Shared styling for the legal pages. Deliberately plain: these are documents,
   not marketing. Same type and palette as index.html so they don't feel bolted on. */
:root {
  --brand: #005CA8;
  --brand-hover: #00477E;
  --bg: #FFFFFF;
  --surface: #FAF8F3;
  --ink: #0F243F;
  --body: #2D3748;
  --muted: #5C6B7F;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: "Instrument Sans", -apple-system, sans-serif;
  color: var(--body);
  line-height: 1.65;
}
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

.wrap { max-width: 720px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 32px) clamp(64px, 9vw, 96px); }

.topbar { display: flex; align-items: center; gap: 10px; padding-bottom: clamp(28px, 5vw, 44px); }
.topbar svg { color: #F6BB04; flex: 0 0 auto; }
.topbar a { font-family: 'Fraunces', serif; font-size: 26px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }

h1 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(30px, 5vw, 42px); line-height: 1.15; color: var(--ink); margin: 0 0 8px; text-wrap: balance; }
.effective { font-size: 14px; color: var(--muted); margin: 0 0 clamp(28px, 4vw, 40px); }

h2 { font-size: 18px; font-weight: 600; color: var(--ink); margin: clamp(30px, 4vw, 40px) 0 10px; }
p { margin: 0 0 14px; text-wrap: pretty; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin: 0 0 8px; }
strong { color: var(--ink); }

.back { display: inline-block; margin-top: clamp(40px, 6vw, 64px); padding-top: 22px; border-top: 1px solid rgba(15,36,63,0.12); width: 100%; font-size: 15px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Draft documents awaiting legal review. Deliberately loud — this must never
   be mistaken for a live policy. */
.draft { background: #FBE7A2; color: #5A4300; border: 1px solid #E0C25A; border-radius: 10px;
         padding: 14px 18px; margin: 0 0 28px; font-size: 14px; line-height: 1.55; }
.query { background: #F1F5F9; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
         padding: 12px 16px; margin: 0 0 14px; font-size: 15px; color: #3A4757; }
.query strong { color: var(--brand); letter-spacing: 0.02em; }