/* ============================================================================
   OurPath — legal section styling
   A calm, high-contrast long-form reading surface (light by default, dark-mode
   aware), branded to OurPath: Bricolage Grotesque headings, Poppins body, the
   OurPath green accent and clay call-outs. Built for 6,000–8,000-word documents
   that must stay readable at 390px and meet WCAG 2.2 AA.

   The table / blockquote / long-URL rules matter to these documents — the
   billing-rail table, the retention schedule and the year-4 price warning all
   depend on them.
   ============================================================================ */

:root {
  --lg-bg: #fbfbf8;
  --lg-surface: #ffffff;
  --lg-ink: #16201b;
  --lg-ink-mid: #45514b;
  --lg-ink-faint: #6d7a72;
  --lg-rule: #e5e8e4;
  --lg-rule-soft: #eef1ee;
  --lg-sunk: #f4f6f3;
  --accent: #2f7f66;        /* AA on light for links/interactive */
  --accent-deep: #245f4d;
  --accent-soft: #e7f2ed;
  --clay: #b9713a;
  --clay-soft: #fbf0e5;
  --brand-bg: #0a0e0c;      /* header/footer, matches ourpath.app */
  --brand-ink: #edf3ef;
  --brand-ink-mid: #9fb2a8;
  --brand-accent: #8fe7c4;
  --lg-max: 72ch;
  --pending: #b45309;
  --pending-bg: #fdf3e3;
}

/* Dark palette. The page's theme is driven by the [data-theme] attribute the
   chrome sets from the toggle / localStorage (same as chrome.css and site.css),
   so legal.css must key off that too — NOT prefers-color-scheme on its own.
   Previously this only followed the OS setting, so an OS-dark machine viewing the
   page toggled to light rendered near-white legal text on a light background
   (invisible headings). We now apply dark when the user explicitly chose dark,
   OR when the OS is dark and the user hasn't explicitly chosen light. An explicit
   light choice always wins. */
:root[data-theme="dark"] {
  --lg-bg: #0e1310;
  --lg-surface: #131916;
  --lg-ink: #eaf1ec;
  --lg-ink-mid: #b3c1ba;
  --lg-ink-faint: #869890;
  --lg-rule: #26302b;
  --lg-rule-soft: #1e2723;
  --lg-sunk: #182019;
  --accent: #6fcaa9;
  --accent-deep: #8fe7c4;
  --accent-soft: rgba(95, 184, 154, 0.12);
  --clay: #e0a468;
  --clay-soft: rgba(224, 164, 104, 0.12);
  --pending: #f5c780;
  --pending-bg: rgba(245, 199, 128, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-bg: #0e1310;
    --lg-surface: #131916;
    --lg-ink: #eaf1ec;
    --lg-ink-mid: #b3c1ba;
    --lg-ink-faint: #869890;
    --lg-rule: #26302b;
    --lg-rule-soft: #1e2723;
    --lg-sunk: #182019;
    --accent: #6fcaa9;
    --accent-deep: #8fe7c4;
    --accent-soft: rgba(95, 184, 154, 0.12);
    --clay: #e0a468;
    --clay-soft: rgba(224, 164, 104, 0.12);
    --pending: #f5c780;
    --pending-bg: rgba(245, 199, 128, 0.12);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--lg-bg);
  color: var(--lg-ink-mid);
  font: 400 17px/1.72 "Poppins", ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Brand header ------------------------------------------------------- */
.lg-header {
  background: var(--brand-bg);
  color: var(--brand-ink);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lg-header__in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.lg-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-ink);
  text-decoration: none;
  font-family: "Bricolage Grotesque", "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.lg-brand__dot {
  width: 22px; height: 22px; border-radius: 7px;
  background: url("/favicon.png") center/contain no-repeat;
  display: inline-block;
}
.lg-header__tag {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-ink-mid);
}
.lg-header__back {
  color: var(--brand-accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.lg-header__back:hover { text-decoration: underline; }

/* ---- Article ------------------------------------------------------------ */
.legal {
  max-width: var(--lg-max);
  margin: 0 auto;
  padding: 40px 22px 96px;
}

.legal .lg-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 10px;
}

.legal h1 {
  font-family: "Bricolage Grotesque", "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  color: var(--lg-ink);
  text-wrap: balance;
}

.legal h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Bricolage Grotesque", "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 2.8rem 0 0.9rem;
  border-top: 0;
  color: var(--lg-ink);
  scroll-margin-top: 80px;
}
.legal h2::before { content: ""; flex: 0 0 auto; width: 5px; height: 0.92em; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-deep)); }

.legal h3 {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 1.8rem 0 0.6rem;
  color: var(--lg-ink);
  scroll-margin-top: 80px;
}

/* Heading anchor affordance */
.legal h2 .lg-anchor,
.legal h3 .lg-anchor {
  opacity: 0;
  margin-left: 0.4rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.15s ease;
}
.legal h2:hover .lg-anchor,
.legal h3:hover .lg-anchor { opacity: 0.7; }

.legal p { margin: 0 0 1.05rem; }
.legal a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }
.legal strong { color: var(--lg-ink); font-weight: 600; }

.legal ul, .legal ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.legal li { margin: 0 0 0.5rem; }

/* Section separator — fading rule with a glowing accent node (matches homepage .sep) */
.legal hr {
  position: relative; border: 0; height: 1px; margin: 2.8rem auto; overflow: visible;
  background: linear-gradient(90deg, transparent, var(--lg-rule) 22%, var(--lg-rule) 78%, transparent);
}
.legal hr::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 16px 1px rgba(95, 184, 154, 0.5);
}

/* Effective-date line */
.legal .lg-effective {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--lg-ink-faint);
  background: var(--lg-sunk);
  border: 1px solid var(--lg-rule);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 1.6rem;
}
.legal .lg-effective strong { color: var(--lg-ink-mid); font-weight: 600; }

/* ---- Tables (scrollable, real content) ---------------------------------- */
.legal .lg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.4rem;
  border: 1px solid var(--lg-rule);
  border-radius: 12px;
}
.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.94rem;
  background: var(--lg-surface);
}
.legal thead th {
  background: var(--accent-soft);
  color: var(--lg-ink);
  font-weight: 600;
  text-align: left;
}
.legal th, .legal td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--lg-rule-soft);
  border-right: 1px solid var(--lg-rule-soft);
  vertical-align: top;
}
.legal th:last-child, .legal td:last-child { border-right: 0; }
.legal tbody tr:last-child td { border-bottom: 0; }
.legal tbody tr:nth-child(even) td { background: var(--lg-sunk); }

/* ---- Blockquote = call-out, not decoration ------------------------------ */
.legal blockquote {
  margin: 0 0 1.4rem;
  padding: 16px 20px;
  background: var(--clay-soft);
  border-left: 4px solid var(--clay);
  border-radius: 0 12px 12px 0;
  color: var(--lg-ink);
}
.legal blockquote p:last-child { margin-bottom: 0; }
.legal blockquote strong { color: var(--lg-ink); }

/* Long URLs / code shouldn't overflow */
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--lg-sunk);
  padding: 1px 5px;
  border-radius: 5px;
  overflow-wrap: anywhere;
}
.legal a { overflow-wrap: anywhere; }

/* Unresolved build tokens — visibly pending, never silently shipped */
.legal .lg-token {
  background: var(--pending-bg);
  color: var(--pending);
  border: 1px dashed var(--pending);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Footer ------------------------------------------------------------- */
.lg-footer {
  background: var(--brand-bg);
  color: var(--brand-ink-mid);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 24px;
  font-size: 0.9rem;
}
.lg-footer__in { max-width: 1120px; margin: 0 auto; }
.lg-footer h4 {
  color: var(--brand-ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.lg-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.lg-footer__links a { color: var(--brand-ink-mid); text-decoration: none; }
.lg-footer__links a:hover { color: var(--brand-accent); }
.lg-footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  color: var(--brand-ink-mid);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

/* Visible focus for keyboard users */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}