/* ============================================================
   TRESONANT.AI — tresonant.co
   datasheet.css — technical specification / documentation shell.

   Vocabulary
     .doc-shell / .doc-rail / .doc-sheet / .doc-measure   layout
     .clause / .clause__index                             numbered sections
     .spec-table / .spec-row / .spec-key / .spec-val      dominant component
     .plate / .plate__caption                             framed figures
     .callout                                             set-off notes
   ============================================================ */

:root{
  /* ---- ground ---- */
  --field:#FAFAF7;
  --field-raised:#FFFFFF;
  --field-deep:#0E1116;

  /* ---- ink ---- */
  --ink-0:#0E1116;
  --ink-1:#3D434D;
  --ink-2:#6B7280;
  --ink-inv-0:#F4F4F1;
  --ink-inv-1:#B9BEC6;
  --ink-inv-2:#9CA3AF;

  /* ---- rules ---- */
  --rule:#E3E2DC;
  --rule-strong:#C9C8C0;
  --rule-inv:#262B33;

  /* ---- signal ---- */
  --signal:#0F62FE;
  --signal-deep:#0043CE;
  --signal-wash:#EDF3FF;
  --pass:#1F7A4D;
  --hold:#B54708;

  /* ---- type ---- */
  --display:"Instrument Sans",system-ui,sans-serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display:clamp(2.6rem,1.6rem + 4.4vw,5rem);
  --t-h2:clamp(1.6rem,1.25rem + 1.1vw,2.25rem);
  --t-h3:clamp(1.1rem,1rem + 0.45vw,1.35rem);
  --t-body:clamp(0.9375rem,0.9rem + 0.2vw,1.0625rem);
  --t-mono:0.75rem;
  --t-mono-sm:0.6875rem;

  /* ---- metrics ---- */
  --rail-w:240px;
  --gutter-num:56px;
  --bar-h:52px;
  --measure:820px;
  --pad-x:clamp(24px,4.5vw,72px);
  --clause-pad:clamp(56px,8vh,88px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}

html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (max-width:1000px){html{scroll-padding-top:calc(var(--bar-h) + 20px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--ink-0);
  background:var(--field);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--signal);color:#fff}

img,svg{max-width:100%;height:auto}
svg{display:block}

a{color:var(--signal);text-decoration:none;transition:color 120ms ease-out}
a:hover{color:var(--signal-deep)}

:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--ink-0)}
h1{font-size:var(--t-display);letter-spacing:-0.035em;line-height:1.0}
h2{font-size:var(--t-h2);letter-spacing:-0.02em;line-height:1.15}
h3{font-size:var(--t-h3);letter-spacing:-0.01em;line-height:1.3}

p{max-width:65ch}

.tnum{font-family:var(--mono);font-variant-numeric:tabular-nums}
.signal-ink{color:var(--signal)}

/* ---------- skip link ---------- */
.doc-skip{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:var(--ink-0);color:var(--field);
  padding:10px 16px;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.08em;text-transform:uppercase;
}
.doc-skip:focus{left:0;color:var(--field)}

/* ============================================================
   1. SHELL
   ============================================================ */
.doc-shell{
  display:grid;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  align-items:start;
}
.doc-sheet{min-width:0}
.doc-measure{
  max-width:var(--measure);
  margin-inline:0;
  padding-inline:var(--pad-x);
}
.doc-measure--full{max-width:none}
.doc-measure--wide{max-width:1080px}

/* ============================================================
   2. RAIL — left vertical document navigation
   ============================================================ */
.doc-rail{
  position:sticky;top:0;
  height:100vh;height:100dvh;
  overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--rule);
  padding:28px 0 40px;
  background:var(--field);
  display:flex;flex-direction:column;gap:0;
}
.doc-rail__brand{padding:0 20px 22px}
.doc-rail__meta{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:14px 20px;
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);
  line-height:2;max-width:none;
}
.doc-rail__meta b{font-weight:500;color:var(--ink-1)}

.doc-rail__nav{padding:22px 0 0}
.doc-rail__group{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-2);
  padding:0 20px;margin-bottom:8px;max-width:none;
}
.doc-rail__group + .doc-rail__list{margin-bottom:26px}
.doc-rail__list{list-style:none}
.doc-rail__item{
  display:grid;grid-template-columns:34px minmax(0,1fr);
  align-items:baseline;
  padding:8px 20px 8px 18px;
  font-family:var(--sans);font-size:0.875rem;line-height:1.4;
  color:var(--ink-1);
  border-left:2px solid transparent;
}
.doc-rail__item:hover{color:var(--ink-0);background:var(--field-raised)}
.doc-rail__num{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.06em;color:var(--ink-2);
}
.doc-rail__item[aria-current]{color:var(--ink-0);border-left-color:var(--signal);font-weight:500}
.doc-rail__item[aria-current] .doc-rail__num{color:var(--signal)}

.doc-rail__cta{
  margin-top:auto;
  border-top:1px solid var(--rule);
  padding:18px 20px 0;
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.05em;text-transform:uppercase;
  color:var(--ink-0);line-height:1.7;
}
.doc-rail__cta:hover{color:var(--signal)}
.doc-rail__close{display:none}

/* ---------- mobile bar ---------- */
.doc-bar{display:none}

@media (max-width:1000px){
  .doc-shell{grid-template-columns:minmax(0,1fr)}

  .doc-bar{
    position:sticky;top:0;z-index:150;
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;height:var(--bar-h);
    padding-inline:clamp(16px,4vw,24px);
    background:var(--field);
    border-bottom:1px solid var(--rule);
  }
  .doc-bar__toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-right:-8px;
    background:transparent;border:1px solid transparent;
    color:var(--ink-0);cursor:pointer;
  }
  .doc-bar__toggle:hover{border-color:var(--rule-strong)}
  .doc-bar__toggle .glyph-close{display:none}
  .doc-bar__toggle[aria-expanded="true"] .glyph-open{display:none}
  .doc-bar__toggle[aria-expanded="true"] .glyph-close{display:block}

  .doc-rail{
    position:fixed;inset:var(--bar-h) 0 0 0;z-index:140;
    height:auto;width:100%;
    border-right:none;
    padding:20px 0 40px;
    transform:translateX(-100%);
    transition:transform 200ms ease-out;
    visibility:hidden;
  }
  .doc-rail[data-open="true"]{transform:none;visibility:visible}
  .doc-rail__brand{display:none}
  .doc-rail__meta{border-top:none}
  .doc-rail__item{padding-block:12px;font-size:1rem}
  .doc-rail__cta{padding-top:22px}
  body[data-rail-open="true"]{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .doc-rail{transition:none}
}

/* ---------- lockup ---------- */
.sigil{display:inline-flex;align-items:center;gap:10px;color:var(--ink-0)}
.sigil:hover{color:var(--ink-0)}
.sigil__mark{flex:none}
.sigil__type{
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  letter-spacing:0.02em;color:currentColor;line-height:1;
}
.sigil__suffix{
  font-family:var(--mono);font-weight:500;font-size:0.72em;
  color:var(--ink-2);letter-spacing:0.02em;transition:color 120ms ease-out;
}
.sigil:hover .sigil__suffix{color:var(--signal)}

/* ============================================================
   3. FRONT MATTER
   ============================================================ */
.doc-head{padding-block:clamp(44px,7vh,84px) clamp(36px,5vh,56px)}
.doc-head__kicker{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:14px;margin-bottom:26px;
  border-bottom:1px solid var(--rule);
  max-width:none;
}
.doc-head h1{max-width:none}
.doc-head--page h1{font-size:clamp(2.1rem,1.4rem + 3vw,3.6rem)}

.doc-abstract{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:0 20px;align-items:baseline;
  margin-top:30px;
}
.doc-abstract__label{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);
  max-width:none;
}
.doc-abstract__text{font-size:1.0625rem;color:var(--ink-1);max-width:62ch}
@media (max-width:640px){
  .doc-abstract{grid-template-columns:minmax(0,1fr);gap:8px}
}

.hairline{border:none;border-top:1px solid var(--rule);margin:32px 0 0}

/* ---------- mono link row (demoted CTAs) ---------- */
.linkrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-top:30px;max-width:none;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.08em;text-transform:uppercase;
}
.linkrow__sep{color:var(--rule-strong);user-select:none}
.linkrow a:not(.action){color:var(--ink-0)}
.linkrow a:not(.action):hover{color:var(--signal)}
.clause--inverse .linkrow a:not(.action){color:var(--ink-inv-0)}

/* ---------- the one remaining button ---------- */
.action{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;
  background:var(--ink-0);color:var(--field);
  border:1px solid var(--ink-0);cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.09em;text-transform:uppercase;line-height:1;
  transition:background-color 140ms ease-out,border-color 140ms ease-out,color 140ms ease-out;
}
.action:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.clause--inverse .action{background:var(--signal);border-color:var(--signal);color:#fff}
.clause--inverse .action:hover{background:var(--signal-deep);border-color:var(--signal-deep)}
@media (max-width:400px){
  .action{white-space:normal;height:auto;min-height:44px;padding:12px 16px;line-height:1.4;text-align:center}
}

/* ============================================================
   4. CLAUSES — numbered sections
   ============================================================ */
.clause{
  position:relative;
  padding-block:var(--clause-pad);
  border-top:1px solid var(--rule);
}
.clause__index{
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.1em;color:var(--signal);
  margin-bottom:10px;max-width:none;
}
.clause__title{max-width:24ch}
.clause__lede{margin-top:18px;color:var(--ink-1);max-width:62ch;font-size:1rem}
.clause__body{margin-top:clamp(28px,4vh,44px)}

@media (min-width:1240px){
  .clause__index{position:absolute;left:12px;top:var(--clause-pad);width:var(--gutter-num);margin:0}
}

/* ---------- inverse clause (dark, full-bleed inside the sheet) ---------- */
.clause--inverse{
  background-color:var(--field-deep);
  color:var(--ink-inv-0);
  border-top-color:var(--rule-inv);
}
.clause--inverse h2,.clause--inverse h3{color:var(--ink-inv-0)}
.clause--inverse p{color:var(--ink-inv-1)}
.clause--inverse .clause__index{color:#5B9DFF}
.clause--inverse .clause__lede{color:var(--ink-inv-1)}

.clause--media{
  background-image:
    linear-gradient(90deg,
      rgba(14,17,22,0.97) 0%,
      rgba(14,17,22,0.95) 34%,
      rgba(14,17,22,0.91) 60%,
      rgba(14,17,22,0.87) 100%),
    url("img/hero-signal-resolve.webp");
  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;
}
@media (max-width:900px){
  .clause--media{
    background-image:
      linear-gradient(180deg,rgba(14,17,22,0.94) 0%,rgba(14,17,22,0.90) 100%),
      url("img/hero-signal-resolve.webp");
    background-position:center;
  }
}

/* ============================================================
   5. SPEC TABLE — the dominant repeating component
   ============================================================ */
.spec-table{border-top:1px solid var(--rule-strong)}
.spec-row{
  display:grid;
  grid-template-columns:minmax(180px,240px) minmax(0,1fr) auto;
  gap:6px 20px;align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--rule);
}
.spec-key{
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);
}
.spec-val{font-size:0.9375rem;color:var(--ink-0);max-width:62ch}
.spec-val a{text-decoration:underline;text-underline-offset:2px}
.spec-note{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;text-align:right;
}
.spec-table--pair .spec-row{grid-template-columns:minmax(170px,230px) minmax(0,1fr)}
.spec-table--step .spec-row{grid-template-columns:46px minmax(120px,150px) minmax(0,1fr)}
.spec-table--step .spec-key{color:var(--signal)}
.spec-table--step .spec-val:first-of-type{font-weight:600}
.spec-table--offset{margin-top:clamp(32px,5vh,48px)}

.spec-table--inverse{border-top-color:var(--rule-inv)}
.spec-table--inverse .spec-row{
  border-bottom-color:var(--rule-inv);
  grid-template-columns:minmax(0,1fr) auto;
  padding:18px 0;align-items:center;
}
.spec-table--inverse .spec-key{
  color:var(--ink-inv-2);letter-spacing:0.08em;
  font-size:var(--t-mono);line-height:1.7;max-width:56ch;
}
.spec-table--inverse .spec-val{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
  color:var(--ink-inv-0);text-align:right;line-height:1.1;
}
.spec-table--inverse .spec-val .signal-ink{color:#5B9DFF}

.spec-foot{
  margin-top:26px;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.04em;color:var(--ink-2);max-width:70ch;
}
.clause--inverse .spec-foot{color:var(--ink-inv-2)}

@media (max-width:700px){
  .spec-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:14px 0}
  .spec-note{text-align:left;white-space:normal}
  .spec-table--pair .spec-row,
  .spec-table--step .spec-row{grid-template-columns:minmax(0,1fr)}
  .spec-table--inverse .spec-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .spec-table--inverse .spec-val{text-align:left}
  .linkrow{gap:16px}
  .linkrow__sep{display:none}
}

/* ============================================================
   6. SPEC ENTRIES — capability records
   ============================================================ */
.spec-entry{padding-block:34px;border-top:1px solid var(--rule)}
.spec-entry:first-child{border-top:1px solid var(--rule-strong)}
.spec-entry:last-child{border-bottom:1px solid var(--rule)}
.spec-entry__id{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.11em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:12px;margin-bottom:16px;
  border-bottom:1px solid var(--rule);max-width:none;
}
.spec-entry h3{margin-bottom:12px}
.spec-entry__text{font-size:0.9375rem;color:var(--ink-1);max-width:64ch}
.spec-entry .spec-table{margin-top:20px}
.spec-entry__link{
  display:inline-block;margin-top:20px;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-0);
}
.spec-entry__link:hover{color:var(--signal)}
.spec-entry__id--standalone{
  padding-bottom:12px;margin:clamp(36px,5vh,52px) 0 16px;
  border-bottom:1px solid var(--rule);
}

/* ============================================================
   7. PLATES — framed figures
   ============================================================ */
.plate{margin:0;padding-block:0}
.plate + .plate,.plate--gap{margin-top:clamp(32px,5vh,52px)}
.plate__caption{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.11em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:10px;margin-bottom:0;
  border-bottom:1px solid var(--rule-strong);max-width:none;
}
.plate__frame{
  border:1px solid var(--rule);border-top:none;
  background:var(--field-raised);
  padding:clamp(16px,2.5vw,28px);
}
.plate__frame svg{width:100%;height:auto}
.plate__frame img{display:block;width:100%;height:auto}
.plate__note{
  margin-top:8px;
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);
  max-width:none;
}
.plate--raster .plate__frame{padding:clamp(8px,1.2vw,14px)}
.plate--wide{width:min(1080px,calc(100vw - var(--rail-w) - 110px))}
.plate--wide .plate__frame{overflow-x:auto}
.plate--wide .plate__frame svg{min-width:620px}
@media (max-width:1000px){
  .plate--wide{width:100%}
}
.clause--inverse .plate__caption,
.clause--inverse .plate__note{color:var(--ink-inv-2)}

.trace--live{stroke:var(--signal)}
@media (prefers-reduced-motion:no-preference){
  .trace--flow{stroke-dasharray:6 6;animation:traceflow 4s linear infinite}
  @keyframes traceflow{to{stroke-dashoffset:-48}}
}

/* ============================================================
   8. MATRIX — real data tables
   ============================================================ */
.matrix__caption{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.11em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:12px;max-width:none;
}
.matrix{width:100%;border-collapse:collapse}
.matrix th{
  font-family:var(--mono);font-weight:500;font-size:var(--t-mono-sm);
  letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-2);
  text-align:left;padding:10px 16px 10px 0;
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
}
.matrix td{
  font-size:0.875rem;color:var(--ink-1);padding:13px 16px 13px 0;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.matrix td:first-child{color:var(--ink-0)}
.matrix td:last-child,.matrix th:last-child{padding-right:0}
.matrix__yes{color:var(--pass);font-family:var(--mono);font-size:0.8125rem;white-space:nowrap}
.matrix__num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.matrix-scroll{overflow-x:auto}
@media (max-width:760px){
  .matrix-scroll .matrix{min-width:600px}
}

/* ============================================================
   9. CALLOUT
   ============================================================ */
.callout{
  border:1px solid var(--rule);border-left:2px solid var(--signal);
  background:var(--field-raised);
  padding:20px 24px;margin-top:24px;max-width:68ch;
}
.callout__label{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.11em;text-transform:uppercase;color:var(--signal);
  display:block;margin-bottom:10px;max-width:none;
}
.callout p{font-size:0.9375rem;color:var(--ink-1)}

/* ============================================================
   10. CHARTER — quotation band
   ============================================================ */
.charter{
  border-top:1px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
  padding-block:clamp(40px,6vh,64px);
  margin:clamp(40px,6vh,64px) 0 0;
}
.charter blockquote p{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,1.95rem);
  letter-spacing:-0.015em;line-height:1.3;color:var(--ink-0);max-width:32ch;
}
.charter__cite{
  margin-top:22px;font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-2);max-width:none;
}

/* ============================================================
   11. QUERIES — disclosure list
   ============================================================ */
.queries{border-top:1px solid var(--rule-strong)}
.query{border-bottom:1px solid var(--rule)}
.query__summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:baseline;gap:0 8px;
  padding:18px 0;
  font-weight:500;font-size:1rem;color:var(--ink-0);
}
.query__summary::-webkit-details-marker{display:none}
.query__id{font-family:var(--mono);font-size:var(--t-mono);color:var(--ink-2)}
.query__glyph{font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2);text-align:right}
.query__glyph::before{content:"[+]"}
.query[open] .query__glyph::before{content:"[\2212]"}
.query[open] .query__summary{color:var(--signal-deep)}
.query__body{padding:0 34px 22px;color:var(--ink-1);font-size:0.9375rem;max-width:70ch}
.query__body p + p{margin-top:12px}
.query__body a{text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   12. PROSE BLOCK
   ============================================================ */
.prose{max-width:66ch}
.prose p{color:var(--ink-1);font-size:0.9375rem}
.prose p + p{margin-top:16px}

/* ============================================================
   13. LEGAL DOCUMENTS
   ============================================================ */
.legal-sheet{
  border-top:1px solid var(--rule);
  padding-block:clamp(36px,5vh,56px) clamp(56px,8vh,88px);
}
.legal-frame{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}
.legal-frame > *{min-width:0}
.legal-index{
  position:sticky;top:24px;
  border-top:1px solid var(--rule-strong);
  padding-top:14px;
  max-height:calc(100vh - 48px);overflow-y:auto;
}
.legal-index__title{
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.11em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:10px;max-width:none;
}
.legal-index ol{list-style:none}
.legal-index li{border-bottom:1px solid var(--rule)}
.legal-index a{
  display:grid;grid-template-columns:30px minmax(0,1fr);
  gap:6px;padding:7px 0;font-size:0.8125rem;line-height:1.4;color:var(--ink-1);
}
.legal-index a:hover{color:var(--signal-deep)}
.legal-index__num{font-family:var(--mono);font-size:var(--t-mono-sm);color:var(--ink-2)}

.legal-clauses{max-width:760px}
.legal-meta{
  font-family:var(--mono);font-size:var(--t-mono-sm);letter-spacing:0.09em;
  text-transform:uppercase;color:var(--ink-2);margin-top:18px;max-width:none;line-height:1.9;
}
.legal-clauses section{padding-top:40px}
.legal-clauses section h2{
  font-size:1.3rem;letter-spacing:-0.01em;
  padding-bottom:12px;border-bottom:1px solid var(--rule-strong);margin-bottom:20px;
}
.legal-clauses section h2 .sec-num{
  font-family:var(--mono);font-weight:500;font-size:0.75em;
  color:var(--signal);margin-right:12px;
}
.legal-clauses h3{font-size:1rem;margin:24px 0 10px}
.legal-clauses p{font-size:0.9375rem;color:var(--ink-1);margin-bottom:14px}
.legal-clauses ul,.legal-clauses ol{margin:0 0 14px 22px;font-size:0.9375rem;color:var(--ink-1)}
.legal-clauses li{margin-bottom:8px;max-width:62ch}
.legal-clauses li::marker{color:var(--ink-2)}
.legal-clauses strong{color:var(--ink-0)}
.legal-clauses a{text-decoration:underline;text-underline-offset:2px}
.legal-clauses .matrix td:first-child{color:var(--ink-1)}
.legal-clauses .matrix td strong{font-weight:500}
.backtop{margin-top:48px}
.backtop a{
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:0.09em;
  text-transform:uppercase;color:var(--ink-2);
}
.backtop a:hover{color:var(--signal-deep)}

@media (max-width:900px){
  .legal-frame{grid-template-columns:minmax(0,1fr)}
  .legal-index{position:static;max-height:none;overflow-y:visible}
}

/* ============================================================
   14. COLOPHON — footer
   ============================================================ */
.colophon{
  background:var(--field-deep);color:var(--ink-inv-0);
  padding-top:clamp(56px,7vh,88px);
  border-top:1px solid var(--rule-inv);
}
.colophon__masthead{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
  padding-bottom:44px;border-bottom:1px solid var(--rule-inv);
}
.colophon__brand{max-width:340px}
.colophon__brand .sigil{color:var(--ink-inv-0)}
.colophon__brand .sigil__type{color:var(--ink-inv-0)}
.colophon__desc{margin-top:16px;font-size:0.875rem;color:var(--ink-inv-2)}
.colophon__plaque{
  margin-top:20px;font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-inv-2);max-width:none;
}
.colophon__index{display:grid;grid-template-columns:repeat(4,minmax(112px,1fr));gap:28px}
.colophon__index h2{
  font-family:var(--mono);font-weight:500;font-size:var(--t-mono-sm);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-inv-2);margin-bottom:14px;
}
.colophon__index ul{list-style:none}
.colophon__index li{margin-bottom:9px}
.colophon__index a{font-size:0.875rem;color:var(--ink-inv-2);transition:color 120ms ease-out}
.colophon__index a:hover{color:#fff}
.colophon__disclosure{
  padding-block:26px;font-size:0.8125rem;color:var(--ink-inv-2);
  display:flex;flex-direction:column;gap:8px;
}
.colophon__disclosure p{max-width:none;color:var(--ink-inv-2)}
.colophon__disclosure a{color:var(--ink-inv-2);text-decoration:underline;text-underline-offset:2px}
.colophon__disclosure a:hover{color:#fff}
.colophon__foot{
  border-top:1px solid var(--rule-inv);padding-block:20px 28px;
  display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between;
}
.colophon__links{display:flex;flex-wrap:wrap;gap:20px;list-style:none}
.colophon__links a{font-size:0.8125rem;color:var(--ink-inv-2)}
.colophon__links a:hover{color:#fff}
.colophon__status{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--t-mono-sm);
  letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-inv-2);
}
.colophon__status::before{content:"";width:6px;height:6px;background:var(--pass);flex:none}

@media (max-width:900px){
  .colophon__index{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .colophon__index{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   15. MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}