/* TapScore Legal Pages — Shared Stylesheet
   Brand: dark-first · #C8F36B primary · DM Sans
   -------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design Tokens ─────────────────────────────── */
:root {
  --bg:              #0D0D0D;
  --surface:         #161616;
  --elevated:        #202020;
  --border:          rgba(255, 255, 255, 0.07);

  --text:            #F0F0F0;
  --text-secondary:  #AAAAAA;
  --text-muted:      #555555;

  --primary:         #C8F36B;
  --primary-dim:     rgba(200, 243, 107, 0.08);
  --primary-border:  rgba(200, 243, 107, 0.22);
  --primary-label:   #C8F36B;

  --font:            'Syne', -apple-system, system-ui, sans-serif;
  --font-mono:       'Space Mono', monospace;
}

/* ── Light mode ────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:              #F5F5F2;
    --surface:         #EAEAE7;
    --elevated:        #DFDFE0;
    --border:          rgba(0, 0, 0, 0.07);

    --text:            #111111;
    --text-secondary:  #444444;
    --text-muted:      #999999;

    /* #C8F36B lacks contrast on light backgrounds — use a darker green */
    --primary:         #3E7000;
    --primary-dim:     rgba(62, 112, 0, 0.06);
    --primary-border:  rgba(62, 112, 0, 0.25);
    --primary-label:   #3E7000;
  }
}

/* ── Base ──────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family:  var(--font);
  font-size:    16px;
  line-height:  1.8;
  color:        var(--text-secondary);
  background:   var(--bg);
  padding:      0 24px 96px;
  max-width:    700px;
  margin:       0 auto;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ────────────────────────────────────── */
header {
  padding:       72px 0 36px;
  border-bottom: 2px solid var(--primary);
  margin-bottom: 56px;
}

.wordmark {
  display:        flex;
  align-items:    center;
  gap:            14px;
  font-family:    var(--font);
  font-size:      38px;
  font-weight:    800;
  letter-spacing: -1.5px;
  line-height:    1;
  margin-bottom:  14px;
}

.logo-mark {
  width:      44px;
  height:     44px;
  flex-shrink: 0;
}

.logo-path { fill: var(--primary); }

.wordmark .tap   { color: var(--text); }
.wordmark .score { color: var(--primary); }

header h1 {
  font-size:      26px;
  font-weight:    700;
  letter-spacing: -0.5px;
  color:          var(--text);
  line-height:    1.2;
  margin-bottom:  8px;
}

header .meta {
  font-size:   13px;
  font-weight: 400;
  color:       var(--text-muted);
  letter-spacing: 0.01em;
}

/* ── Section headings ──────────────────────────── */
h2 {
  font-family:    var(--font-mono);
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--primary-label);
  margin-top:     56px;
  margin-bottom:  16px;
  padding-left:   14px;
  border-left:    2px solid var(--primary);
  line-height:    1.4;
}

/* ── Body copy ─────────────────────────────────── */
p {
  margin-bottom: 14px;
  color:         var(--text-secondary);
}

strong {
  color:       var(--text);
  font-weight: 600;
}

ul {
  margin:      10px 0 14px 22px;
  color:       var(--text-secondary);
}

ul li { margin-bottom: 7px; }

a {
  color:           var(--primary-label);
  text-decoration: none;
  font-weight:     500;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Callout: default ──────────────────────────── */
.callout {
  background:    var(--surface);
  border-left:   2px solid var(--primary);
  border-radius: 4px;
  padding:       18px 20px;
  margin:        24px 0;
  font-size:     14px;
  line-height:   1.7;
  color:         var(--text-secondary);
}

.callout strong {
  display:        block;
  margin-bottom:  6px;
  color:          var(--primary-label);
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Callout: hero (positive / short version) ─── */
.callout-positive {
  background:    var(--primary-dim);
  border:        1px solid var(--primary-border);
  border-left:   3px solid var(--primary);
  border-radius: 4px;
  padding:       24px 24px;
  margin:        0 0 8px;
  font-size:     15px;
  line-height:   1.75;
  color:         var(--text);
}

.callout-positive strong {
  display:        block;
  margin-bottom:  8px;
  color:          var(--primary-label);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Footer ────────────────────────────────────── */
footer {
  margin-top:  72px;
  padding-top: 24px;
  border-top:  1px solid var(--border);
  font-size:   13px;
  color:       var(--text-muted);
}

footer a {
  color:       var(--text-muted);
  font-weight: 400;
}

footer a:hover {
  color: var(--primary-label);
}