/* ============================================================================
   legal.css — shared by privacy.html and terms.html
   Loaded AFTER landing.css, which supplies the design tokens (--ink ramp, --brand,
   --wrap, the type scale). Nothing here redefines a token; this file is layout and
   document typography only, the same arrangement checkout.css uses.
   ========================================================================= */

/* A reading measure, not the landing page's full --wrap. Legal text is long-form
   single-column prose and 1140px of it is unreadable. */
.lg-wrap{max-width:760px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem);}

/* ---------- header ---------- */
.lg-bar{background:var(--paper);border-bottom:1px solid var(--ink-200);}
.lg-bar-inner{
  max-width:760px;margin-inline:auto;padding:0 clamp(1.25rem,4vw,2rem);
  height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.lg-bar .logo img{height:30px;width:auto;flex:none;object-fit:contain;object-position:left center;}
.lg-back{font-size:var(--fs-sm);font-weight:550;color:var(--ink-700);white-space:nowrap;}
.lg-back:hover{color:var(--ink);}

/* ---------- document head ---------- */
.lg-head{padding:clamp(3rem,7vw,4.5rem) 0 clamp(1.5rem,3vw,2rem);}
.lg-head h1{font-size:clamp(2.1rem,5vw,2.9rem);line-height:1.1;letter-spacing:-.02em;}
.lg-meta{margin-top:1rem;font-size:var(--fs-sm);color:var(--ink-500);}

/* The one-paragraph plain-English summary above each document. Not a substitute for
   the text below it and labelled as such. */
.lg-summary{
  margin-top:1.75rem;padding:1.125rem 1.25rem;
  background:var(--brand-wash);border:1px solid var(--brand-tint);border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:1.65;color:var(--ink-800);
}
.lg-summary b{font-weight:650;}

/* ---------- body ---------- */
.lg-body{padding-bottom:clamp(4rem,8vw,6rem);}
.lg-body h2{
  font-size:1.375rem;line-height:1.25;letter-spacing:-.015em;
  margin-top:clamp(2.5rem,5vw,3.25rem);padding-top:1.5rem;
  border-top:1px solid var(--ink-200);
}
.lg-body h3{font-size:1.0625rem;font-weight:650;margin-top:1.75rem;}
.lg-body p{margin-top:.875rem;line-height:1.7;}
.lg-body ul{margin-top:.875rem;padding-left:1.25rem;list-style:disc;}
.lg-body li{margin-top:.5rem;line-height:1.7;}
.lg-body li::marker{color:var(--ink-400);}
.lg-body a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px;}
.lg-body strong{font-weight:650;color:var(--ink);}

/* Definition-style rows for the subprocessor and cookie tables. A real <table> is the
   honest element for this data, but it must scroll rather than force the page wide —
   the same rule every wide block on the landing page follows. */
.lg-tablewrap{margin-top:1.125rem;overflow-x:auto;}
.lg-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:520px;}
.lg-table th,.lg-table td{
  text-align:left;vertical-align:top;padding:.75rem .875rem;
  border-bottom:1px solid var(--ink-200);line-height:1.55;
}
.lg-table th{font-weight:650;color:var(--ink);background:var(--ink-50);white-space:nowrap;}
.lg-table td code{font-size:.9em;background:var(--ink-50);padding:.1em .35em;border-radius:4px;}

/* ⚠️ Placeholder marker. Deliberately loud: these are the values only the founder can
   supply, and a legal page that ships with "[[GOVERNING LAW]]" still in it is worse
   than one that never shipped. Delete this rule once every placeholder is filled and
   the styling disappears with them. */
.lg-todo{
  background:#FFE9A8;color:#5A4300;font-weight:650;
  padding:.1em .4em;border-radius:4px;border:1px dashed #B58900;
  font-size:.95em;white-space:nowrap;
}

/* ---------- footer ---------- */
.lg-foot{
  border-top:1px solid var(--ink-200);background:var(--paper-alt);
  padding:2.25rem 0;font-size:var(--fs-sm);color:var(--ink-500);
}
.lg-foot-inner{
  max-width:760px;margin-inline:auto;padding:0 clamp(1.25rem,4vw,2rem);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;
}
.lg-foot a{color:var(--ink-700);}
.lg-foot a:hover{color:var(--ink);}
.lg-foot nav{display:flex;flex-wrap:wrap;gap:1.25rem;}

@media (max-width:600px){
  .lg-bar-inner{height:64px;}
  .lg-body h2{margin-top:2.25rem;}
}