/* ──────────────────────────────────────────────────────────────────
   LEGAL PAGES  — privacy.html, terms.html, refund.html
   One narrow measure, generous line-height, no decoration. These pages
   exist to be read and quoted from, so headings are anchorable and the
   type is sized for reading rather than for scanning.
   Depends on base.css tokens + theme-light.css, same as the landing page.
   ────────────────────────────────────────────────────────────────── */
.lg-wrap{max-width:760px;margin:0 auto;padding:0 22px 90px}
.lg-top{padding:26px 0 0}
.lg-back{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-body);color:var(--t2);text-decoration:none}
.lg-back:hover{color:var(--t)}
/* The brand mark sits between the back arrow and the wordmark, so every
   support page carries the logo without turning a quiet back-link into a
   full header lockup. */
.lg-bm{width:20px;height:20px;flex:none;display:block}
.lg-bm svg{width:100%;height:100%;display:block}
.lg-head{padding:34px 0 26px;border-bottom:1px solid var(--b);margin-bottom:34px}
/* A word, so Outfit — see THE TYPE RULE in css/pages.css. The date-stamped
   .lg-meta below it stays mono, because a version and a date are figures. */
.lg-kicker{font-weight:600;font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ac);margin-bottom:12px}
.lg-head h1{font-size:var(--fs-ld-h1);font-weight:700;letter-spacing:-.7px;margin-bottom:12px;line-height:1.15}
.lg-meta{font-size:var(--fs-sm);color:var(--t3);font-family:var(--mono)}
.lg-lead{font-size:15px;line-height:1.7;color:var(--t2);margin-top:16px}

/* The plain-English summary at the top of each page. Not a substitute for
   the terms below it, and says so — but it is what most people will read. */
.lg-tldr{background:var(--s1);border:1px solid var(--b);border-radius:var(--r);padding:20px 22px;margin-bottom:38px}
.lg-tldr h2{font-size:var(--fs-ld-h3);font-weight:700;margin-bottom:12px;letter-spacing:0}
.lg-tldr ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.lg-tldr li{position:relative;padding-left:20px;font-size:var(--fs-body);line-height:1.6;color:var(--t2)}
.lg-tldr li::before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ac)}
.lg-tldr .lg-note{margin-top:14px;font-size:var(--fs-sm);color:var(--t3);line-height:1.55}

/* ── JUMP TO A SECTION ──
   The policy pages run to 26 and 12 phone screenfuls. Two columns so the whole
   contents list is one glance rather than a second scroll of its own, and a
   44px row so it is thumbable — this is a navigation control, not prose. */
.lg-jump{margin:-22px 0 38px}
.lg-jump h2{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--t3);margin:0 0 10px}
.lg-jump ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:2px 18px;counter-reset:jump}
.lg-jump li{counter-increment:jump}
.lg-jump a{display:flex;align-items:center;gap:9px;min-height:44px;padding:2px 0;
  font-size:var(--fs-ld-body);line-height:1.3;color:var(--t2);text-decoration:none;border-bottom:1px solid var(--b)}
.lg-jump a::before{content:counter(jump);flex-shrink:0;font-family:var(--mono);font-size:var(--fs-label);
  color:var(--t3);min-width:1.4em}
.lg-jump a:hover,.lg-jump a:focus-visible{color:var(--ac)}
.lg-jump a:hover::before,.lg-jump a:focus-visible::before{color:var(--ac)}

.lg-wrap h2{font-size:var(--fs-ld-h2);font-weight:700;letter-spacing:-.3px;margin:38px 0 12px;scroll-margin-top:20px}
.lg-wrap h3{font-size:var(--fs-ld-h3);font-weight:600;margin:24px 0 8px}
.lg-wrap p{font-size:var(--fs-ld-body);line-height:1.75;color:var(--t2);margin-bottom:13px}
.lg-wrap ul,.lg-wrap ol{margin:0 0 15px 20px}
.lg-wrap li{font-size:var(--fs-ld-body);line-height:1.75;color:var(--t2);margin-bottom:7px}
.lg-wrap strong{color:var(--t);font-weight:600}
.lg-wrap a{color:var(--ac)}
.lg-wrap table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:var(--fs-body)}
.lg-wrap th,.lg-wrap td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--b);vertical-align:top;line-height:1.6}
.lg-wrap th{font-weight:600;color:var(--t);font-size:var(--fs-sm);letter-spacing:.02em}
.lg-wrap td{color:var(--t2)}
.lg-scroll{overflow-x:auto}

/* Anything the operator must replace before this page is published for
   real. Deliberately loud — an unfilled placeholder on a legal page is
   worse than no page.
   IT WRAPS. It used to be white-space:nowrap, which is fine for a short
   token like [BRACKET] and catastrophic for the ones that are a whole
   sentence of instructions to counsel: an unbreakable 900px line forces
   its container wide, and the container is a table cell. On a 390px phone
   that made three privacy.html tables 977px, 471px and 424px, all clipped
   with no way to scroll to the rest. Measured before/after: with this one
   property changed, all five tables sit at 346px and fit.
   overflow-wrap:anywhere because the content is unpredictable operator
   text — a long URL or reference number has to break rather than win. */
.lg-todo{display:inline-block;max-width:100%;background:color-mix(in srgb,var(--am) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--am) 45%,transparent);border-radius:5px;
  padding:1px 7px;font-family:var(--mono);font-size:var(--fs-label);color:var(--t);
  /* 500 is DM Mono's ceiling. A bracket inside a <strong> or a <th> inherits
     600+, which the browser fakes by smearing the 500 — at 11.5px that reads
     as a blurrier third font. Stated here so the slot cannot inherit past it. */
  font-weight:500;
  white-space:normal;overflow-wrap:anywhere}
.lg-draft{background:color-mix(in srgb,var(--am) 10%,var(--s1));border:1px solid color-mix(in srgb,var(--am) 40%,transparent);
  border-radius:var(--r);padding:16px 18px;margin-bottom:34px}
.lg-draft p{margin:0;font-size:var(--fs-body);color:var(--t2)}

/* The registered-address sign-off that closes privacy.html and refund.html.
   On refund.html it followed .pg-btns directly, whose bottom margin is 4px, so
   the operator's address sat jammed under the "Contact us about billing"
   button and read as part of it. It is a colophon, not body copy: it gets air
   above, a rule to sit under, and the quieter size the .lg-meta version line
   already uses. Both pages carry it so the two documents end identically. */
.lg-reg{border-top:1px solid var(--b);margin-top:40px!important;padding-top:20px;
  font-size:var(--fs-sm)!important;line-height:1.7!important;color:var(--t3)!important}

.lg-foot{border-top:1px solid var(--b);margin-top:52px;padding-top:22px;display:flex;gap:18px;flex-wrap:wrap;
  font-size:var(--fs-body);color:var(--t3)}
.lg-foot a{color:var(--t2);text-decoration:none}
.lg-foot a:hover{color:var(--t)}
@media(max-width:560px){
  .lg-head h1{font-size:26px}.lg-wrap h2{font-size:18px}
  /* A 16px-tall text link is a coin toss with a thumb. Padding only, so
     nothing shifts on a desktop, and the row keeps its gap. */
  .lg-foot{gap:2px 18px}
  /* padding-inline plus a matching negative margin widens the hit area
     without moving the word, so the row's 18px gaps look unchanged. */
  .lg-foot a{display:inline-flex;align-items:center;min-height:44px;
    padding-inline:5px;margin-inline:-5px}
  .lg-back{min-height:44px}
}