/* BQX ONE — legal documents. Extends assets/site.css; never replaces it.
   Loaded after site.css so the wordmark, grain, footer and reduced-motion
   rules are inherited rather than duplicated. */

/* The masthead sits above the reading column, so the header stops floating. */
.site-header{position:sticky;height:74px;background:rgba(8,9,10,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.legal-nav{display:flex;gap:26px;font:12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#8f9694}
.legal-nav a{padding:12px 0;transition:color .3s}
.legal-nav a:hover,.legal-nav a[aria-current=page]{color:var(--fg)}

.legal-wrap{max-width:1280px;margin:0 auto}

/* 01 — Masthead. Display title, deck, then one mono line of record. */
.legal-masthead{padding:88px 0 0}
.legal-masthead h1{font-size:clamp(46px,6.2vw,92px);font-weight:400;line-height:1.02;letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
.legal-deck{margin-top:26px;max-width:56ch;font-size:clamp(17px,1.35vw,21px);line-height:1.55;letter-spacing:-.015em;color:#b9bebc}
.legal-meta{margin-top:44px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 44px;font:12px var(--mono);letter-spacing:.045em;color:#8f9694}
.legal-meta b{font-weight:400;color:#ccd1cf}

/* 02 — Two columns: a standing contents rail, and the document. */
.legal-body{display:grid;grid-template-columns:224px minmax(0,1fr);gap:0 84px;padding:56px 0 96px}
.legal-contents{position:sticky;top:112px;align-self:start;font:12px var(--mono);letter-spacing:.03em}
.legal-contents h2{font-size:12px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:#8f9694;padding-bottom:14px;border-bottom:1px solid var(--line)}
.legal-contents ol{list-style:none;margin:0;padding:14px 0 0;counter-reset:toc}
.legal-contents li{counter-increment:toc}
.legal-contents a{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:7px 0;color:#8f9694;transition:color .3s}
.legal-contents a::before{content:counter(toc,decimal-leading-zero);color:#5f6664;transition:color .3s}
.legal-contents a:hover,.legal-contents a.is-current{color:var(--fg)}
.legal-contents a.is-current::before{color:var(--fg)}

/* 03 — The clauses. The number lives in the gutter beside the heading,
   never stacked above it, and carries the hairline that marks the section. */
.legal-doc{counter-reset:clause;max-width:74ch}
.clause{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 24px;padding:44px 0;border-top:1px solid var(--line);counter-increment:clause;scroll-margin-top:104px}
.clause:first-child{border-top:0;padding-top:0}
.clause::before{content:counter(clause,decimal-leading-zero);font:12px var(--mono);letter-spacing:.05em;color:#6d7472;padding-top:.55em}
.clause h2{grid-column:2;font-size:clamp(25px,2.3vw,33px);font-weight:400;line-height:1.16;letter-spacing:-.028em;color:var(--fg)}
.clause>p,.clause>div,.clause>ol{grid-column:2}
.clause p,.clause li{font-size:17px;line-height:1.68;color:#b9bebc}
.clause p{margin-top:20px}
.clause h3{grid-column:2;margin-top:32px;font-size:15px;font-weight:400;letter-spacing:.02em;color:var(--fg)}
.clause h3+p{margin-top:10px}
.clause ul{grid-column:2;margin:16px 0 0;padding:0;list-style:none}
.clause ul li{position:relative;padding:9px 0 9px 26px;border-top:1px solid rgba(202,213,214,.09)}
.clause ul li:first-child{border-top:0}
.clause ul li::before{content:'';position:absolute;left:2px;top:1.32em;width:9px;height:1px;background:#6d7472}
.clause strong{font-weight:400;color:#e2e6e3}
.clause a:not(.legal-mail){border-bottom:1px solid rgba(233,238,237,.35)}
.clause a:not(.legal-mail):hover{border-bottom-color:var(--fg)}

/* 04 — A hairline register, for anything that is a set of pairs rather
   than a paragraph. Scrolls inside itself on narrow screens. */
.legal-table-wrap{grid-column:2;margin-top:24px;overflow-x:auto}
.legal-table{width:100%;min-width:440px;border-collapse:collapse;text-align:left}
.legal-table th{padding:0 20px 12px 0;border-bottom:1px solid var(--line);font:12px var(--mono);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:#8f9694;vertical-align:bottom}
.legal-table td{padding:16px 20px 16px 0;border-bottom:1px solid rgba(202,213,214,.09);font-size:15px;line-height:1.6;color:#b9bebc;vertical-align:top}
.legal-table td:first-child{color:#e2e6e3;width:32%}
.legal-table tr:last-child td{border-bottom:0}

/* 05 — Contact. The one place the page asks the reader to act. */
.legal-contact{margin-top:64px;padding:38px 0 0;border-top:1px solid var(--line)}
.legal-contact p{max-width:60ch;font-size:17px;line-height:1.68;color:#b9bebc}
.legal-mail{display:inline-flex;align-items:center;gap:26px;margin-top:26px;padding:12px 0;border-bottom:1px solid rgba(233,238,237,.5);font-size:clamp(19px,1.9vw,26px);letter-spacing:-.02em;transition:gap .4s var(--ease)}
.legal-mail:hover{gap:34px}
.legal-mail svg{width:20px;height:20px}

.legal-sibling{margin-top:22px;font:12px var(--mono);letter-spacing:.04em;color:#8f9694}
.legal-sibling a{color:#ccd1cf;border-bottom:1px solid rgba(202,213,214,.3)}
.legal-sibling a:hover{color:var(--fg)}

@media(max-width:1024px){
  .legal-body{grid-template-columns:1fr;gap:0;padding-top:40px}
  .legal-contents{position:static;padding-bottom:40px}
  .legal-contents ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .legal-doc{max-width:none}
}
@media(max-width:640px){
  .site-header{height:70px}
  .legal-nav{gap:18px;font-size:12px}
  .legal-masthead{padding-top:52px}
  .legal-masthead h1{font-size:clamp(36px,10vw,58px);letter-spacing:-.038em;max-width:none}
  .legal-deck{margin-top:20px;font-size:17px}
  .legal-meta{margin-top:32px;gap:10px 28px}
  .legal-contents ol{grid-template-columns:1fr}
  .clause{grid-template-columns:34px minmax(0,1fr);gap:0 14px;padding:34px 0}
  .clause h2{font-size:24px}
  .clause p,.clause li{font-size:16px}
  .legal-contact{margin-top:48px}
}