/* ============================================================
   Control - legal pages (privacy, terms)
   Shared by website/privacy/index.html and website/terms/index.html.

   Loads AFTER assets/css/hero.css, which owns :root, the nav and
   the button primitives. This file defines NO new custom properties
   and only composes tokens that already exist in hero.css.

   Everything here is namespaced under .lg- so it can never reach
   the lander. Do not add lander styles to this file.
   ============================================================ */

/* ---------- shell ---------- */
.lg-page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.lg-main{flex:1 1 auto}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

.lg-wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 var(--pad-x);
  width:100%;
}

/* The reading column IS the measure. Long-form text is the whole point of
   these two pages, so the column is capped at roughly 75 characters
   (~680px at 15px Inter) rather than filling the 1160 wrap.

   Do not also cap paragraphs at 75ch inside this column: the two caps
   disagree by ~120px, so body copy stops short of the TOC box and the
   definition tables and the right edge goes ragged. One cap, here. */
.lg-col{
  max-width:680px;
  margin:0 auto;
}

/* ---------- masthead ---------- */
.lg-head{
  padding:clamp(40px,6vw,72px) 0 clamp(28px,3.5vw,40px);
  border-bottom:1px solid var(--hair-strong);
}
.lg-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}
.lg-eyebrow .lg-sdot{
  width:6px;height:6px;border-radius:50%;
  background:var(--spectrum);flex:none;
}
.lg-title{
  margin-top:20px;
  font-weight:300;
  font-size:clamp(2.1rem,4.4vw,3.2rem);
  line-height:1.06;
  letter-spacing:-.032em;
  color:var(--ink);
}
.lg-meta{
  margin-top:20px;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:12.5px;letter-spacing:.02em;color:var(--faint);
}
.lg-meta b{
  font-weight:500;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.lg-meta .lg-dot{
  width:3px;height:3px;border-radius:50%;
  background:var(--line-soft);display:inline-block;flex:none;
}
.lg-intro{
  margin-top:24px;
  font-size:clamp(15px,1.2vw,16.5px);
  line-height:1.68;
  color:var(--ink-soft);
}

/* ---------- table of contents ----------
   NOTE: the TOC is a <nav>, and hero.css styles the bare `nav` selector as the
   80px-tall site header (display:flex, fixed height, horizontal padding). Those
   four declarations must be reset explicitly or the TOC collapses into a single
   80px flex row. Same trap applies to the footer nav below. */
.lg-toc{
  display:block;
  height:auto;
  position:static;
  margin:clamp(32px,4vw,48px) 0 0;
  background:#FBFAF9;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:clamp(20px,2.4vw,28px);
}
.lg-toc h2{
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.lg-toc ol{
  margin-top:16px;
  list-style:none;
  counter-reset:lgtoc;
  columns:2;
  column-gap:36px;
}
.lg-toc li{
  counter-increment:lgtoc;
  break-inside:avoid;
  margin-bottom:9px;
}
.lg-toc a{
  display:flex;
  gap:10px;
  font-size:14px;
  line-height:1.45;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .16s ease;
}
.lg-toc a::before{
  content:counter(lgtoc,decimal-leading-zero);
  flex:none;
  font-variant-numeric:tabular-nums;
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--faint);
  padding-top:2px;
}
.lg-toc a:hover{color:var(--ink)}
.lg-toc a:hover::before{color:var(--ink-soft)}

/* ---------- body ---------- */
.lg-body{
  padding:clamp(44px,5vw,68px) 0 clamp(56px,6vw,88px);
  counter-reset:lgsec;
}

.lg-sec{
  padding-top:clamp(34px,3.6vw,46px);
  scroll-margin-top:96px;
}
.lg-sec:first-child{padding-top:0}

.lg-sec > h2{
  counter-increment:lgsec;
  display:flex;
  gap:12px;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:500;
  letter-spacing:-.018em;
  line-height:1.3;
  color:var(--ink);
}
.lg-sec > h2::before{
  content:counter(lgsec,decimal-leading-zero);
  flex:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:var(--faint);
  padding-top:5px;
}

.lg-sec h3{
  margin-top:26px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.4;
  color:var(--ink);
}

.lg-sec p,
.lg-sec li{
  font-size:15px;
  line-height:1.75;
  color:var(--ink-soft);
  letter-spacing:-.002em;
}
.lg-sec p{margin-top:14px}
.lg-sec h3 + p{margin-top:10px}

.lg-sec ul,
.lg-sec ol{
  margin-top:14px;
  padding-left:20px;
}
.lg-sec ul{list-style:disc}
.lg-sec ol{list-style:decimal}
.lg-sec li{margin-bottom:9px;padding-left:4px}
.lg-sec li::marker{color:var(--faint)}
.lg-sec li > strong{color:var(--ink);font-weight:600}
.lg-sec p > strong{color:var(--ink);font-weight:600}

.lg-sec a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--hair-strong);
  transition:text-decoration-color .16s ease;
}
.lg-sec a:hover{text-decoration-color:var(--ink)}

/* A callout for the things that carry real legal weight: the
   controller/processor split, the opt-out route, the no-guarantee
   statement. Flat, hairline only, never a shadow. */
.lg-note{
  margin-top:20px;
  background:var(--card);
  border:1px solid var(--hair);
  border-left:2px solid var(--hair-strong);
  border-radius:var(--radius);
  padding:16px 18px;
}
.lg-note p{margin-top:0}
.lg-note p + p{margin-top:12px}

/* Conspicuous blocks. Warranty disclaimers and liability caps are
   conventionally set apart so they cannot be read as boilerplate. */
.lg-caps{
  text-transform:uppercase;
  font-size:12.5px;
  line-height:1.7;
  letter-spacing:.02em;
  font-weight:500;
  color:var(--ink-soft);
}

/* Definition rows: the ledger idiom from the lander. */
.lg-defs{
  margin-top:18px;
  border-top:1px solid var(--hair-strong);
}
.lg-defs div{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:8px 24px;
  padding:14px 0;
  border-bottom:1px solid var(--hair);
}
.lg-defs dt{
  font-size:13px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);
}
.lg-defs dd{
  font-size:14.5px;line-height:1.65;color:var(--ink-soft);
}

/* TODO markers the founder still has to resolve. Deliberately visible. */
.lg-todo{
  display:inline;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink-soft);
  background:#F5F2EE;
  border:1px dashed var(--hair-strong);
  border-radius:4px;
  padding:1px 6px;
}

/* ---------- cross-link between the two documents ---------- */
.lg-cross{
  margin-top:clamp(48px,5vw,72px);
  padding-top:26px;
  border-top:1px solid var(--hair-strong);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.lg-cross span{font-size:13.5px;color:var(--muted)}
.lg-cross .btn{font-size:14px;padding:10px 18px}

/* ---------- footer ----------
   The .lg-foot placeholder that used to live here is gone: both legal
   pages now render the shared enterprise footer (.b-foot), which is
   owned by body.css and is linked by /privacy and /terms for exactly
   that reason. No .lg-foot markup remains on either page. Do not
   re-add footer rules to this file - they belong in body.css. */

/* ---------- responsive ---------- */
@media (max-width:820px){
  .lg-toc ol{columns:1}
  .lg-defs div{grid-template-columns:1fr;gap:4px}
}

/* Reading comfort is the entire job of these two pages, and a phone is
   where a policy actually gets read. The previous rule shrank body copy
   from 15px to 14.5px below 520 - the wrong direction. The reading
   column is not the constraint on a handheld: .lg-col caps at 680px but
   the viewport hands it 350px at 390 and 320px at 360, so the measure is
   already down near 42 characters and cannot be improved by any width
   lever. The only remaining lever is size, and the correct move on a
   small screen is up, not down.

   16px over 1.72 gives a 27.5px line. It also clears the 16px threshold
   below which iOS Safari zooms the viewport. h3, the definition bodies
   and the conspicuous-disclaimer block move with it so the hierarchy
   does not invert - a 14.5px subhead under 16px body reads as a mistake.

   Breakpoint left at 520 deliberately: the widest phone in portrait is
   430, so 520 already covers every handheld, and the playbook is
   explicit about not churning a working value to conform to the ladder. */
@media (max-width:520px){
  .lg-sec p,
  .lg-sec li{font-size:16px;line-height:1.72}
  .lg-intro{font-size:16px;line-height:1.7}

  /* The section heading floors at 1.05rem, so raising body copy to 16px
     left it at 16.8px - a 1.05x gap that reads as the same voice and
     flattens a 30-section document into one undifferentiated column.
     Size carries the hierarchy here, not weight (which stays at 500).
     h3 keeps its desktop relationship of sitting a half-pixel under the
     body size and separating on weight alone. */
  .lg-sec > h2{gap:9px;font-size:20px}
  .lg-sec h3{font-size:15.5px}

  /* Definition rows: dt/dd held at the desktop ratio (13/14.5) rather
     than letting the term fall to 0.84 of its own definition. */
  .lg-defs dt{font-size:14px}
  .lg-defs dd{font-size:15.5px}

  .lg-caps{font-size:13.5px;line-height:1.72}
  .lg-cross{flex-direction:column;align-items:flex-start}
}

/* Tap targets.   (mobile-playbook P1)
   The TOC links are 308x20 stacked on a 9px gap - an adjacent-target
   failure on the one control that gets a reader into a 23,000px
   document. Padding rather than font-size: the label must stay at 14px
   beside its counter. The li margin is dropped because the padding now
   supplies the separation; without that the box grows by another 270px.

   .lg-toc a is already display:flex, so the counter ::before stretches
   with the padded box and stays aligned with the first line of the
   label - no change needed there.

   .lg-sec a are inline links inside running prose and are exempt from
   the 44px rule (WCAG 2.5.8 inline exception); padding them would break
   the line rhythm of the paragraph they sit in. */
@media (pointer:coarse){
  .lg-toc li{margin-bottom:0}
  .lg-toc a{padding:12px 0}
  .lg-cross .btn{padding:13px 20px}
}