/* ============================================================================
 * site-legal.css — Terms & Policies hub + legal document pages.
 * Rides on site-pages.css / site-sections.css (tokens, nav, page-hero, footer).
 * Adds: the hub card grid, the two-column doc layout (sticky TOC + body),
 * the "In plain language" TL;DR cards, and editorial legal prose.
 * ========================================================================== */

/* ─────────────────────────── Hub — document grid ─────────────────────────── */
.legal-hub .wrap { padding-top: 84px; }
.lh-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 8px;
}
.lh-card {
  position: relative; display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 16px;
  padding: 26px 26px 22px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lh-card:hover {
  border-color: var(--brand-300);
  box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 12px 32px -18px rgba(38,132,255,0.4);
  transform: translateY(-2px);
}
.lh-ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); margin-bottom: 18px;
}
.lh-ic svg { width: 22px; height: 22px; }
.lh-card h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220;
  margin: 0 0 8px;
}
.lh-card p {
  font-size: 14.5px; line-height: 1.55; color: #52525B; margin: 0 0 20px;
  text-wrap: pretty; flex: 1;
}
.lh-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid #F1F1F4;
}
.lh-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: #9CA1AB;
}
.lh-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--brand-600);
}
.lh-go svg { width: 15px; height: 15px; transition: transform .15s ease; }
.lh-card:hover .lh-go svg { transform: translateX(3px); }
/* external (Trust Center) card gets an outbound accent */
.lh-card.is-ext .lh-ic { background: #EEFBF3; color: #16A34A; }
.lh-ext-tag {
  position: absolute; top: 20px; right: 20px;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #16A34A;
}
.lh-ext-tag svg { width: 12px; height: 12px; }

/* language note under the grid */
.lh-langnote {
  display: flex; align-items: center; gap: 10px; margin-top: 30px;
  font-size: 13.5px; color: #6B7A96;
}
.lh-langnote svg { width: 16px; height: 16px; color: #9CA1AB; flex: none; }

/* ─────────────────────────── Doc — two-column layout ─────────────────────── */
.legal-doc .wrap { padding-top: 72px; padding-bottom: 96px; }
.ld-grid {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px;
  align-items: start;
}

/* sticky table of contents */
.ld-toc { position: sticky; top: 96px; }
.ld-toc .lab {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9CA1AB; margin-bottom: 14px;
}
.ld-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.ld-toc li { counter-increment: toc; }
.ld-toc a {
  display: flex; gap: 10px; padding: 6px 0;
  font-size: 13.5px; line-height: 1.4; color: #52525B; text-decoration: none;
  border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px;
  transition: color .15s ease, border-color .15s ease;
}
.ld-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; color: #C4C7CE; flex: none;
}
.ld-toc a:hover { color: #0B1220; }
.ld-toc a.cur { color: var(--brand-600); border-color: var(--brand-500); font-weight: 600; }
.ld-toc a.cur::before { color: var(--brand-500); }
.ld-toc .toc-tools {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid #EEF0F4;
  display: flex; flex-direction: column; gap: 10px;
}
.ld-tool {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; color: #52525B; transition: color .15s ease;
}
.ld-tool:hover { color: var(--brand-600); }
.ld-tool svg { width: 15px; height: 15px; color: #9CA1AB; }
.ld-tool:hover svg { color: var(--brand-500); }

/* ─────────────────────────── Doc — meta bar ─────────────────────── */
.ld-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid #EEF0F4;
}
.ld-meta .m {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: #52525B;
}
.ld-meta .m svg { width: 15px; height: 15px; color: #9CA1AB; }
.ld-meta .m b { color: #0B1220; font-weight: 600; }
.ld-meta .dot { color: #D4D4D8; }
/* language switch */
.ld-lang { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; background: #F4F4F5; border-radius: 999px; }
.ld-lang a {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: #6B7A96; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.ld-lang a:hover { color: #0B1220; }
.ld-lang a.cur { background: #fff; color: var(--brand-600); box-shadow: 0 1px 2px rgba(26,26,26,0.08); }
@media (max-width: 560px) { .ld-lang { margin-left: 0; } }

/* definition list — used by the Definições section */
.legal-dl { margin: 4px 0 8px; }
.legal-dl > div { padding: 12px 0; border-top: 1px solid #F1F1F4; }
.legal-dl > div:first-child { border-top: 0; }
.legal-dl dt { font-size: 15px; font-weight: 600; color: #18181B; margin-bottom: 4px; }
.legal-dl dd { margin: 0; font-size: 14.5px; line-height: 1.65; color: #3F3F46; text-wrap: pretty; }

/* nested sub-headed lists inside a legal section */
.legal-sub { font-size: 14.5px; font-weight: 700; color: #18181B; margin: 16px 0 6px; letter-spacing: 0.01em; }
.legal-sec .lead-p { color: #18181B; font-weight: 600; }

/* ─────────────────────────── TL;DR — plain language cards ─────────────────── */
.tldr {
  background: linear-gradient(180deg, #F6FAFF 0%, #FFFFFF 100%);
  border: 1px solid #D8E7FF; border-radius: 18px;
  padding: 28px 28px 30px; margin-bottom: 48px;
}
.tldr-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.tldr-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-500); color: #fff; border-radius: 999px;
  padding: 5px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
}
.tldr-badge svg { width: 14px; height: 14px; }
.tldr-head h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220; margin: 0;
}
.tldr-note {
  font-size: 13px; line-height: 1.5; color: #6B7A96; margin: 0 0 22px;
  max-width: 640px;
}
.tldr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tldr-card {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 12px; padding: 18px 18px 16px;
}
.tldr-card .ct { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.tldr-card .ct-ic {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); flex: none;
}
.tldr-card .ct-ic svg { width: 16px; height: 16px; }
.tldr-card .ct b { font-size: 14.5px; font-weight: 600; color: #0B1220; }
.tldr-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tldr-card li {
  position: relative; padding-left: 18px;
  font-size: 13.5px; line-height: 1.5; color: #3F3F46; text-wrap: pretty;
}
.tldr-card li::before {
  content: ''; position: absolute; left: 3px; top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--brand-400);
}
.tldr-card li .hl { background: #EFF6FF; color: #0050B0; border-radius: 3px; padding: 0 3px; font-weight: 600; }

/* ─────────────────────────── Full legal prose ─────────────────── */
.ld-fulltag {
  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9CA1AB;
}
.ld-fulltag::after { content: ''; flex: 1; height: 1px; background: #EEF0F4; }
.ld-fullnote { font-size: 13.5px; line-height: 1.55; color: #6B7A96; margin: 0 0 8px; }

.legal-sec { padding-top: 40px; scroll-margin-top: 92px; }
.legal-sec h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #0B1220;
  margin: 0 0 14px; max-width: none;
}
.legal-sec h2 .num {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  color: var(--brand-500); flex: none;
}
.legal-sec h3 {
  font-size: 16px; font-weight: 600; color: #18181B; margin: 24px 0 8px;
}
.legal-sec p, .legal-sec li {
  font-size: 15px; line-height: 1.7; color: #3F3F46; text-wrap: pretty;
}
.legal-sec p { margin: 0 0 14px; }
.legal-sec ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.legal-sec a { color: var(--brand-600); }

/* placeholder — where legal drops the full clause text */
.legal-ph {
  border: 1px dashed #CBD5E6; border-radius: 10px; background: #FAFBFD;
  padding: 16px 18px; margin: 0 0 8px;
  display: flex; gap: 12px; align-items: flex-start;
}
.legal-ph svg { width: 17px; height: 17px; color: var(--brand-400); flex: none; margin-top: 2px; }
.legal-ph .t { font-size: 13.5px; line-height: 1.55; color: #6B7A96; }
.legal-ph .t b { color: #3F3F46; font-weight: 600; }

/* ─────────────────────────── Links & responsive ─────────────────── */
a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }

@media (max-width: 900px) {
  .lh-grid { grid-template-columns: 1fr; }
  .ld-grid { grid-template-columns: 1fr; gap: 0; }
  .ld-toc { display: none; }
  .tldr-grid { grid-template-columns: 1fr; }
}
@media print {
  .snav, .page-hero .ph-jump, .ld-toc, .s-cta, .site-foot, .dm-overlay,
  .ld-fulltag, .legal-ph { display: none !important; }
  .ld-grid { grid-template-columns: 1fr; }
  body.subpage { background: #fff; }
}