/* ══ BUILDYRA — legal pages ════════════════════════════════════════════
   Shared by legal/privacy.html, terms.html, refunds.html and cookies.html.
   Tokens follow the homepage so these do not read as a different product.

   Colours are chosen to clear WCAG AA on this paper: --fg-2 is #5F5F66
   (5.2:1), not the #6B6B72 the marketing page uses for large display text,
   because everything here is body copy at 4.5:1.

   ── A NAME CLASH WORTH KNOWING ABOUT ──────────────────────────────────
   These pages use a `.lg-` prefix for "legal", and assets/buildyra-glass.css
   uses the same prefix for "liquid glass". They do not collide today —
   legal owns body, foot, meta, t, toc, top and wrap; glass owns bar, btn,
   card, chip, dark, field, flat, sheet, sweep and tint-accent — but both
   sheets load on these pages, so ADDING a name to either one means
   checking the other first. */
:root{
  --paper:#F5F4F2; --ink:#0D0D0F; --fg-2:#5F5F66;
  --hair:rgba(13,13,15,.13);
  --accent:#4A3FCF;                 /* 7.4:1 on paper; the brand violet is 4.0 */
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(18px,5vw,68px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:hover{text-decoration:underline}

/* The masthead is a pane. It is not sticky, so a live backdrop here costs
   one paint rather than one per scroll frame, and it sits on flat paper —
   which is precisely the ground the material needs its hairline and its
   shadow for, not its specular rim. */
/* Full bleed, so square: `.lg-bar` defaults to a pill, which on something
   the width of the window draws a lozenge rather than a masthead. */
.lg-top{--lg-r:0;border-radius:0;padding:20px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lg-top a.brand{font-family:var(--serif);font-size:25px;letter-spacing:-.01em;color:var(--ink)}
.lg-top nav{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
.lg-top nav a{color:var(--fg-2)}
.lg-top nav a[aria-current="page"]{color:var(--ink);font-weight:600}

.lg-wrap{max-width:1080px;margin:0 auto;padding:0 var(--gut) 90px;
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,5vw,64px)}
.lg-toc{position:sticky;top:26px;align-self:start;padding-top:46px;font-size:13.5px}
.lg-toc p{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:12px}
.lg-toc a{display:block;padding:4px 0;color:var(--fg-2)}
.lg-toc a:hover{color:var(--ink)}

.lg-body{padding-top:46px;max-width:68ch}
.lg-body h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5.2vw,54px);line-height:1.06;letter-spacing:-.015em}
.lg-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-2);margin-top:14px}
.lg-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.9vw,31px);
  line-height:1.2;margin:46px 0 12px;scroll-margin-top:24px}
.lg-body h3{font-size:16.5px;font-weight:650;margin:26px 0 8px}
.lg-body p,.lg-body li{color:#26262C}
.lg-body p+p{margin-top:13px}
.lg-body ul,.lg-body ol{margin:12px 0 12px 22px}
.lg-body li{margin-bottom:7px}
.lg-body ul{list-style:disc}
.lg-body ol{list-style:decimal}
.lg-body strong{font-weight:650}

table.lg-t{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
table.lg-t th,table.lg-t td{border:1px solid var(--hair);padding:9px 11px;
  text-align:left;vertical-align:top}
table.lg-t th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-2);font-weight:400;background:rgba(13,13,15,.028)}

.lg-foot{border-top:1px solid var(--hair);padding:26px var(--gut) 56px;
  font-size:13.5px;color:var(--fg-2);display:flex;gap:20px;flex-wrap:wrap}

/* The contents rail IS sticky, so it stays flat on purpose — the same rule
   the Inspiration library's filter bar is held to. */
.lg-toc{--lg-r:16px}
.lg-foot a{color:var(--fg-2)}

@media(max-width:860px){
  .lg-wrap{grid-template-columns:1fr;gap:0}
  .lg-toc{position:static;padding-top:34px;border-bottom:1px solid var(--hair);
    padding-bottom:18px}
  .lg-toc a{display:inline-block;margin-right:16px}
  .lg-body{padding-top:30px}
}
@media print{ .lg-toc,.lg-top nav,.bz-cc{display:none} }