/* ============================================================
   Dolmen Systems — v5
   Palette: Graphite + Engineering Blue on off-white.
   Reinstated 2026-08-31 (decisions/log.md) as a deliberate
   overturn of the 2026-07-27 blue kill. CLOSED — do not reopen.
   ============================================================ */

:root{
  /* ground + ink */
  --page:        #E9ECEF;
  --surface:     #FFFFFF;
  --surface-alt: #F4F6F8;
  --navy:        #0F1D2E;
  --navy-soft:   #16293F;
  --ink:         #17191C;
  --slate:       #6B7280;
  --slate-light: #9AA3AE;

  /* GROUND-DEPENDENT — see brand/BRAND.md Rules 1-2. Slate is legal as normal
     text ONLY on --surface white (4.83:1); it FAILS on --page (4.08) and on
     --surface-alt (4.46). Slate-light is never type on a light ground; its one
     legal text role is on --navy (6.66:1). Do not fix a contrast failure by
     darkening either token — the palette is CLOSED. Change the ground or the
     role. Re-measure with website/tools/contrast-audit.cjs, never by eye. */

  /* accents */
  --blue:        #2E63C8;
  --blue-deep:   #365A7A;
  --green:       #1B8F62;
  --amber:       #B4761C;

  /* rules */
  --rule:        #E2E5E9;
  --rule-dark:   rgba(255,255,255,.12);

  /* metrics */
  --max:  74rem;
  --pad:  clamp(1.15rem, 4vw, 3rem);
  --r-lg: 24px;
  --r-md: 14px;
  --r-sm: 9px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --lift: 0 1px 2px rgba(15,29,46,.05), 0 12px 32px rgba(15,29,46,.08);
  --lift-console: 0 24px 70px rgba(5,12,22,.28);

  --f-head: "Oswald", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--f-body); font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.62; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }

/* ── type scale ────────────────────────────────────────── */
h1,h2,h3{ font-family:var(--f-head); font-weight:600; line-height:1.08; margin:0; }
h1{ font-size:clamp(2.05rem,1.2rem + 4vw,4.35rem); letter-spacing:-.005em; }
h1 em{ font-style:normal; color:var(--blue); }
h2{ font-size:clamp(1.85rem,1.3rem + 2.1vw,2.85rem); letter-spacing:.002em; }
h3{ font-size:1.12rem; font-weight:500; letter-spacing:.03em; text-transform:uppercase; }

.eyebrow{
  font-family:var(--f-head); font-weight:500; font-size:.76rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--blue-deep);
  margin:0 0 1rem;
}
.sub{
  color:var(--ink); font-size:1.06rem; max-width:44rem; margin:1.1rem 0 0;
}

/* ── layout ────────────────────────────────────────────── */
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }
.wrap.narrow{ max-width:52rem; }
.band{ padding:clamp(4rem,9vw,7.5rem) 0; }
.band.alt{ background:var(--surface); }

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--blue); color:#fff; text-decoration:none;
  font-family:var(--f-head); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; border:0; cursor:pointer;
  padding:.72rem 1.3rem; border-radius:var(--r-sm); font-size:.82rem;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ background:#2452a8; transform:translateY(-1px); }
.btn-sm{ padding:.55rem 1rem; font-size:.74rem; }
.btn-lg{ padding:1rem 1.75rem; font-size:.95rem; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ background:var(--slate-light); cursor:not-allowed; transform:none; }
.btn-ghost{
  font-family:var(--f-head); font-weight:500; font-size:.85rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--navy);
  text-decoration:none; border-bottom:2px solid var(--rule);
  padding-bottom:.2rem; transition:border-color .18s var(--ease);
}
.btn-ghost:hover{ border-color:var(--blue); }

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(233,236,239,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease);
}
.nav.stuck{ border-bottom-color:var(--rule); }
.nav-in{
  max-width:var(--max); margin-inline:auto; padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.mark{ width:26px; height:26px; flex:none; fill:var(--navy); }
.wordmark{
  font-family:var(--f-head); font-weight:600; font-size:1.02rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
}
.wordmark-sys{ color:var(--navy-soft); font-weight:500; margin-left:.34em; }
.nav-links{ margin-left:auto; display:flex; gap:1.6rem; }
.nav-links a{
  text-decoration:none; color:var(--ink); font-size:.87rem; font-weight:500;
  transition:color .18s var(--ease);
}
.nav-links a:hover{ color:var(--blue); }
@media (max-width:860px){ .nav-links{ display:none; } .btn-sm{ margin-left:auto; } }

/* ── hero ──────────────────────────────────────────────── */
.hero{ padding:clamp(1rem,2vw,1.75rem) var(--pad) 0; }
.hero-panel{
  max-width:var(--max); margin-inline:auto;
  background:var(--navy); border-radius:var(--r-lg);
  padding:clamp(3rem,7vw,6rem) clamp(1.25rem,4vw,4rem) 0;
  overflow:hidden;
}
.hero-copy{ max-width:52rem; margin-inline:auto; text-align:center; color:#fff; }
.hero-copy .eyebrow{ color:#7FA6E8; }
.hero-copy h1{ color:#fff; }

/* The hero headline is a question and its answer, and the answer is the whole
   pitch — so it is set as its own line, much larger, and in the one accent that
   only ever appears here. The em is display:block rather than preceded by a
   <br> so the size and leading below actually apply to a line box. */
.hero-copy h1 em{
  color:#8FB4F5;
  display:block;
  font-size:1.38em;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:.94;
  margin-top:.08em;
}
@media (max-width:620px){
  .hero-copy h1 em{ font-size:1.28em; }
}
.lede{
  color:#B9C4D2; font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  max-width:40rem; margin:1.35rem auto 0;
}
.hero-cta{
  margin:2.1rem 0 0; display:flex; gap:1.5rem;
  align-items:center; justify-content:center; flex-wrap:wrap;
}
.hero-cta .btn-ghost{ color:#fff; border-bottom-color:rgba(255,255,255,.28); }
.hero-cta .btn-ghost:hover{ border-bottom-color:#8FB4F5; }
.hero-meta{
  margin:1.5rem 0 0; color:var(--slate-light); font-size:.85rem;
}
/* The only contact target above the fold. Pale blue is the ghost-hover value
   already in this file (8.07:1 on --navy), so this adds no token. */
.hero-mail{
  margin:.55rem 0 0; color:var(--slate-light); font-size:.85rem;
}
.hero-mail a{ color:#8FB4F5; border-bottom:1px solid rgba(143,180,245,.35); }
.hero-mail a:hover{ border-bottom-color:#8FB4F5; }

/* Phone is the primary device — this page gets opened minutes after a cold
   call, on a handset. Keep the console (the proof) within reach of the fold
   rather than letting the headline own the whole first screen. */
@media (max-width:620px){
  .hero-panel{ padding-top:2.25rem; }
  .lede{ font-size:.99rem; margin-top:1.05rem; }
  .hero-cta{ margin-top:1.6rem; flex-direction:column; gap:1rem; align-items:stretch; }
  .hero-cta .btn-lg{ justify-content:center; padding:.85rem 1.25rem; font-size:.86rem; }
  .hero-meta{ margin-top:1.15rem; }
}

/* ── console ───────────────────────────────────────────── */
.console{ margin:clamp(2.5rem,5vw,3.75rem) 0 0; }
.console-label{
  color:var(--slate-light); font-size:.75rem; text-align:center;
  margin:0 auto 1rem; max-width:36rem; line-height:1.5;
}
.console-label strong{ color:#B9C4D2; font-weight:500; }
.console-frame{
  background:var(--surface); border-radius:var(--r-md) var(--r-md) 0 0;
  box-shadow:var(--lift-console); overflow:hidden;
  max-width:60rem; margin-inline:auto;
}
.console-bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem; background:var(--surface-alt);
  border-bottom:1px solid var(--rule);
}
.dot{ width:9px; height:9px; border-radius:50%; background:#D3D8DE; }
.console-title{
  margin-left:.7rem; font-family:var(--f-mono); font-size:.7rem;
  color:var(--ink); letter-spacing:.02em;
}
.console-body{ padding:clamp(1.1rem,2.5vw,1.75rem); text-align:left; }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
@media (max-width:620px){ .tiles{ grid-template-columns:1fr; } }
.tile{
  background:var(--surface-alt); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:.85rem .95rem;
}
.tile-k{
  margin:0; font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); font-weight:500;
}
.tile-v{
  margin:.35rem 0 .1rem; font-family:var(--f-head); font-weight:600;
  font-size:1.85rem; color:var(--navy); line-height:1;
  font-variant-numeric:tabular-nums;
}
.tile-s{ margin:0; font-size:.72rem; color:var(--ink); }

.queue-h{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin:1.5rem 0 .6rem; font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--slate); font-weight:600;
}
.pill{
  background:rgba(27,143,98,.1); color:var(--ink); border-radius:99px;
  padding:.16rem .55rem; font-size:.63rem; letter-spacing:.07em;
}
.queue{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.queue li{
  display:grid; align-items:center; gap:.3rem 1rem;
  grid-template-columns:auto 1fr auto auto;
  padding:.72rem .1rem; border-bottom:1px solid var(--rule); font-size:.83rem;
}
.q-id{ color:var(--blue); font-size:.78rem; font-weight:500; }
.q-who{ color:var(--ink); min-width:0; }
.q-who em{ color:var(--slate); font-style:normal; }
.q-amt{ color:var(--navy); font-weight:500; }
.q-st{
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; padding:.2rem .5rem; border-radius:var(--r-sm);
}
.q-st.ok{ color:var(--ink); background:rgba(27,143,98,.1); }
.q-st.flag{ color:var(--ink); background:rgba(180,118,28,.12); }
.queue li.needs .q-who{ font-weight:500; }
@media (max-width:620px){
  .queue li{ grid-template-columns:auto 1fr; }
  .q-amt{ grid-column:2; justify-self:start; }
  .q-st{ grid-row:1; grid-column:2; justify-self:end; }
}
.queue-f{
  margin:1rem 0 0; font-size:.83rem; color:var(--slate); max-width:42rem;
}


/* ── problem ───────────────────────────────────────────── */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; margin-top:1.75rem; }
@media (max-width:760px){ .two{ grid-template-columns:1fr; gap:1rem; } }
/* Stays Slate: .two sits on a white band, where Slate is legal (4.83:1). Measured. */
.two p{ margin:0; color:var(--slate); }
.two strong{ color:var(--ink); font-weight:600; }
/* example workflows — the "we can be a lot of things" list */
.ex-h{
  margin:2.5rem 0 .9rem; font-family:var(--f-head); font-weight:500;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate);
}
.ex{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:.1rem 2rem;
  border-top:1px solid var(--rule);
}
@media (max-width:700px){ .ex{ grid-template-columns:1fr; } }
.ex li{
  position:relative; padding:.68rem 0 .68rem 1.4rem;
  border-bottom:1px solid var(--rule); font-size:.93rem; color:var(--ink);
}
.ex li::before{
  content:""; position:absolute; left:0; top:1.18rem;
  width:7px; height:7px; background:var(--blue);
}
.ex-f{ margin:1.1rem 0 0; font-size:.88rem; color:var(--slate); }

.pull{
  margin:2.25rem 0 0; padding-left:1.25rem; border-left:3px solid var(--blue);
  font-family:var(--f-head); font-weight:500; font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  line-height:1.35; color:var(--navy);
}
.pull em{ font-style:normal; color:var(--slate); }

/* ── steps ─────────────────────────────────────────────── */
.steps{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.steps li{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:1.6rem 1.4rem;
}
.band.alt .steps li{ background:var(--page); }
.step-n{
  display:block; color:var(--blue); font-size:.85rem;
  font-weight:500; margin-bottom:.7rem;
}
.steps h3{ margin:0 0 .5rem; color:var(--navy); }
.steps p{ margin:0; color:var(--slate); font-size:.93rem; }

/* ── fit ───────────────────────────────────────────────── */
.fit-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem;
}
@media (max-width:860px){ .fit-grid{ grid-template-columns:1fr; } }
.fit-card{
  background:var(--page); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:1.5rem 1.35rem;
  border-top:3px solid var(--blue);
}
.fit-card h3{ margin:0 0 .6rem; color:var(--navy); }
/* Ground is --page, not the white band it sits on — so Slate is illegal here.
   The ul carries the same ink/size/weight as the p, which keeps it legal on this
   ground. It does NOT dedupe onto the p's audit row: contrast-audit keys on the
   selector too, so the bullets add one row (`li`, Ink on --page) and the page
   measures 69 pairs rather than 68. Measured, not predicted — the first guess
   here was wrong. */
.fit-card p{ margin:0; color:var(--ink); font-size:.9rem; }
.fit-card ul{ margin:0; padding-left:1.15rem; color:var(--ink); font-size:.9rem; }
.fit-card li{ margin:0 0 .35rem; }
.fit-card li:last-child{ margin-bottom:0; }
.fit-card ul + p{ margin-top:.85rem; }
.fit-note{
  margin:2rem 0 0; padding:1.1rem 1.25rem; background:var(--navy);
  color:#B9C4D2; border-radius:var(--r-md); font-size:.95rem;
}

/* ── about ─────────────────────────────────────────────── */
.about-wrap{ display:grid; grid-template-columns:16rem 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
@media (max-width:860px){ .about-wrap{ grid-template-columns:1fr; } }
.about-card{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:1.75rem 1.5rem; text-align:center;
  position:sticky; top:5rem;
}
@media (max-width:860px){ .about-card{ position:static; } }
.avatar{
  width:70px; height:70px; margin:0 auto .9rem; border-radius:50%;
  background:var(--navy); color:#fff; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:600; font-size:1.25rem; letter-spacing:.06em;
}
.about-name{ margin:0; font-family:var(--f-head); font-weight:600; font-size:1.1rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--navy); }
.about-role{ margin:.2rem 0 0; color:var(--slate); font-size:.85rem; }
.about-card hr{ border:0; border-top:1px solid var(--rule); margin:1.1rem 0; }
.about-loc{ margin:0; font-size:.72rem; color:var(--slate); letter-spacing:.04em; }
.about-copy p:not(.eyebrow){ color:var(--ink); margin:1.1rem 0 0; }
.about-copy h2{ color:var(--navy); }

/* ── contact ───────────────────────────────────────────── */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,5vw,4rem); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.form{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-md); padding:1.6rem 1.5rem;
}
/* Blue on --page measures 4.74:1 — legal as normal text, unlike --slate, which
   is why this does not inherit the section's body color. */
.contact-mail{ margin:1.15rem 0 0; font-size:1rem; }
.contact-mail a{
  color:var(--blue); font-weight:500;
  border-bottom:1px solid rgba(46,99,200,.3);
}
.contact-mail a:hover{ border-bottom-color:var(--blue); }
/* Honeypot. Off-screen rather than display:none — some bots skip anything
   the CSS hides outright, and a real keyboard user can never reach it
   because of tabindex="-1" + aria-hidden on the wrapper. */
.hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}
/* Submit feedback. The state is carried by the BACKGROUND TINT, never by the
   text colour: --green measures 4.08:1 on white and --amber 3.78:1, so both
   fail AA as normal text. Ink on a 10% tint keeps every state legal without
   touching the CLOSED palette. See BRAND.md Rules 1-2. */
.form-status{
  margin:0 0 1.2rem; font-family:var(--f-mono); font-size:.72rem;
  color:var(--ink); background:var(--surface-alt);
  border-radius:var(--r-sm); padding:.5rem .7rem; text-align:center;
}
.form-status.is-ok{  background:rgba(27,143,98,.12); }
.form-status.is-err{ background:rgba(180,118,28,.12); }
.field{ margin-bottom:.95rem; }
.field label{
  display:block; margin-bottom:.35rem; font-size:.74rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
}
.field input,.field textarea{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--surface-alt); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:.6rem .75rem; resize:vertical;
}
.field input:disabled,.field textarea:disabled{ color:var(--slate-light); }
/* First focus styles on the site — the form was disabled until 007, so no
   control was ever reachable. Blue measures 4.74:1 on white, well past the
   3:1 a non-text indicator needs. */
.field input:focus-visible,.field textarea:focus-visible,.btn:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}
.field input:focus,.field textarea:focus{ border-color:var(--blue); }

/* ── faq ───────────────────────────────────────────────── */
.faq{ margin-top:2rem; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 2rem 1.05rem 0;
  font-family:var(--f-head); font-weight:500; font-size:1rem;
  letter-spacing:.03em; color:var(--navy); position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  color:var(--blue); font-size:1.2rem; transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq p{ margin:0 0 1.15rem; color:var(--slate); font-size:.95rem; max-width:44rem; }

/* ── footer ────────────────────────────────────────────── */
.foot{ background:var(--navy); color:#B9C4D2; padding:2.75rem 0; }
.foot-in{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.foot .mark{ fill:#fff; }
.foot .wordmark{ color:#fff; }
.foot .wordmark-sys{ color:var(--slate-light); }
.foot p{ margin:0; font-size:.85rem; }
.foot-mail a{ color:#8FB4F5; border-bottom:1px solid rgba(143,180,245,.35); }
.foot-mail a:hover{ border-bottom-color:#8FB4F5; }
.foot-c{ margin-left:auto !important; font-size:.75rem !important; color:var(--slate-light) !important; }

/* ============================================================
   MOTION
   Two systems. `.r` = hero load-in, staggered by data-r and
   released by script.js adding .in to <body>. `.reveal` =
   scroll entry via IntersectionObserver adding .on.
   Both collapse to a no-op under prefers-reduced-motion, and
   both are visible by default if JS never runs — the .r/.reveal
   hidden state is only applied inside the .js guard below.
   ============================================================ */
.js .r{ opacity:0; transform:translateY(18px); }
.js body.in .r{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.js body.in .r[data-r="1"]{ transition-delay:.05s }
.js body.in .r[data-r="2"]{ transition-delay:.14s }
.js body.in .r[data-r="3"]{ transition-delay:.24s }
.js body.in .r[data-r="4"]{ transition-delay:.34s }
.js body.in .r[data-r="5"]{ transition-delay:.42s }
.js body.in .r[data-r="6"]{ transition-delay:.50s; transform:translateY(48px); }
.js body.in .r[data-r="6"].in-done{ transform:none; }

.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.on{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .r,.js .reveal,.js body.in .r,.js .reveal.on{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .btn:hover{ transform:none; }
}

/* ============================================================
   LEGAL PAGES (/privacy)
   Long-form document pages that reuse the v5 shell but not its
   anchor nav — the nav links are same-page anchors and would be
   dead here. The prose sits on a --surface white panel, which is
   the ONLY ground where --slate is legal as text (BRAND.md Rule 1,
   4.83:1). Do not move this panel onto --page or --surface-alt
   without re-colouring .legal-updated.
   ============================================================ */
.legal-head{ background:var(--navy); padding:1.35rem 0; }
.legal-head .mark{ fill:#fff; }
.legal-head .wordmark{ color:#fff; }
.legal-head .wordmark-sys{ color:var(--slate-light); }

.legal{ padding:3.25rem 0 4.5rem; }
.legal-panel{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-lg); box-shadow:var(--lift);
  padding:clamp(1.6rem,4vw,3.25rem);
}
.legal h1{ font-size:clamp(1.85rem,1.4rem + 1.7vw,2.7rem); margin:0 0 .5rem; }
.legal h2{
  font-family:var(--f-head); font-size:1.05rem; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  margin:2.25rem 0 .55rem; color:var(--ink);
}
.legal p{ margin:0 0 1rem; color:var(--ink); }
.legal-updated{
  font-family:var(--f-mono); font-size:.78rem;
  color:var(--slate) !important; margin:0 0 2.25rem !important;
}
.legal a{ color:var(--blue); }
.legal .back-link{
  display:inline-block; margin-top:2.5rem; font-weight:500;
  color:var(--blue); text-decoration:none;
  border-bottom:2px solid var(--rule);
}