/* ==========================================================================
   Legal documents: privacy, terms, data and AI.

   Long-form prose with a sticky contents rail. Measure is capped near 76
   characters because these are read, not skimmed, and the full page width ran
   to ninety-eight.

   Prefix lg-.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.lg-hero{padding:clamp(66px,8vw,96px) 0 clamp(40px,5vw,58px)}
.lg-hero-in{max-width:820px}
.lg-hero h1{margin:20px 0 16px;font-size:clamp(34px,4.4vw,54px);line-height:1.06}
.lg-hero .lead{max-width:640px}
.lg-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.lg-meta span{
  padding:7px 14px;border:1px solid var(--line-dark);border-radius:100px;
  background:rgba(255,255,255,.045);font-size:12px;color:var(--night-ink-2);
}

/* --- shell --------------------------------------------------------------- */
.lg-sec{padding-top:clamp(40px,5vw,64px)}
/* The body column is the measure itself rather than whatever is left over.
   At 1fr the prose ran 98 characters a line: `ch` is the width of a zero, which
   is far wider than an average lowercase character, so 68ch measured 729px and
   read as ninety-odd. `ch` on the grid also resolves against the container's
   font rather than the prose font, which put 58ch at 84 characters. Measured at
   the paragraph instead: 540px is 72 characters at 15.5px. */
.lg-wrap{
  display:grid;grid-template-columns:230px minmax(0,540px);justify-content:center;
  gap:clamp(30px,4.5vw,64px);align-items:start;
}

/* --- contents ------------------------------------------------------------ */
.lg-toc{position:sticky;top:96px;width:230px}
.lg-toc-h{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px;
}
.lg-toc ol{list-style:none;margin:0;padding:0;counter-reset:lg}
.lg-toc li{counter-increment:lg}
.lg-toc a{
  display:flex;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.45;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);transition:color .18s ease;
}
.lg-toc li:last-child a{border-bottom:0}
.lg-toc a::before{
  content:counter(lg,decimal-leading-zero);flex:none;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-3);padding-top:2px;
}
.lg-toc a:hover{color:var(--violet)}
.lg-toc a:hover::before{color:var(--violet)}
.lg-toc-foot{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.lg-toc-foot a{
  padding:6px 12px;border:1px solid var(--line);border-radius:100px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);transition:all .18s ease;
}
.lg-toc-foot a:hover{border-color:var(--violet);color:var(--violet)}

/* --- prose --------------------------------------------------------------- */
.lg-body{max-width:100%}
.lg-block{padding-bottom:clamp(26px,3vw,38px);margin-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--line-2)}
.lg-block:last-of-type{border-bottom:0}
.lg-block h2{
  display:flex;align-items:baseline;gap:12px;
  font-size:clamp(19px,2.1vw,23px);line-height:1.25;margin-bottom:14px;scroll-margin-top:100px;
}
.lg-num{flex:none;font-size:12px;font-weight:600;color:var(--violet)}
.lg-body p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin-bottom:14px}
.lg-body p:last-child{margin-bottom:0}
.lg-body b{color:var(--ink);font-weight:650}
.lg-body a{color:var(--violet);text-decoration:underline;text-underline-offset:2px}
.lg-body a:hover{color:var(--ink)}

.lg-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.lg-list li{
  position:relative;padding-left:22px;font-size:15px;line-height:1.65;color:var(--ink-2);
}
.lg-list li::before{
  content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;
  background:var(--violet);opacity:.45;
}

/* The section a reader most needs to actually read. */
.lg-block.is-flag{
  padding:22px 24px;border:1px solid rgba(124,108,255,.32);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#F7F5FF,#FFF);
}
.lg-block.is-flag h2{margin-bottom:12px}

.lg-pending{
  padding:14px 18px;border-left:3px solid var(--amber);border-radius:0 var(--r) var(--r) 0;
  background:rgba(255,182,92,.12);font-size:14.5px !important;
}

/* --- subprocessor table -------------------------------------------------- */
.lg-tablewrap{overflow-x:auto;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r)}
.lg-table{width:100%;border-collapse:collapse;font-size:14.5px}
.lg-table th,.lg-table td{padding:14px 16px;text-align:left;vertical-align:top;line-height:1.6}
.lg-table th{
  width:34%;font-weight:650;color:var(--ink);background:var(--paper-2);
  border-right:1px solid var(--line);
}
.lg-table td{color:var(--ink-2)}
.lg-table tr + tr th,.lg-table tr + tr td{border-top:1px solid var(--line-2)}

/* --- foot ---------------------------------------------------------------- */
.lg-foot{margin-top:clamp(30px,4vw,46px);padding:22px 24px;border-radius:var(--r-lg);background:var(--paper-2)}
.lg-foot p{font-size:15px;line-height:1.7;color:var(--ink-2);margin-bottom:8px}
.lg-ent{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px !important;color:var(--ink-3) !important;margin-bottom:0 !important;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:940px){
  .lg-wrap{grid-template-columns:1fr;gap:28px}
  /* Sticky is wrong once it is a block at the top of the document. */
  .lg-toc{position:static;width:auto;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2)}
  .lg-body{max-width:none}
}
@media (max-width:560px){
  .lg-block h2{gap:9px;font-size:19px}
  .lg-table th{width:38%}
  .lg-block.is-flag{padding:18px 18px}
}