/* ============================================================
   Legal pages — terms and conditions, privacy policy.

   PART 1 mirrors the shell of index.html: the same tokens, the same
   background, the same type. A legal page is still the site, and
   nothing here is new work.

   PART 2 is the reading layout. One 800px text column, a sticky
   contents rail beside it, and no commercial anything: no coupon,
   no card grid, no CTA. The gold is spent on exactly two things —
   the active item in the contents, and the rule down the side of a
   block the reader must not skip.

   The menu bar and the footer are NOT in this file. They are
   injected once by the developer, as on the Apex review.
   ============================================================ */

/* ============================================================
   PART 1 — shell, mirrored from index.html
   ============================================================ */

:root{
  --bg:#171C27;
  --lift:#2A3244;
  --bone:#EDE8DF;
  --bone-dim:rgba(237,232,223,.55);
  --muted:#AAB5C7;
  --surface:#131A27;
  --recess:#0E1420;
  --gold:#FCAF00;
  --champagne:#F0CE80;
  --edge:rgba(219,183,104,.28);
  --line:rgba(217,182,108,.18);
  --rule:rgba(237,232,223,.1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--bone);
  font:400 16px/1.6 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  
}

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(118% 88% at 50% 44%,var(--lift) 0%,transparent 62%);
}

.lg{position:relative;z-index:1}
.lg-shell{width:min(1240px,calc(100% - clamp(28px,5vw,80px)));margin-inline:auto}

.lg a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(240,206,128,.45)}
.lg a:hover{text-decoration-color:var(--champagne)}
.lg :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.lg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   PART 2 — the page
   ---------- masthead -------------------------------------- */

.lg-hero{padding:clamp(48px,7vw,88px) 0 clamp(28px,3vw,40px)}

.lg-eyebrow{
  color:var(--champagne);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}

.lg-h1{
  margin-top:14px;color:#fff;
  font-size:clamp(34px,5vw,64px);line-height:1.08;
  font-variation-settings:"wdth" 88,"wght" 800;letter-spacing:-.025em;
}

.lg-lede{
  margin-top:18px;max-width:760px;
  color:var(--muted);font-size:17px;line-height:1.65;
}

/* The dateline. Thin rule above it rather than a box: it is metadata,
   not a panel, and a second bordered surface this high on the page
   would compete with the document itself. */
.lg-stamp{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;
  margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--bone-dim);
}
.lg-stamp b{color:var(--bone);font-weight:600}
.lg-stamp time{font-variant-numeric:tabular-nums}

/* ---------- two columns ------------------------------------ */

.lg-layout{
  display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:clamp(28px,3.6vw,56px);align-items:start;
  padding-bottom:clamp(56px,7vw,96px);
}

/* ---------- contents rail ----------------------------------- */

.lg-toc{
  position:sticky;top:24px;
  display:flex;flex-direction:column;max-height:calc(100vh - 48px);
  background:var(--surface);border:1px solid var(--edge);border-radius:14px;
  overflow:hidden;
}
.lg-toc>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 14px;color:var(--champagne);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  /* On desktop the rail is always open, so the summary is a heading and
     nothing else. The chevron and the hit area come back under 1000px. */
  pointer-events:none;list-style:none;
}
.lg-toc>summary::-webkit-details-marker{display:none}
.lg-toc__chev{display:none}

.lg-toc__list{
  list-style:none;overflow-y:auto;overscroll-behavior:contain;
  padding:0 10px 16px;scrollbar-width:thin;
  scrollbar-color:rgba(240,206,128,.28) transparent;
}
.lg-toc__list::-webkit-scrollbar{width:6px}
.lg-toc__list::-webkit-scrollbar-thumb{background:rgba(240,206,128,.28);border-radius:3px}

.lg-toc a{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;
  padding:7px 10px;border-left:2px solid transparent;border-radius:0 8px 8px 0;
  color:var(--muted);font-size:13.5px;line-height:1.35;
  text-decoration:none;transition:color .15s,background-color .15s;
}
.lg-toc a:hover{color:var(--bone);background:rgba(237,232,223,.045)}
.lg-toc__n{
  color:var(--champagne);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.lg-toc a[aria-current="true"]{
  color:#fff;background:rgba(240,206,128,.08);border-left-color:var(--gold);
}
.lg-toc a[aria-current="true"] .lg-toc__n{color:var(--gold)}

/* ---------- the document ------------------------------------ */

.lg-doc{max-width:820px}

.lg-panel{
  background:var(--surface);border:1px solid var(--edge);border-radius:14px;
  padding:clamp(20px,3.4vw,40px);
}

/* The preamble sits above section 01 and reads as the contract's
   opening, so it keeps the recessed ground the site uses for
   anything quoted or set apart. */
.lg-intro{
  background:var(--recess);border:1px solid var(--rule);border-radius:10px;
  padding:clamp(18px,2.4vw,26px);
}
.lg-intro p+p{margin-top:14px}
.lg-intro>:last-child{margin-bottom:0}

.lg-sec{
  scroll-margin-top:28px;
  margin-top:40px;padding-top:36px;border-top:1px solid var(--rule);
}

.lg-h2{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;
  color:#fff;font-size:clamp(21px,2.1vw,26px);line-height:1.2;
  font-variation-settings:"wdth" 92,"wght" 800;letter-spacing:-.015em;
}
.lg-h2 .lg-n{
  color:var(--champagne);font-size:13px;letter-spacing:.06em;
  font-variation-settings:"wdth" 100,"wght" 700;font-variant-numeric:tabular-nums;
}

.lg-sec h3{
  margin-top:26px;color:#fff;font-size:17px;line-height:1.3;
  font-variation-settings:"wdth" 94,"wght" 700;
}

.lg-sec p{margin-top:15px;line-height:1.7;color:rgba(237,232,223,.86)}
.lg-sec strong{color:var(--bone);font-weight:700}

/* A hairline dash instead of a bullet. The list is part of a sentence,
   not a feature grid. */
.lg-list{list-style:none;margin-top:15px}
.lg-list li{
  position:relative;padding-left:22px;margin-top:11px;
  line-height:1.7;color:rgba(237,232,223,.86);
}
.lg-list li::before{
  content:"";position:absolute;left:3px;top:13px;
  width:9px;height:1px;background:rgba(240,206,128,.65);
}

/* The two blocks a reader must not skim past. Conspicuous by rule and
   ground rather than by a paragraph set in capitals, which nobody
   reads and which the house style does not use anywhere else. */
.lg-callout{
  margin-top:18px;padding:18px 20px;
  background:rgba(240,206,128,.05);border:1px solid var(--line);
  border-left:2px solid var(--gold);border-radius:0 10px 10px 0;
}
.lg-callout p{margin-top:0;color:var(--bone)}
.lg-callout p+p{margin-top:13px}

/* Still to be supplied by the operator. Deliberately visible: a legal
   page must not be published with either of these unresolved. */
.lg-fill{
  background:rgba(240,206,128,.1);color:var(--champagne);
  border:1px dashed rgba(240,206,128,.5);border-radius:6px;
  padding:1px 8px;font-size:14.5px;font-weight:600;
}

.lg-mail{white-space:nowrap}

/* ---------- close ------------------------------------------- */

.lg-end{
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline;
  justify-content:space-between;
  margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--bone-dim);
}
.lg-top{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--champagne);text-decoration:none;font-weight:600;font-size:13px;
}
.lg-top:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width:999px){
  .lg-layout{grid-template-columns:minmax(0,1fr);gap:24px}

  /* The rail becomes a real disclosure: closed on arrival so the
     document starts at the top of the screen, not below a list of
     twenty links. */
  .lg-toc{position:static;max-height:none}
  .lg-toc>summary{pointer-events:auto;cursor:pointer;min-height:52px;padding:0 18px}
  .lg-toc__chev{
    display:block;width:9px;height:9px;flex:none;
    border-right:1.5px solid var(--champagne);border-bottom:1.5px solid var(--champagne);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
  }
  .lg-toc[open]>summary{border-bottom:1px solid var(--rule)}
  .lg-toc[open] .lg-toc__chev{transform:rotate(-135deg) translate(-3px,-3px)}
  .lg-toc__list{max-height:min(58vh,440px);padding:12px 10px 14px}
  .lg-toc a{font-size:14px;padding:9px 10px}

  .lg-doc{max-width:none}
  .lg-sec{margin-top:32px;padding-top:28px}
}

@media (max-width:640px){
  .lg-hero{padding-top:36px}
  .lg-h1{font-size:34px}
  .lg-lede{font-size:16px}
  .lg-panel{padding:18px}
  .lg-callout{padding:16px}
  .lg-h2{grid-template-columns:minmax(0,1fr);gap:6px}
  .lg-mail{white-space:normal;word-break:break-word}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lg *{transition:none!important}
}

/* ============================================================
   print — a legal page gets printed and filed
   ============================================================ */

@media print{
  body{background:#fff;color:#111}
  body::before,.lg-toc,.lg-top{display:none!important}
  .lg-layout{display:block;padding:0}
  .lg-shell{width:auto}
  .lg-h1,.lg-h2,.lg-sec h3{color:#000}
  .lg-panel,.lg-intro,.lg-callout{
    background:none;border:0;padding:0;border-left:0;
  }
  .lg-sec{break-inside:avoid;border-top:1px solid #ccc}
  .lg-sec p,.lg-list li{color:#111}
  .lg-h2 .lg-n,.lg-eyebrow,.lg a{color:#444}
  .lg-fill{border:1px dashed #666;color:#000;background:none}
}

/* Review refinements: readable narrow screens and discreet legal draft notes. */
.lg-doc,.lg-stamp>span{min-width:0}
.lg-toc a{min-height:44px;align-items:center}
.lg-mail{white-space:normal;overflow-wrap:anywhere}
.lg-list li{padding-left:0;margin-top:14px}
.lg-list li::before{display:none}
.lg-fill{box-decoration-break:clone;-webkit-box-decoration-break:clone;overflow-wrap:anywhere}
.lg-draft{padding:2px 8px;border:1px solid var(--edge);border-radius:5px;color:var(--champagne)}
.lg-sec .lg-review-note{padding:12px 14px;border-left:2px solid var(--champagne);background:#f0ce8009;color:#c4b797;font-size:13px}
@media(max-width:640px){.lg-shell{width:calc(100% - 32px)}.lg-panel{padding:16px}.lg-intro{padding:16px}.lg-h2{grid-template-columns:24px minmax(0,1fr);gap:8px}.lg-sec p,.lg-list li{font-size:15px}.lg-stamp{font-size:12px}.lg-fill{padding:1px 4px}.lg-sec{scroll-margin-top:20px}}