/* Pario site — shared design system
   Aligned with the homepage (index.html): Georgia headings, Inter body,
   Navy/Teal palette, white background, gradient hairline accent.
   Used by: docs/index, data, privacy, terms, eula, and the four /docs/* sub-pages.
   NOT used by index.html — the homepage carries its own (richer) CSS. */

:root {
  --navy:           #131F53;
  --teal:           #1A9599;
  --teal-dim:       #157678;
  --teal-light:     #E3F1F1;
  --green:          #7EBD41;
  --graphite:       #1F2937;
  --acuity-slate:   #6B7280;
  --slate-tertiary: #9CA3AF;
  --border:         #D1D5DB;
  --border-soft:    #E5E7EB;
  --paper:          #FFFFFF;
  --mist:           #F5F6F8;
  --white:          #FFFFFF;
  --gradient:       linear-gradient(90deg, #131F53 0%, #1A9599 55%, #7EBD41 100%);
  --max:            920px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: 'Inter', Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--teal); color: var(--teal-dim); }

/* ── Header ─────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--border-soft); background: var(--paper); }
.site-header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--navy);
  border-bottom: none;
}
.wordmark:hover { border-bottom: none; color: var(--navy); }
.wordmark .dot { color: var(--teal); }
.header-back {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--acuity-slate);
  letter-spacing: 0;
}
.header-back:hover { color: var(--navy); border-bottom: none; }

/* ── Gradient hairline (homepage-style accent under the header) ── */
.hero-accent {
  height: 3px;
  background: var(--gradient);
  max-width: var(--max);
  margin: 0 auto;
}

/* ── Eyebrow ────────────────────────────────────────────────── */
.eyebrow {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 32px 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero { max-width: var(--max); margin: 0 auto; padding: 12px 32px 40px; }
.hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--navy);
}
.hero .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--graphite);
  max-width: 620px;
  margin: 0 0 14px;
  font-weight: 400;
}
.hero .meta {
  font-size: 13px;
  color: var(--acuity-slate);
  margin: 0;
  line-height: 1.7;
}

/* ── Section ────────────────────────────────────────────────── */
section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 32px;
  border-top: 1px solid var(--border-soft);
}
section.no-rule { border-top: none; padding-top: 0; }

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
}
h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--navy);
}
h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  color: var(--navy);
}
section p {
  margin: 0 0 16px;
  color: var(--graphite);
  line-height: 1.65;
}
section p:last-child { margin-bottom: 0; }
section p strong { color: var(--navy); font-weight: 600; }

/* ── Doc body (long-form content, legal + docs sub-pages) ──── */
.doc-body { max-width: 680px; }
.doc-body h2 {
  font-size: 22px;
  line-height: 1.25;
  margin: 36px 0 12px;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-body h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 22px 0 8px;
}
.doc-body p {
  margin: 0 0 14px;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.7;
}
.doc-body ul, .doc-body ol { margin: 0 0 18px; padding-left: 22px; }
.doc-body ul li, .doc-body ol li {
  margin-bottom: 6px;
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.7;
}
.doc-body code {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  background: var(--mist);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--navy);
}
.doc-body p strong, .doc-body li strong { color: var(--navy); font-weight: 600; }

/* ── Note / Warning callouts (docs sub-pages) ─────────────── */
.note, .warning {
  background: var(--mist);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
}
.note p, .warning p { margin: 0; max-width: none; color: var(--graphite); font-size: 14px; }
.note::before {
  content: "Note ";
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.warning { border-left: 3px solid var(--teal); }
.warning::before {
  content: "Heads up ";
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}

/* ── Callout (legal-page intro, no prefix) ─────────────────── */
.callout {
  background: var(--mist);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.callout p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
}

/* ── Legal disclaimers (all-caps text in terms + EULA) ────── */
.caps {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.7;
  color: var(--graphite);
  background: var(--mist);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 14px;
}

/* ── Lettered list (a/b/c for EULA restrictions) ──────────── */
ul.lettered { list-style: none; padding-left: 0; }
ul.lettered li { padding-left: 30px; text-indent: -30px; }
ul.lettered .letter {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--navy);
  margin-right: 4px;
}

/* ── EULA signature + counsel note ────────────────────────── */
.signature {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.signature p {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--graphite);
}
.signature p:first-child {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
  margin-bottom: 10px;
}
.counsel-note {
  font-size: 12px;
  color: var(--acuity-slate);
  font-style: italic;
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

/* ── Methodology + pull quote (docs index) ────────────────── */
.methodology .body { max-width: 680px; }
.methodology .pull {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--navy);
  line-height: 1.5;
}

/* ── Trust strip (docs index) ─────────────────────────────── */
.trust {
  background: var(--mist);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 28px 32px;
  margin-top: 8px;
}
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.trust-item h4 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--navy);
}
.trust-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--graphite);
}
.trust-links {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
  color: var(--acuity-slate);
}
.trust-links a { margin-right: 18px; }

/* ── Cards (docs index sub-page grid) ─────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
}
.card {
  background: var(--paper);
  padding: 28px;
  text-decoration: none;
  color: var(--navy);
  border-bottom: none;
  display: block;
  transition: background 140ms ease;
  position: relative;
}
.card:hover { background: var(--mist); border-bottom: none; }
.card:hover h3 { color: var(--teal); }
.card .kind {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
}
.card h3 {
  margin: 0 0 6px;
  font-size: 20px;
  transition: color 140ms ease;
}
.card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--graphite); }
.card .arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: 'Inter', sans-serif;
  color: var(--acuity-slate);
  transition: transform 140ms ease, color 140ms ease;
}
.card:hover .arrow { transform: translateX(4px); color: var(--teal); }

/* ── Promises grid (data page) ────────────────────────────── */
.promises {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.promise { background: var(--paper); padding: 26px 28px; }
.promise .mark {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--teal);
  margin: 0 0 10px;
}
.promise h3 { font-size: 16px; margin: 0 0 8px; font-weight: 600; }
.promise p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--graphite); }

/* ── Definition list (data page) ──────────────────────────── */
dl.plain { margin: 0; padding: 0; max-width: 680px; }
dl.plain dt {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
dl.plain dt:first-child { padding-top: 0; border-top: none; }
dl.plain dd {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--graphite);
  line-height: 1.6;
}
dl.plain dd:last-child { margin-bottom: 0; }

/* ── Rights list (data page) ──────────────────────────────── */
ul.rights { margin: 0; padding: 0; list-style: none; max-width: 680px; }
ul.rights li {
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.6;
}
ul.rights li:first-child { border-top: none; }
ul.rights li strong {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--navy);
  margin-right: 6px;
}

/* ── Fine print box (data page) ───────────────────────────── */
.fine-print {
  background: var(--mist);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 26px 28px;
  margin-top: 8px;
}
.fine-print p {
  max-width: none;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
}
.fine-print p:last-child { margin-bottom: 0; }
.fine-print .links {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 13px;
}
.fine-print .links a { margin-right: 16px; }

/* ── Subprocessor table (data + privacy) ──────────────────── */
table.subprocessors {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 22px;
  font-size: 14px;
}
table.subprocessors thead th {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acuity-slate);
  text-align: left;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--border);
}
table.subprocessors tbody td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--graphite);
  vertical-align: top;
}
table.subprocessors tbody tr:last-child td { border-bottom: none; }
table.subprocessors td.name {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}

/* ── General docs tables (sub-pages, especially reference) ── */
.doc-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 24px;
  font-size: 13px;
}
.doc-body th, .doc-body td {
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.doc-body th {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acuity-slate);
  font-weight: 600;
  border-bottom: 1px solid var(--acuity-slate);
}
.doc-body td { color: var(--graphite); }
.doc-body td code { font-size: 12px; }

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 56px;
  padding: 28px 0 48px;
  background: var(--mist);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  font-size: 13px;
  color: var(--acuity-slate);
}
.footer-inner a { color: var(--acuity-slate); margin-left: 4px; }
.footer-inner a:hover { color: var(--teal); border-bottom: none; }
.footer-sep { margin: 0 8px; color: var(--border); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  .hero .lede { font-size: 16px; }
  h2 { font-size: 22px; }
  .doc-body h2 { font-size: 20px; }
  .trust-grid { grid-template-columns: 1fr; gap: 20px; }
  .cards { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr; }
  .site-header-inner { padding: 16px 22px; }
  .hero, section, .footer-inner { padding-left: 22px; padding-right: 22px; }
  table.subprocessors thead { display: none; }
  table.subprocessors, table.subprocessors tbody, table.subprocessors tr, table.subprocessors td { display: block; width: 100%; }
  table.subprocessors tbody tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
  }
  table.subprocessors tbody tr:last-child { border-bottom: none; }
  table.subprocessors tbody td { padding: 2px 0; border-bottom: none; }
  table.subprocessors td.name { margin-bottom: 4px; }
}