/*
 * legal.css — token-based styling for the Ripls legal / consent pages
 * (sms-terms.html, sms-opt-in.html). Uses ONLY design tokens from
 * gen/tokens.gen.css (via tokens.css), so it tracks the official Ripls
 * palette and inherits auto dark mode. Layered on shared.css. No raw hex.
 */

.last-updated {
  color: var(--color-text-faint);
  margin-bottom: var(--space-6);
  font-style: italic;
  font-size: var(--font-size-meta);
}

/* Lead-in summary + contact block: subtle raised surface, sage edge. */
.intro,
.contact-info {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}
.intro { margin-bottom: var(--space-6); }
.contact-info { margin-top: var(--space-6); }
.intro p:last-child,
.contact-info p:last-child { margin-bottom: 0; }

/* Consent / opt-out callout. */
.callout {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
  margin: var(--space-6) 0;
}
.callout p:last-child,
.callout ul:last-child,
.callout ol:last-child { margin-bottom: 0; }

/* A verbatim, quoted in-app UI string (the consent disclosure). */
.disclosure {
  font-family: var(--font-body);
  background: var(--color-background);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-body-large);
}

/* An example text message. */
.sample {
  font-family: var(--font-body);
  background: var(--color-surface);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}
.sample strong {
  font-style: normal;
  color: var(--color-text-primary);
}

/* Opt-out / help keyword. */
.kw {
  font-weight: 700;
  color: var(--color-primary);
}

/* Side-by-side opt-in screen captures (in-app + web) used as the A2P
   10DLC CTA / opt-in proof. Each figure caps its width so portrait
   phone screenshots sit two-up on desktop and stack on narrow screens. */
.screenshot-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}
.screenshot-pair figure {
  flex: 1 1 240px;
  max-width: 320px;
  margin: 0;
}
.screenshot-pair img {
  width: 100%;
  height: auto;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  display: block;
}
.screenshot-pair figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-meta);
  color: var(--color-text-secondary);
  text-align: center;
}