/* ============================================================
   Feedwrk · legal pages — page-local layer
   ------------------------------------------------------------
   Chrome (nav / promo / footer / wordmark) and ALL tokens come
   from the shared v5 design system, linked before this file:
     tokens.css · feedwrk-ui.css · landing-tokens.css
     landing-ui.css · extras.css · direction.css · landing-real.css
   This file only carries:
     1. a few nav-layout overrides the landing itself keeps inline
     2. focus-visible for the reused nav / footer links
     3. the reading layout for the legal article (main.legal)
   No local :root, no forked chrome, no raw hex — everything below
   resolves against the design-system tokens.
   ============================================================ */

/* ---- 1 · page shell + nav layout (mirrors /dev/ inline chrome) ---- */
body.fw-l{
  margin:0;
  background:var(--canvas);
  color:var(--ink-1);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}

/* centred pill: 3-col grid balances brand / pill / actions at any width */
.fw-l-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.fw-l-nav>.brand{justify-self:start}
.fw-l-nav>.fw-l-navpill{justify-self:center}
.fw-l-nav>.nav-actions{justify-self:end;display:flex;gap:var(--s-3)}

/* nav CTA: fixed control height, link reset (component owns the rest) */
.nav-actions .fw-btn{box-sizing:border-box;height:40px;padding-block:0;display:inline-flex;align-items:center}
a.fw-btn{text-decoration:none}

/* ---- 2 · focus-visible for reused chrome links (component gap) ---- */
.fw-l-navlink:focus-visible,
.fw-l-footer2 a:focus-visible{
  outline:2px solid var(--voltage);
  outline-offset:3px;
  border-radius:var(--r-1);
}

/* the pill folds away on phones (tablet keeps it, as on /dev/);
   brand + one CTA stay reachable at ≥44px touch height */
@media(max-width:640px){
  .fw-l-navpill{display:none}
  .nav-actions .fw-btn{min-height:44px}
}

/* ============================================================
   3 · LEGAL ARTICLE — reading layout
   Prose in Inter; labels / dates / IDs in mono; one measure.
   ============================================================ */
main.legal{
  max-width:760px;
  margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(20px,4.5vw,24px) clamp(64px,9vw,96px);
}

/* eyebrow + effective-date line = mono labels */
main.legal .eyebrow{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:10px;
}
main.legal h1{
  font:700 clamp(30px,5vw,40px)/1.1 var(--font-sans);
  letter-spacing:var(--track-tight);
  color:var(--ink-1);
  margin:0 0 14px;
}
main.legal .meta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:var(--track-mono);
  color:var(--ink-3);
  margin-bottom:36px;
}
main.legal .lede{
  font-size:var(--l-fs-lead);
  line-height:var(--l-lh-body);
  color:var(--ink-2);
  margin:0 0 40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--rule);
}

main.legal h2{
  font:600 clamp(19px,2.6vw,22px)/1.25 var(--font-sans);
  letter-spacing:var(--track-tight);
  color:var(--ink-1);
  margin:48px 0 12px;
}
main.legal h3{
  font:600 16px/1.35 var(--font-sans);
  letter-spacing:var(--track-tight);
  color:var(--ink-1);
  margin:28px 0 6px;
}

main.legal p,
main.legal ul,
main.legal ol,
main.legal dl{
  color:var(--ink-2);
  line-height:var(--l-lh-body);
  margin:0 0 14px;
}
main.legal ul,
main.legal ol{padding-left:22px}
main.legal li{margin-bottom:6px}
main.legal strong{color:var(--ink-1);font-weight:600}
main.legal em{font-style:italic}

main.legal a{
  color:var(--voltage);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--motion-fast);
}
main.legal a:hover{border-bottom-color:var(--voltage)}
main.legal a:focus-visible{
  outline:2px solid var(--voltage);
  outline-offset:2px;
  border-radius:var(--r-1);
  border-bottom-color:transparent;
}

/* inline code / identifiers = mono chip */
main.legal code{
  font-family:var(--font-mono);
  font-size:.9em;
  color:var(--ink-1);
  background:var(--surface-sunken);
  padding:1px 6px;
  border-radius:var(--r-1);
}

/* table of contents */
main.legal .toc{
  background:var(--surface-sunken);
  border:1px solid var(--rule);
  border-radius:var(--r-3);
  padding:20px 22px;
  margin:32px 0 48px;
}
main.legal .toc .label,
main.legal .box .label,
main.legal .info dt{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:6px;
}
main.legal .toc ol{margin:0;padding-left:22px}
main.legal .toc li{margin-bottom:4px}
main.legal .toc a{color:var(--ink-2);border:none}
main.legal .toc a:hover{color:var(--voltage)}

/* contact / operator box */
main.legal .box{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-3);
  padding:18px 22px;
  margin:24px 0;
  color:var(--ink-2);
}

/* definition list (imprint) */
main.legal .info{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r-3);
  padding:22px 26px;
  margin:24px 0;
  font-size:15px;
  line-height:1.7;
}
main.legal .info dt{margin-top:14px}
main.legal .info dt:first-child{margin-top:0}
main.legal .info dd{margin:4px 0 0;color:var(--ink-2)}

/* short-version callout — citrus = attention (with the word "Short version") */
main.legal .note{
  background:color-mix(in oklab,var(--citrus) 18%,var(--surface));
  border:1px solid color-mix(in oklab,var(--citrus) 40%,var(--rule));
  border-radius:var(--r-3);
  padding:14px 18px;
  margin:22px 0;
  font-size:14px;
  color:var(--ink-2);
}

/* data tables — dense, ruled, mono headers */
main.legal table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0 24px;
  font-size:14px;
}
main.legal th,
main.legal td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
  color:var(--ink-2);
}
main.legal th{
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--ink-3);
  background:var(--surface-sunken);
}

/* wide tables scroll rather than shove the measure on phones */
@media(max-width:600px){
  main.legal table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* unfilled legal placeholders — voltage-tinted mono token */
main.legal .placeholder{
  background:color-mix(in oklab,var(--voltage) 12%,transparent);
  color:var(--voltage);
  padding:0 4px;
  border-radius:var(--r-1);
  font-family:var(--font-mono);
  font-size:.9em;
}