/* Shared styling for GrowMatic SA's legal pages (privacy, POPIA, terms).
   Self-contained on purpose: these pages don't load script.js, so nothing
   depends on the interactive homepage JS. Tokens and type mirror the main
   site (Syne display, DM Sans body, IBM Plex Mono labels, green accent) so
   the pages read as part of growmaticsa.com. The site is light-only, so
   these pages deliberately commit to the same single light treatment. */

:root {
  --bg: #fafaf8;
  --panel: #ffffff;
  --ink: #0a0a0a;
  --gray: #5c5c58;
  --gray-soft: #6b6b68;
  --green: #1f9d5c;
  --green-dark: #17794699;
  --green-ink: #14663b;
  --border: #e4e4e0;
  --border-soft: #eeeee9;
  --wrap: 760px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--green); }
a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

/* ---- Top bar ---- */
.legal-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(250, 250, 248, .88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.legal-nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.legal-nav-inner .brand img { height: 30px; display: block; }
.legal-nav-actions { display: flex; align-items: center; gap: 10px; }
.legal-nav-actions a { text-decoration: none; }
.btn-home {
  font-size: .92rem; color: var(--ink); padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border);
}
.btn-home:hover { border-color: var(--ink); color: var(--ink); }
.btn-wa {
  font-size: .92rem; color: #fff; background: var(--ink); padding: 9px 16px; border-radius: 999px;
  font-weight: 500; transition: background .2s;
}
.btn-wa:hover { background: var(--green); color: #fff; }

/* ---- Document ---- */
.legal-doc { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 40px; }

.legal-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); font-weight: 500; margin: 0 0 14px;
}
.legal-doc h1 {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1.05; letter-spacing: -.02em;
  margin: 0 0 14px; text-wrap: balance;
}
.legal-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .8rem; color: var(--gray-soft); margin: 0 0 8px;
}
.legal-intro { font-size: 1.08rem; color: var(--gray); margin: 18px 0 0; }

.legal-doc h2 {
  font-family: 'Syne', sans-serif; font-weight: 700;
  font-size: 1.4rem; letter-spacing: -.01em; margin: 44px 0 4px;
  padding-top: 24px; border-top: 1px solid var(--border-soft);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; }
.legal-doc h3 { font-size: 1.05rem; font-weight: 600; margin: 26px 0 6px; }
.legal-doc p { margin: 12px 0; }
.legal-doc ul { margin: 12px 0; padding-left: 22px; }
.legal-doc li { margin: 7px 0; }
.legal-doc strong { font-weight: 600; }

/* Contact / summary callout */
.legal-callout {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; margin: 22px 0;
}
.legal-callout p:first-child { margin-top: 0; }
.legal-callout p:last-child { margin-bottom: 0; }

/* Data table */
.legal-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; margin: 18px 0; }
.legal-table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--panel); }
.legal-table th, .legal-table td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.legal-table thead th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gray-soft); font-weight: 500; background: #f4f4f0;
}
.legal-table tbody tr:last-child td { border-bottom: none; }

/* ---- Footer ---- */
.legal-footer { border-top: 1px solid var(--border); margin-top: 48px; background: #f4f4f0; }
.legal-footer-inner {
  max-width: 1080px; margin: 0 auto; padding: 30px 24px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
}
.legal-footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal-footer-links a { color: var(--gray); text-decoration: none; font-size: .92rem; }
.legal-footer-links a:hover { color: var(--ink); }
.legal-footer-meta { font-size: .85rem; color: var(--gray-soft); }

@media (max-width: 560px) {
  .legal-doc { padding-top: 40px; }
  .btn-home { display: none; }
}