/* ==========================================================================
   TableSide Media, legal pages (privacy.html, terms.html, sms-terms.html)

   These three pages share one chrome and one reading measure, so the rules
   live here once rather than being pasted into three <style> blocks that
   would drift the first time one of them was edited.

   Loaded AFTER tokens.css and shared.css. Everything below is either a
   page-specific override of a shared primitive (the fixed nav, the wide
   page-wrap) or a rule that only legal prose needs (headings, lists,
   the reading measure). Nothing here is used by any other page.
   ========================================================================== */

:root { --accent: #E8E0D0; --warm-white: #E8DFD0; --dark: #1F1F1F; }

body { color: var(--dark); overflow-x: hidden; }

/* ─── NAV. The bar is /siteNav.css now, shared byte for byte with the five
       marketing pages, and these three carry the same markup: the fixed
       marketing bar with its own copy of the CSS was the SIXTH variant on this
       site, and the audit that counted four did not see it. legalNav.js went
       with it -- /siteNav.js owns the panel for all eight pages. ─── */

/* ─── HERO. Same measurements as the apply pages so the three legal pages sit
       in the same family as the rest of the marketing site. ─── */
.page-hero { padding: 8rem 1.5rem 4rem; }
.page-hero-inner { padding: 0; }
.page-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; color: rgba(232,224,208,0.5); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.5rem; }
.page-eyebrow::before, .page-eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: rgba(232,224,208,0.25); }
.page-hero h1 { font-family: var(--font-display); color: var(--cream); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 500; font-style: normal; line-height: 1.1; margin-bottom: 1.25rem; }
.page-hero h1 em { font-style: italic; color: rgba(232,224,208,0.65); }
.page-hero p { color: rgba(248,245,239,0.5); font-size: 0.95rem; line-height: 1.8; max-width: 480px; margin: 0 auto; }

/* ─── PAGE WRAP. shared.css centres a 460px column for the portal screens;
       legal prose needs the wider measure the apply pages use. ─── */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem 6rem; display: block; }

/* ─── THE DOCUMENT ITSELF ─── */
.legal-card {
  background: var(--cream);
  border-radius: 18px;
  padding: 2.75rem;
  border: 1px solid rgba(31,67,61,0.08);
  box-shadow: 0 2px 24px rgba(31,67,61,0.06);
}

.legal-date {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(31,67,61,0.45);
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(31,67,61,0.12);
}

.legal-lede { font-size: 0.95rem; line-height: 1.85; color: var(--muted); margin-bottom: 0.5rem; }

.legal-card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--deep-green);
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
}
.legal-card h2:first-of-type { margin-top: 2rem; }

.legal-card h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--deep-green);
  margin: 1.5rem 0 0.5rem;
}

.legal-card p { font-size: 0.88rem; line-height: 1.85; color: var(--muted); margin-bottom: 0.9rem; }
.legal-card ul, .legal-card ol { margin: 0 0 1rem 1.15rem; padding: 0; }
.legal-card li { font-size: 0.88rem; line-height: 1.8; color: var(--muted); margin-bottom: 0.55rem; padding-left: 0.25rem; }
.legal-card li:last-child { margin-bottom: 0; }
.legal-card strong { color: var(--deep-green); font-weight: 600; }

.legal-card a { color: #7A5E2A; text-decoration: underline; text-underline-offset: 2px; }
.legal-card a:hover { color: var(--deep-green); }

/* A short block that has to be read as a unit rather than skimmed: the STOP
   instruction on the SMS page, the liability cap on the terms page. */
.legal-callout {
  background: rgba(31,67,61,0.04);
  border-left: 2px solid var(--ts-gold);
  border-radius: 0 9px 9px 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.legal-callout p:last-child { margin-bottom: 0; }

/* ─── FOOTER. shared.css paints the bar and owns `.footer-legal`, the link row
       every public page carries. Only the logo line is added here. ─── */
footer { padding: 2rem 1.5rem; }
.footer-logo { font-family: var(--font-display); color: var(--cream); font-size: 1rem; font-weight: 500; margin-bottom: 0.4rem; }

@media (max-width: 680px) {
  .legal-card { padding: 1.6rem; }
  .page-hero { padding: 7rem 1.25rem 3rem; }
}