/* DataSteak - shared styles for legal pages (privacy, terms, licensing) */

.lg-hero{background:var(--bg-grey);border-bottom:1px solid var(--line)}
.lg-hero h1{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-0.04em;line-height:1.05;margin:12px 0 10px}
.lg-updated{font-size:14.5px;color:var(--ink-3)}

.lg-grid{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}

/* ---- sticky contents ---- */
.lg-nav{position:sticky;top:110px}
.lg-nav h5{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.lg-nav h5.lg-nav-2{margin-top:26px}
.lg-nav a{display:block;font-size:14.5px;color:var(--ink-2);padding:7px 0;line-height:1.4;
  border-left:2px solid var(--line);padding-left:14px;margin-left:-2px;
  transition:color .15s var(--ease),border-color .15s var(--ease)}
.lg-nav a:hover{color:var(--ink);border-left-color:var(--red)}

/* ---- body copy ---- */
.lg-body{max-width:76ch}
.lg-body h2{font-size:24px;font-weight:800;letter-spacing:-0.028em;margin:44px 0 14px;scroll-margin-top:110px}
.lg-body h2:first-child{margin-top:0}
/* scroll-margin-top matches the h2 rule above. Without it an h3 that is an
   anchor target, #api and #corrections are both h3, scrolls to sit underneath
   the fixed header and the reader sees the paragraph after the heading rather
   than the heading. Every element the contents list can point at needs this,
   not just the top-level ones. */
.lg-body h3{font-size:17px;font-weight:700;letter-spacing:-0.02em;margin:26px 0 8px;color:var(--ink);scroll-margin-top:110px}
.lg-body p{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:14px}
.lg-body p strong{color:var(--ink);font-weight:650}
.lg-body a{color:var(--red);font-weight:550;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.lg-body a:hover{color:var(--red-600)}
.lg-body ul{margin:0 0 16px 0;padding-left:22px}
.lg-body li{font-size:16px;color:var(--ink-2);line-height:1.65;margin-bottom:7px}
.lg-body li strong{color:var(--ink);font-weight:650}

/* ---- table ---- */
.lg-table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15px}
.lg-table th{text-align:left;font-weight:700;font-size:12.5px;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-4);padding:0 16px 10px 0;border-bottom:1px solid var(--line-2)}
.lg-table td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line);color:var(--ink-2);line-height:1.5;vertical-align:top}
.lg-table tr:last-child td{border-bottom:0}
.lg-table td:last-child,.lg-table th:last-child{padding-right:0}

@media(max-width:1080px){
  .lg-grid{grid-template-columns:1fr;gap:36px}
  .lg-nav{position:static;padding-bottom:22px;border-bottom:1px solid var(--line)}
  .lg-nav a{display:inline-block;border-left:0;padding:6px 14px 6px 0;margin-left:0}
  .lg-nav a:hover{border-left:0}
}
@media(max-width:600px){
  .lg-table{display:block;overflow-x:auto;white-space:nowrap}
}