/* ============================================================
   Benzibot — legal pages
   Shared stylesheet. Matches the main site's design system.
   Brand colors live in :root; change once, both pages update.
   ============================================================ */
:root{
  --navy:        #0A1A2F;
  --navy-deep:   #06111E;
  --navy-soft:   #122740;
  --brass:       #C9A24B;
  --brass-light: #E2C57F;
  --cream:       #F7F5F0;
  --cream-edge:  #EAE5D9;
  --ink:         #16202B;
  --ink-soft:    #5C6672;

  --font-display:"Fraunces", Georgia, serif;
  --font-body:   "Inter", system-ui, sans-serif;
  --maxw: 820px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
section[id], div[id]{ scroll-margin-top:80px; }

body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(6,17,30,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,162,75,.14);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:70px; width:100%; max-width:1140px; margin:0 auto;
  padding:0 clamp(20px,5vw,40px);
}
.brand{ display:inline-block; line-height:0; text-decoration:none; }
.brand img{ height:32px; width:auto; }
.nav-back{
  font-size:14px; color:#C2CCD8; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:color .15s ease;
}
.nav-back:hover{ color:var(--cream); }
.nav-back svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
@media (max-width:520px){ .brand img{ height:26px; } }

/* ---------- masthead ---------- */
.masthead{
  background:radial-gradient(120% 100% at 50% 0%, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color:var(--cream);
  padding:clamp(44px,7vw,74px) 0 clamp(40px,6vw,62px);
  border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass-light) 50%, var(--brass) 70%, transparent) 1;
}
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass); font-weight:600;
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass); opacity:.55; }
.masthead h1{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(30px,5.5vw,46px); line-height:1.08; margin-bottom:14px;
}
.masthead .dates{ font-size:13.5px; color:#93A1B2; }
.masthead .dates b{ color:#C2CCD8; font-weight:500; }

/* ---------- draft banner ---------- */
.draft{
  background:#FFF6E0; border:1px solid var(--brass);
  border-radius:10px; padding:16px 18px; margin:clamp(28px,4vw,40px) 0 0;
  font-size:13.5px; color:var(--ink);
}
.draft b{ color:#8A6D2F; }

/* ---------- document body ---------- */
.doc{ padding:clamp(34px,5vw,52px) 0 clamp(60px,8vw,96px); }
.doc .lede{
  font-size:17px; color:var(--ink-soft);
  padding-bottom:26px; margin-bottom:8px;
  border-bottom:1px solid var(--cream-edge);
}

/* table of contents */
.toc{
  background:#fff; border:1px solid var(--cream-edge); border-radius:12px;
  padding:22px 24px; margin:0 0 clamp(30px,4vw,42px);
}
.toc h2{
  font-family:var(--font-body); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-bottom:14px;
}
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; column-count:2; column-gap:34px; }
.toc li{ counter-increment:toc; font-size:14px; margin-bottom:9px; break-inside:avoid; }
.toc li::before{ content:counter(toc) "."; color:var(--brass); font-weight:600; margin-right:8px; }
.toc a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s ease; }
.toc a:hover{ border-color:var(--brass); }
@media (max-width:640px){ .toc ol{ column-count:1; } }

/* sections */
section.s{ margin-bottom:clamp(30px,4vw,42px); scroll-margin-top:96px; }
section.s h2{
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(21px,3vw,27px); color:var(--ink); line-height:1.2;
  margin-bottom:14px; padding-top:6px;
}
section.s h2 .num{ color:var(--brass); font-size:.72em; margin-right:10px; }
section.s h3{
  font-family:var(--font-body); font-weight:600; font-size:15.5px;
  color:var(--ink); margin:22px 0 8px;
}
section.s p{ font-size:15.5px; color:var(--ink-soft); margin-bottom:14px; }
section.s p b, section.s li b{ color:var(--ink); font-weight:600; }
section.s ul{ margin:0 0 16px; padding:0; list-style:none; }
section.s li{
  position:relative; padding-left:24px; font-size:15.5px;
  color:var(--ink-soft); margin-bottom:10px;
}
section.s li::before{
  content:""; position:absolute; left:0; top:10px;
  width:7px; height:7px; border-radius:50%; background:var(--brass);
}
section.s a{ color:#8A6D2F; text-decoration:underline; text-underline-offset:2px; }

/* callout for important legal points */
.note{
  background:#fff; border-left:3px solid var(--brass);
  border-radius:0 10px 10px 0; padding:16px 20px; margin:0 0 16px;
}
.note p{ margin:0; font-size:15px; }

/* fill-in placeholders */
.fill{
  background:#FFF0C4; border-bottom:1px dashed #B08A2E;
  padding:1px 5px; border-radius:3px; font-weight:600; color:#6B5316;
  font-size:.94em; white-space:nowrap;
}

/* contact block */
.contact-card{
  background:#fff; border:1px solid var(--cream-edge);
  border-radius:12px; padding:22px 24px; margin-top:6px;
}
.contact-card p{ margin-bottom:6px; }
.contact-card a{ color:#8A6D2F; }

/* ---------- footer ---------- */
footer{
  background:var(--navy-deep); color:#abb8c7;
  border-top:1px solid rgba(201,162,75,.12);
  padding:44px 0 32px;
}
.foot-inner{ width:100%; max-width:1140px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; margin-bottom:22px; }
.foot-links a{ font-size:14px; color:#abb8c7; text-decoration:none; transition:color .15s ease; }
.foot-links a:hover{ color:var(--cream); }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.07); padding-top:20px;
  font-size:12.5px; color:#7e8a99;
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } }
