/* ============================================================
   The legal set v3 (2026-10-15): Privacy Policy, Security, Terms of Service on one calm template, open and scrapable.
   v2 asked for "less cluttered, we don't get lost, more brief"; v3 adds "perfectly scrapable, every information out in the open".
   Order of a page: title, date and a Plain text link (the Markdown twin) on the edge line; then a slim sticky index beside the
   reading column. The reading column opens with In brief (the essentials in four lines), then one section per idea:
   number and name (h2), a one-line summary as the lead, and the full legal wording under it, always visible.
   No boxes, no cards, no toggles: hairlines between sections on the black void. Three faces only:
   Satoshi (title, section names, index), Helvetica Neue Light (all reading text), small tracked labels.
   One accent, the lilac #9798f8: the section being read in the index and the brief's dots.
   Script (legal.js) only lights the index, runs the phone's contents bar and pins the title; all text is in the HTML.
   ============================================================ */
.lg{ --lg-side:212px; --lg-gap:clamp(40px,5vw,96px); --lg-main:700px; --lg-top:132px; --lg-ind:44px;
  --lg-acc:#9798f8; --lg-hair:rgba(255,255,250,.10); --lg-rest:#7d7d7a; --lg-say:#e2e2de;
  --lg-light:'Helvetica Neue',Helvetica,Arial,sans-serif;
  position:relative; padding:3.2vh var(--edge) clamp(72px,12vh,140px); }
.lg :where(p,h1,h2,h3,ul,ol,dl,dd,address){ margin:0; }
.lg :where(ul,ol){ list-style:none; padding:0; }
.lg a{ color:inherit; }

/* small tracked labels: the date, In brief, On this page, Full wording */
.lg-k{ font-family:var(--mono); font-weight:300; font-size:var(--t-label); letter-spacing:var(--ls-label); line-height:var(--lh-label); text-transform:uppercase; color:var(--fg-dim); }

/* ---------- the head, on the edge line ---------- */
.lg-head{ margin:0 0 clamp(40px,6.4vh,68px); }
.lg-head .page-title{ margin:0; }
.lg-upd{ margin-top:12px !important; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; }
.lg-plain{ color:var(--fg-mid); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,250,.28); text-underline-offset:3px; transition:color .25s var(--ease); }
.lg-plain:hover{ color:var(--fg); }
.lg-lede{ margin-top:clamp(18px,2.6vh,26px) !important; font-family:var(--lg-light); font-weight:300; font-size:var(--t-lede); line-height:var(--lh-lede); letter-spacing:var(--ls-lede); color:var(--fg-mid); max-width:58ch; text-wrap:pretty; }

/* ---------- two columns: the index sticks while the reading column scrolls ---------- */
.lg-grid{ display:grid; grid-template-columns:var(--lg-side) minmax(0,var(--lg-main)); column-gap:var(--lg-gap); align-items:start; }
.lg-side{ position:sticky; top:var(--lg-top); align-self:start; max-height:calc(100vh - var(--lg-top) - 24px); overflow-y:auto; scrollbar-width:none; padding:2px 0 12px; }
.lg-side::-webkit-scrollbar{ display:none; }
.lg-main{ min-width:0; }

/* the index: number and name; the section being read lights */
.lg-toc-k{ margin-bottom:10px !important; }
.lg-toc-btn{ display:none; }
.lg-toc-list{ display:grid; }
.lg-toc-list a{ position:relative; display:grid; grid-template-columns:26px minmax(0,1fr); align-items:baseline; padding:4px 0 4px 14px; text-decoration:none;
  font-family:var(--sans); font-weight:500; font-size:var(--t-ui); letter-spacing:-.01em; line-height:1.35; color:var(--lg-rest); transition:color .3s var(--ease); }
.lg-toc-list .n, .lg-toc-now .n{ font-family:var(--mono); font-weight:300; font-size:var(--t-label); letter-spacing:.04em; font-variant-numeric:tabular-nums lining-nums; color:var(--fg-dim); transition:color .3s var(--ease); }
.lg-toc-list a::before{ content:""; position:absolute; left:1px; top:calc(4px + .675em - 2.5px); width:5px; height:5px; border-radius:50%; background:var(--lg-acc); opacity:0; transform:scale(.3); transition:opacity .3s var(--ease), transform .4s var(--ease); }
.lg-toc-list a:hover{ color:var(--fg-mid); }
.lg-toc-list a.is-on{ color:var(--fg); }
.lg-toc-list a.is-on .n{ color:var(--lg-acc); }
.lg-toc-list a.is-on::before{ opacity:1; transform:none; }


/* ---------- In brief: the essentials, first ---------- */
.lg-brief{ padding:0 0 clamp(34px,5vh,52px); scroll-margin-top:var(--lg-top); }
.lg-brief ul{ display:grid; gap:12px; margin-top:16px; }
.lg-brief li{ position:relative; padding-left:var(--lg-ind); font-family:var(--lg-light); font-weight:300; font-size:var(--t-lede); line-height:1.5; letter-spacing:var(--ls-lede); color:var(--fg); max-width:calc(var(--lg-ind) + 58ch); text-wrap:pretty; }
.lg-brief li::before{ content:""; position:absolute; left:1px; top:calc(.75em - 2.5px); width:5px; height:5px; border-radius:50%; background:var(--lg-acc); }

/* ---------- a section: number and name, one sentence, the full wording on request ---------- */
.lg-sec{ padding:24px 0 22px; border-top:1px solid var(--lg-hair); scroll-margin-top:var(--lg-top); }
.lg-sec:last-of-type{ border-bottom:1px solid var(--lg-hair); }
.lg-h{ display:grid; grid-template-columns:var(--lg-ind) minmax(0,1fr); align-items:baseline;
  font-family:var(--sans); font-weight:500; font-size:var(--t-h3); letter-spacing:var(--ls-h3); line-height:var(--lh-h3); color:var(--fg); }
.lg-h .n{ font-family:var(--mono); font-weight:300; font-size:var(--t-label); letter-spacing:.06em; font-variant-numeric:tabular-nums lining-nums; color:var(--fg-dim); }
.lg-say{ margin:7px 0 0 var(--lg-ind) !important; font-family:var(--lg-light); font-weight:300; font-size:var(--t-body); line-height:1.55; color:var(--lg-say); max-width:60ch; text-wrap:pretty; }
.lg-full{ display:grid; gap:12px; margin:12px 0 0 var(--lg-ind); padding:0 0 4px; font-family:var(--lg-light); font-weight:300; font-size:var(--t-body); line-height:1.62; color:var(--fg-mid); max-width:62ch; }
.lg-full strong{ font-weight:400; color:var(--fg); }
.lg-full ul{ display:grid; gap:8px; }
.lg-full li{ position:relative; padding-left:18px; }
.lg-full li::before{ content:""; position:absolute; left:3px; top:calc(.81em - 2px); width:3px; height:3px; border-radius:50%; background:var(--fg-dim); }
.lg-full address{ font-style:normal; }
.lg-say a, .lg-full a, .lg-end a{ color:var(--fg); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,250,.32); text-underline-offset:3px; overflow-wrap:anywhere; transition:text-decoration-color .25s var(--ease); }
.lg-say a:hover, .lg-full a:hover, .lg-end a:hover{ text-decoration-color:var(--fg); }


/* ---------- the end: the rest of the set (and on Security, the questionnaire line) ---------- */
.lg-end{ margin-top:clamp(40px,7vh,72px); padding-left:var(--lg-ind); display:grid; gap:18px; justify-items:start; }
.lg-end-say{ font-family:var(--sans); font-weight:500; font-size:var(--t-h3); letter-spacing:var(--ls-h3); line-height:var(--lh-h3); color:var(--fg); }
.lg-end-say a{ margin-left:.35em; font-family:var(--lg-light); font-weight:300; }
.lg-addr{ font-style:normal; font-family:var(--lg-light); font-weight:300; font-size:var(--t-small); line-height:var(--lh-small); color:var(--fg-mid); }
.lg-set{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; }
.lg-set a{ font-family:var(--sans); font-weight:500; font-size:var(--t-ui); letter-spacing:-.01em; color:var(--fg-mid); text-decoration:none; transition:color .25s var(--ease); }
.lg-set a:hover{ color:var(--fg); }

.lg a:focus-visible, .lg-toc-btn:focus-visible{ outline:1px solid var(--fg-mid); outline-offset:3px; border-radius:3px; }

/* ---------- a narrower desk ---------- */
@media (max-width:1100px){ .lg{ --lg-side:190px; --lg-gap:40px; } }

/* ---------- the title stays (2026-10-15, Zelda: "the big title visible as we scroll"): once the page title leaves the screen,
   the same title rests under the nav in a smaller cut, on a black band that fades into the page; the index sits under it ---------- */
.lg-pin{ position:fixed; z-index:50; left:0; right:0; top:0; padding:68px var(--edge) 22px; pointer-events:none;   /* the band runs up under the nav, so nothing reads behind the logo */
  background:linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
  opacity:0; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .45s var(--ease); }
.lg-pin::before{ content:attr(data-title); display:block; font-family:var(--sans); font-weight:500; font-size:clamp(24px,2vw,30px); letter-spacing:var(--ls-h2); line-height:1.1; color:var(--fg); }
.lg.is-pinned .lg-pin{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .lg-pin{ transition:none; } }

/* ---------- phones and small tablets: one column; the index becomes a sticky bar that opens ---------- */
@media (max-width:860px){
  .lg{ --lg-top:164px; --lg-ind:30px; padding-top:20px; }
  .lg-side{ top:112px !important; }
  .lg-pin{ padding-top:64px; padding-bottom:24px; background:linear-gradient(180deg, #000 0%, #000 86%, rgba(0,0,0,0) 100%); } .lg-pin::before{ font-size:22px; }
  .lg-head{ margin-bottom:24px; }
  .lg-grid{ grid-template-columns:minmax(0,1fr); }
  .lg-side{ position:sticky; top:68px; z-index:40; max-height:none; overflow:visible; padding:0; margin-bottom:26px; }
  .lg-toc{ position:relative; }
  .lg-toc-k{ display:none; }
  .lg-side.is-stuck::before{ content:""; position:absolute; z-index:-1; left:calc(-1 * var(--edge)); right:calc(-1 * var(--edge)); top:-68px; bottom:-12px; pointer-events:none;
    background:linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 80%, rgba(0,0,0,0) 100%); }
  .lg-toc-btn{ appearance:none; display:flex; align-items:center; gap:10px; width:100%; min-height:44px; margin:0; padding:8px 14px; cursor:pointer; text-align:left; color:var(--fg);
    border-radius:10px; background:rgba(12,12,14,.86); border:1px solid rgba(255,255,250,.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
  .lg-toc-now{ flex:1; min-width:0; display:flex; align-items:baseline; gap:10px; font-family:var(--sans); font-weight:500; font-size:var(--t-ui); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; }
  .lg-toc-now .n{ color:var(--lg-acc); }
  .lg-toc-now .n:empty{ display:none; }
  .lg-toc-now .t{ overflow:hidden; text-overflow:ellipsis; }
  .lg-toc-chev{ flex:none; width:7px; height:7px; margin:-3px 2px 0 0; border-right:1px solid var(--fg-mid); border-bottom:1px solid var(--fg-mid); transform:rotate(45deg); transition:transform .3s var(--ease), margin .3s var(--ease); }
  .lg-toc.open .lg-toc-chev{ transform:rotate(-135deg); margin-top:4px; }
  html.lg-js .lg-toc-panel{ display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:calc(100vh - 150px); overflow-y:auto; overscroll-behavior:contain; padding:8px 14px 12px;
    border-radius:10px; background:rgba(12,12,14,.96); border:1px solid rgba(255,255,250,.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 30px 60px -20px rgba(0,0,0,.95); }
  html.lg-js .lg-toc.open .lg-toc-panel{ display:block; }
  html:not(.lg-js) .lg-side{ position:static; }
  html:not(.lg-js) .lg-toc-btn{ display:none; }
  html:not(.lg-js) .lg-toc-k{ display:block; }
  .lg-toc-list a{ padding:7px 0 7px 14px; font-size:15px; }
  .lg-toc-list a::before{ top:calc(7px + .675em - 2.5px); }
  .lg-brief li{ font-size:var(--t-body); }
  .lg-sec{ padding:20px 0 18px; }
  .lg-end{ padding-left:0; }
}
@media (prefers-reduced-motion:reduce){ .lg-toc-list a, .lg-toc-list a::before, .lg-toc-chev{ transition:none; } }
@media print{ .lg-side, .lg-pin, .lg-set{ display:none !important; } .lg-grid{ display:block; } .lg-say, .lg-full, .lg-brief li{ margin-left:0 !important; padding-left:0 !important; } .lg-brief li::before{ display:none; } }
.lg-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }