/* ==========================================================================
   Legal pages (privacy, terms) and the 404 page
   ========================================================================== */

/* ---------- Legal: hero ---------- */
.lg-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.lg-hero .page-hero__grid { align-items: end; }
.lg-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-meta .chip { height: 32px; font-size: 0.8125rem; color: var(--slate); }
.lg-meta .chip svg { width: 14px; height: 14px; }

/* ---------- Legal: layout ---------- */
.lg-body { padding-bottom: var(--section); }
.lg-layout { display: grid; gap: 40px; }
@media (min-width: 1040px) {
  .lg-layout { grid-template-columns: 260px minmax(0, 720px); justify-content: space-between; gap: 64px; }
}

/* table of contents */
.lg-toc { align-self: start; }
@media (min-width: 1040px) { .lg-toc { position: sticky; top: calc(var(--header-h) + 24px); } }
.lg-toc__card { padding: 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); }
.lg-toc__title { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.lg-toc li { counter-increment: toc; }
.lg-toc a {
  display: flex; gap: 12px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px;
  font-size: 0.9375rem; line-height: 1.35; color: var(--slate);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lg-toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--stone); font-size: 0.8125rem; padding-top: 1px; }
.lg-toc a:hover { background: var(--mist); color: var(--ink); }
@media (max-width: 1039px) {
  .lg-toc ol { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .lg-toc, .lg-prose { max-width: 780px; } /* keep lines readable on tablets */
}

/* prose column */
.lg-prose { font-size: 1.0625rem; line-height: 1.7; color: var(--slate); }
.lg-prose > section { scroll-margin-top: 24px; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); }
.lg-prose > section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.lg-prose h2 { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 18px; display: flex; gap: 14px; align-items: baseline; }
.lg-prose h2 .lg-num { font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: var(--ember-ink); font-variant-numeric: tabular-nums; transform: translateY(-0.2em); }
.lg-prose h3 { font-size: 1.125rem; font-weight: 500; color: var(--ink); margin: 26px 0 8px; letter-spacing: -0.005em; }
.lg-prose p + p, .lg-prose p + ul, .lg-prose ul + p, .lg-prose .lg-callout + p, .lg-prose p + .lg-callout { margin-top: 14px; }
.lg-prose strong { color: var(--ink); font-weight: 500; }
.lg-prose a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(20, 20, 20, 0.25); text-underline-offset: 3px; transition: text-decoration-color var(--dur-1); }
.lg-prose a:not(.btn):hover { text-decoration-color: var(--ember); }
.lg-prose ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lg-prose ul li { position: relative; padding-left: 26px; }
.lg-prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.lg-callout {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--white); border: 1px solid var(--line); color: var(--ink); font-size: 0.9875rem; line-height: 1.55;
}
.lg-callout .icon-tile { width: 36px; height: 36px; border-radius: 11px; }
.lg-callout .icon-tile svg { width: 18px; height: 18px; }
.lg-callout p { margin: 0; }
.lg-grid { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 640px) { .lg-grid { grid-template-columns: 1fr 1fr; } }
.lg-grid > div { padding: 18px 20px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); }
.lg-grid h3 { margin: 0 0 6px; font-size: 1rem; }
.lg-grid p { font-size: 0.9375rem; line-height: 1.55; }
.lg-end { margin-top: 48px; padding: 28px; border-radius: var(--r-lg); background: var(--mist); display: grid; gap: 18px; justify-items: start; }
.lg-end p { color: var(--slate); text-wrap: pretty; }
.lg-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.lg-end__dl { --btn-h: 44px; gap: 10px; }
.lg-end__dl .i { width: 17px; height: 17px; }

/* terms: the PDF download in the hero; the disc turns so its arrows point (and slide) down */
.lg-dl { display: grid; gap: 14px; justify-items: start; }
.lg-dl__btn .btn__disc { rotate: 90deg; }
.lg-dl__note { display: flex; align-items: flex-start; gap: 9px; font-size: 0.9375rem; line-height: 1.45; color: var(--slate); text-wrap: pretty; }
.lg-dl__note .i { width: 17px; height: 17px; margin-top: 1px; color: var(--ember-ink); }

/* a short aside under a section, e.g. who to email about payments */
.lg-prose .lg-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 0.9875rem; line-height: 1.55; }
.lg-note .i { width: 18px; height: 18px; margin-top: 3px; color: var(--ember-ink); }
.lg-prose a[data-email] { overflow-wrap: anywhere; }

/* print-only letterhead and contact line (see the @media print block at the end) */
.lg-print { display: none; }

/* ---------- 404 ---------- */
.nf { padding: clamp(24px, 4vw, 48px) 0 var(--section); }
.nf__stage {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(520px, 70vh, 720px); border-radius: var(--r-xl);
  background: #E3A03A url("../../img/silk/banner-brass.webp") center / cover no-repeat;
  background-image: image-set(url("../../img/silk/banner-brass-1600.webp") 1x, url("../../img/silk/banner-brass.webp") 2x);
  display: grid; align-items: end;
}
.nf__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 30%, rgba(20, 20, 20, 0.42) 100%);
}
.nf__code {
  position: absolute; right: clamp(-8px, 1vw, 24px); top: clamp(4px, 2vw, 24px); z-index: -1;
  font-size: clamp(9rem, 26vw, 22rem); line-height: 0.8; letter-spacing: -0.06em; font-weight: 500;
  color: rgba(255, 255, 255, 0.34); user-select: none;
  font-variation-settings: "opsz" 14;
}
.nf__panel {
  margin: clamp(16px, 3vw, 32px); max-width: 620px; padding: clamp(24px, 3.4vw, 40px);
  display: grid; gap: 18px; justify-items: start;
}
.nf__panel.glass { background: rgba(255, 255, 255, 0.8); border-radius: var(--r-lg); }
.nf__panel .t-lead { color: var(--slate); }
.nf__links { display: grid; gap: 10px; margin-top: 28px; }
@media (min-width: 720px) { .nf__links { grid-template-columns: repeat(3, 1fr); } }
.nf__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.nf__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.nf__link strong { display: block; font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.01em; }
.nf__link span span { display: block; font-size: 0.875rem; color: var(--slate); margin-top: 2px; }

/* ==========================================================================
   Print: the legal pages as a clean A4 document. The terms page is also
   saved as assets/docs/forge-terms-of-business.pdf by tools/make-terms-pdf.ps1.
   ========================================================================== */
@page {
  size: A4; margin: 18mm 18mm 20mm;
  @bottom-left { content: "forge.co.zw"; font: 400 8pt/1 "DM Sans", Arial, sans-serif; color: #62625F; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 400 8pt/1 "DM Sans", Arial, sans-serif; color: #62625F; }
}
@media print {
  html, body { background: #FFFFFF !important; }
  body { font-size: 10.5pt; line-height: 1.55; color: var(--ink); overflow: visible; }
  *, *::before, *::after { transition: none !important; animation: none !important; box-shadow: none !important; text-shadow: none !important; }
  [data-reveal], .split-word, .split-line { opacity: 1 !important; transform: none !important; filter: none !important; }
  .skip-link, .page-curtain, .site-header, .mobile-menu, .site-footer, .wa-float,
  .lg-toc, .lg-end, .btn, .icon-btn, .lg-callout .icon-tile { display: none !important; }
  .container { max-width: none; padding: 0; }

  /* letterhead */
  .lg-print { display: block; }
  .lg-print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10mm; padding-bottom: 5mm; margin-bottom: 10mm; border-bottom: 0.75pt solid var(--ink); }
  .lg-print-head img { width: 36mm; height: auto; }
  .lg-print-head span { font-size: 8.5pt; line-height: 1.45; color: var(--slate); text-align: right; }

  /* title block */
  .lg-hero, .page-hero { padding: 0 0 8mm; }
  .page-hero__grid, .page-hero__aside { display: block; }
  .lg-hero .eyebrow { font-size: 8pt; }
  /* a document prints its formal name, not the website breadcrumb (data-print on the crumbs nav) */
  .lg-hero .crumbs[data-print] .crumbs__list { display: none; }
  .lg-hero .crumbs[data-print]::before { content: attr(data-print); }
  .lg-hero .page-hero__title { margin-top: 3mm; font-size: 27pt; line-height: 1.08; }
  .lg-hero .t-lead { margin-top: 6mm; max-width: 150mm; font-size: 12pt; line-height: 1.5; color: var(--ink); }
  .lg-dl { display: block; margin-top: 4mm; }
  .lg-dl__note { font-size: 10pt; color: var(--ink); }
  .lg-meta { display: flex; gap: 0; margin-top: 3mm; }
  .lg-meta .chip { height: auto; padding: 0; border: 0; background: none; font-size: 9pt; color: var(--slate); gap: 1.5mm; }
  .lg-meta .chip + .chip::before { content: "\00B7"; margin: 0 2.5mm; }
  .lg-meta .chip svg { display: none; }

  /* body */
  .lg-body { padding: 0; }
  .lg-layout { display: block; }
  .lg-prose { max-width: none; font-size: 10.5pt; line-height: 1.55; color: rgba(20, 20, 20, 0.84); }
  .lg-prose > section { padding-top: 4.5mm; margin-top: 4.5mm; border-top: 0.5pt solid var(--line-strong); }
  .lg-prose > section:first-child { padding-top: 4.5mm; margin-top: 0; border-top: 0.5pt solid var(--line-strong); }
  .lg-prose h2 { font-size: 14.5pt; line-height: 1.2; margin-bottom: 3mm; gap: 3mm; break-after: avoid; }
  .lg-prose h2 .lg-num { font-size: 9pt; transform: none; }
  .lg-prose h3 { break-after: avoid; }
  .lg-prose p, .lg-prose li { orphans: 3; widows: 3; }
  .lg-prose p + p, .lg-prose p + ul, .lg-prose ul + p { margin-top: 2.5mm; }
  .lg-prose ul { gap: 1.8mm; }
  .lg-prose ul li { padding-left: 5mm; break-inside: avoid; }
  .lg-prose ul li::before { left: 0.8mm; top: 0.64em; width: 1.6mm; height: 1.6mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lg-prose a:not(.btn) { color: var(--ink); text-decoration-color: rgba(20, 20, 20, 0.4); text-underline-offset: 2px; }
  .lg-callout { margin-top: 3.5mm; padding: 0.5mm 0 0.5mm 4mm; border: 0; border-left: 1.5pt solid var(--ember); border-radius: 0; background: none; font-size: 10pt; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lg-grid { grid-template-columns: 1fr 1fr; gap: 2.5mm; margin-top: 3.5mm; }
  .lg-grid > div { padding: 3mm 3.5mm; border-radius: 2.5mm; background: none; border: 0.5pt solid var(--line-strong); break-inside: avoid; }
  .lg-grid h3 { font-size: 10pt; margin-bottom: 1mm; }
  .lg-grid p { font-size: 9.5pt; line-height: 1.45; }
  .lg-prose .lg-note { margin-top: 3.5mm; font-size: 10pt; }
  .lg-note .i { width: 3.8mm; height: 3.8mm; margin-top: 0.6mm; }

  /* contact line */
  .lg-print-foot { margin-top: 6mm; padding-top: 4mm; border-top: 0.75pt solid var(--ink); font-size: 9.5pt; line-height: 1.5; color: var(--ink); break-inside: avoid; }
  .lg-print-foot p + p { margin-top: 1.5mm; }
  .lg-prose .lg-print-foot a { text-decoration: none; }
}

/* the single column below 1040px may not grow past the screen (its auto track followed the widest content) */
@media (max-width: 1039.98px) { .lg-layout { grid-template-columns: minmax(0, 1fr); } }
/* the download button may not push a 320px screen sideways */
.lg-dl__btn { max-width: 100%; }
@media (max-width: 379.98px) { .lg-dl__btn { padding-left: 20px; gap: 12px; } }