/* Legal / Terms design, ported from the standalone terms page into shared CSS.
   Used by build_legal.py for all /terms/ pages. Self-contained (own tokens),
   matching the octetproof.com legal look. */

@font-face {
  font-family: 'ABC Daily Slab Mono';
  src: url('/fonts/ABCDailySlabMono-Regular.woff2') format('woff2'), url('/fonts/ABCDailySlabMono-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
:root{
  --paper:#f5f1ea;
  --paper-ink:#0d0d0c;
  --paper-rule:rgba(13,13,12,.08);
  --paper-rule-strong:rgba(13,13,12,.20);
  --ink-muted:#5b574e;
  --stage:#0a0a0a;

  --surface:linear-gradient(90deg,#645139 0%,#5ca6cd 100%);
  --sunset: linear-gradient(90deg,#e44d43 0%,#f9cf80 100%);
  --forest: linear-gradient(90deg,#a0b80a 0%,#4e5d02 100%);
  --forest-v:linear-gradient(180deg,#a0b80a 0%,#4e5d02 100%);

  --display:"ABC Daily Slab Mono","IBM Plex Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --body:"Stack Sans Text","IBM Plex Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0 0 0 44px;background:var(--paper);color:var(--paper-ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased}

/* agent peek — machine-readable surface visible from the left edge */
.agent-peek{
  position:fixed;top:0;left:0;bottom:0;width:44px;
  background:#0a0a0a;color:#d8d3c8;z-index:50;
  display:flex;flex-direction:column;align-items:center;padding:18px 0;
  border-right:1px solid rgba(160,184,10,.28);
  font-family:var(--mono);text-decoration:none;
  transition:width .2s ease;overflow:hidden;
}
.agent-peek:hover{width:88px}
.agent-peek .icon svg{display:block;width:18px;height:18px;fill:#fff}
.agent-peek .label{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#6f6a60;margin-top:24px;
}
.agent-peek:hover .label{color:#a0b80a}
.agent-peek .stamp{
  margin-top:auto;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#3f3a32;
  writing-mode:vertical-rl;text-orientation:mixed;
}

/* chronograph band — sticky at the top, black stage (R07 — streams on
   black). Mix-blend-mode:screen brightens where bars overlap (R02). Rows
   compress toward midline on scroll: many streams → one signed trajectory. */



@media (prefers-reduced-motion: reduce){
  
  
}

/* masthead */
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 44px;
  border-bottom:1px solid var(--paper-rule);
  gap:32px;
}
.masthead .brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.masthead .brand svg{display:block;height:22px;width:auto}
.masthead nav{display:flex;gap:22px;align-items:center}
.masthead nav a{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:#0d0d0c;
  padding-bottom:2px;border-bottom:1px solid transparent;
  white-space:nowrap;line-height:1;
}
.masthead nav a.active{border-bottom-color:#0d0d0c}
.masthead nav a:hover{border-bottom-color:#0d0d0c}
@media (max-width:1180px){
  .masthead nav{gap:16px}
  .masthead nav a{font-size:9.5px;letter-spacing:.14em}
}
@media (max-width:980px){ .masthead nav{gap:12px} }

.page{max-width:1180px;margin:0 auto;padding:0 44px}

/* hero */
.hero{padding:112px 0 56px;border-bottom:1px solid var(--paper-rule)}
.hero .eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:36px;
  display:flex;align-items:center;gap:14px;
}
.hero .eyebrow::before{content:"";display:inline-block;width:44px;height:2px;background:var(--sunset)}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(44px,6.4vw,92px);
  line-height:1;letter-spacing:-.032em;
  margin:0 0 28px;max-width:18ch;
}
.hero .sub{
  font-family:var(--body);font-size:18px;line-height:1.62;max-width:60ch;
  color:#1d1d1b;font-weight:400;margin:0 0 28px;
}
.hero .meta{
  display:flex;flex-wrap:wrap;gap:32px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-muted);
}
.hero .meta .v{color:#0d0d0c}

/* body layout: TOC + sections */
.body-grid{display:grid;grid-template-columns:240px 1fr;gap:64px;padding:64px 0 32px}
.toc{
  position:sticky;top:32px;align-self:start;
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
}
.toc a{
  text-decoration:none;color:var(--ink-muted);
  display:flex;align-items:baseline;gap:12px;
  padding:6px 0;
  transition:color .15s;
}
.toc a .n{font-size:9.5px;letter-spacing:.22em;color:rgba(13,13,12,.35);min-width:24px}
.toc a:hover,.toc a.active{color:#0d0d0c}
.toc a:hover .n,.toc a.active .n{color:#0d0d0c}

.sections{display:flex;flex-direction:column;gap:64px}
.clause{}
.clause .num{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:14px;
}
.clause h2{
  font-family:var(--display);font-weight:400;
  font-size:28px;line-height:1.12;letter-spacing:-.02em;
  margin:0 0 24px;color:#0d0d0c;max-width:24ch;
}
.clause .summary{
  font-family:var(--body);font-size:15.5px;line-height:1.72;
  color:#1d1d1b;margin:0 0 24px;max-width:62ch;
}
.clause .summary strong{color:#0d0d0c;font-weight:500}
.clause .terms{
  font-family:var(--mono);font-size:12px;line-height:1.72;
  color:var(--ink-muted);background:rgba(13,13,12,.03);
  padding:18px 20px;border-left:2px solid var(--paper-rule-strong);
  max-width:62ch;
}
.clause .terms p{margin:0 0 10px}
.clause .terms p:last-child{margin-bottom:0}
.clause .terms .label{
  display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(13,13,12,.55);margin-bottom:10px;
}

.all-caps{
  font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.04em;
  color:#0d0d0c;text-transform:uppercase;
  background:rgba(13,13,12,.04);padding:18px 20px;
  border-left:2px solid #0d0d0c;
  max-width:62ch;margin:0 0 24px;
}

/* accept stage — black footer-like band */
.accept{
  background:var(--stage);color:#d8d3c8;
  margin:64px 0 0;padding:96px 0;
  border-top:4px solid;border-image:var(--forest-v) 1;
}
.accept-inner{max-width:880px;margin:0 auto;padding:0 44px}
.accept .label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#6f6a60;margin-bottom:22px;
}
.accept h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.4vw,52px);line-height:1.05;letter-spacing:-.024em;
  color:#fff;margin:0 0 18px;max-width:22ch;
}
.accept p{
  font-family:var(--body);font-size:16px;line-height:1.7;color:#d8d3c8;
  max-width:54ch;margin:0 0 28px;
}
.accept .stamp{
  display:flex;flex-wrap:wrap;gap:32px;margin-top:36px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.10);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#6f6a60;
}
.accept .stamp .v{color:#fff}
.accept-cta{margin:24px 0 4px}
.accept-cta a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#0a0a0a;background:#fff;padding:14px 20px;text-decoration:none;display:inline-block;
}

/* footer */
.footer{padding:64px 0 96px;border-top:1px solid var(--paper-rule)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:48px}
.footer-grid .col-title{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);
  margin-bottom:14px;
}
.footer-grid p{font-size:15px;line-height:1.7;color:#1d1d1b;margin:0 0 8px;max-width:46ch}
.footer-sig{
  display:flex;align-items:center;gap:14px;margin-top:48px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);
}
.footer-sig .bar{display:inline-block;width:88px;height:6px;background:var(--forest)}

@media (max-width:880px){
  .page{padding:0 24px}
  .body-grid{grid-template-columns:1fr;gap:32px}
  .toc{position:relative;top:auto;flex-direction:row;flex-wrap:wrap;gap:14px}
  .toc a{padding:0}
  .accept-inner{padding:0 24px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
}

/* Phone — hide agent peek, full-width content, horizontally scrollable
   TOC becomes a chip-row at the top of each scroll position. */
@media (max-width:768px){
  body{padding-left:0}
  .agent-peek{display:none}
  
  .masthead{
    flex-direction:column;align-items:flex-start;gap:10px;
    padding:14px 18px 10px;
  }
  .masthead .brand svg{height:18px}
  .masthead nav{
    width:100%;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    gap:14px;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .masthead nav::-webkit-scrollbar{display:none}
  .masthead nav a{font-size:9.5px;letter-spacing:.14em}

  .page{padding:0 18px;max-width:none}
  .hero{padding:48px 0 32px}
  .hero h1{font-size:clamp(30px,8.5vw,38px);max-width:none}
  .hero .sub{font-size:16px;max-width:none}
  .hero .meta{gap:18px;font-size:9.5px;letter-spacing:.14em}

  .body-grid{padding:32px 0 16px;gap:24px}
  .toc{
    flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    gap:18px;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .toc::-webkit-scrollbar{display:none}
  .toc a{flex-shrink:0;white-space:nowrap}

  .sections{gap:48px}
  .clause h2{font-size:22px;max-width:none}
  .clause .summary{font-size:15px;max-width:none}
  .clause .terms{font-size:11.5px;padding:14px 16px;max-width:none}
  .all-caps{font-size:10px;padding:14px 16px;max-width:none}

  .accept{padding:64px 0;margin-top:48px}
  .accept-inner{padding:0 18px}
  .accept h2{font-size:clamp(26px,7.5vw,34px);max-width:none}
  .accept p{font-size:15px;max-width:none}
  .accept .stamp{gap:16px;font-size:9.5px;letter-spacing:.14em}

  .footer{padding:48px 0 56px}
  .footer-grid{margin-top:32px;gap:28px}
  .footer-grid p{font-size:14px;max-width:none}
}

@media (max-width:380px){
  .page{padding:0 14px}
  .accept-inner{padding:0 14px}
  .masthead{padding:12px 14px 8px}
}

/* v9 chronograph band — shared engine (octet-visual.js), title-seeded */
.chrono{position:sticky;top:0;z-index:6;height:120px;background:#0a0a0a;overflow:hidden;border-bottom:1px solid #000;will-change:height}
.chrono canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.chrono .row-labels{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;padding:8px 14px;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(216,211,200,.5);pointer-events:none;z-index:2;transition:opacity 200ms linear;mix-blend-mode:difference}
.chrono .row-labels span{line-height:1}
@media (max-width:768px){.chrono{height:84px}.chrono .row-labels{padding:6px 10px;font-size:7.5px;letter-spacing:.14em}.chrono .row-labels span{display:none}.chrono .row-labels span:first-child,.chrono .row-labels span:last-child{display:inline}}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:36px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.foot-nav a{color:#5b574e;text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.foot-nav a:hover{color:#0d0d0c;border-bottom-color:#0d0d0c}
.foot-nav a.active{color:#0d0d0c;border-bottom-color:#0d0d0c}

/* grouped footer columns (Kontext-style) */
.foot-cols{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:34px 40px;align-items:start;margin-top:72px;padding-top:44px;border-top:1px solid var(--paper-rule)}
.foot-cols .fc-brand{display:flex;flex-direction:column;align-items:flex-start}
.foot-cols .fc-brand svg{height:24px;width:auto;display:block;margin-bottom:20px;order:0}
.foot-cols .fc-tag{order:1;font-family:var(--body);font-size:13px;line-height:1.5;color:#5b574e;margin:0 0 16px;max-width:22ch}
.foot-cols .fc-copy{order:2;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#6f6a60;margin:0;max-width:26ch}
.foot-cols .fc-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#111;margin:0 0 18px}
.foot-cols .fc-col a{display:block;font-family:var(--body);font-size:13px;line-height:1.3;color:#5b574e;text-decoration:none;padding:7px 0}
.foot-cols .fc-col a:hover{color:#111}
@media (max-width:880px){.foot-cols{grid-template-columns:1fr 1fr;gap:36px 28px;margin-top:48px;padding-top:32px}}

.legal-col{min-width:0}
.preamble{font-family:var(--body);font-size:15.5px;line-height:1.72;color:#1d1d1b;max-width:64ch;margin:0 0 8px;padding-bottom:32px;border-bottom:1px solid var(--paper-rule)}
.clause .body{font-family:var(--body);font-size:15.5px;line-height:1.72;color:#1d1d1b;max-width:64ch}
.clause .body p{margin:0 0 16px}
.clause .body p:last-child{margin-bottom:0}
.clause .num .sub{font-size:18px;letter-spacing:0;color:rgba(13,13,12,.32);margin-left:2px}
.sub-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);margin:24px 0 10px}
.reserved-note{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9a3b2e;border:1px solid rgba(154,59,46,.3);background:rgba(154,59,46,.05);padding:6px 10px;display:inline-block;margin:0 0 16px}

/* ── build_legal additions: version selector + metadata (top of .toc) + banner ── */
.toc-version { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid rgba(13,13,12,.10); }
.toc-version-label { display:block; font-family:var(--mono, monospace); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#8a8478; margin:0 0 6px; }
.toc-version-select { width:100%; font-family:var(--mono, monospace); font-size:12px; color:#111; background:#fff; border:1px solid rgba(13,13,12,.18); border-radius:6px; padding:7px 10px; cursor:pointer; }
.toc-version-select:hover { border-color:rgba(13,13,12,.35); }
.toc-meta { font-family:var(--mono, monospace); font-size:10px; color:#6b665c; margin:8px 0 4px; display:flex; flex-wrap:wrap; gap:2px 12px; }
.toc-sha { font-family:var(--mono, monospace); font-size:9px; color:#a8a294; word-break:break-all; line-height:1.3; }
.legal-banner { font-family:var(--body, sans-serif); font-size:13px; line-height:1.45; color:#5a4a00; background:rgba(160,184,10,.10); border:1px solid rgba(160,184,10,.35); border-radius:6px; padding:10px 14px; margin:0 0 22px; }
.legal-banner a { color:#111; font-weight:500; }