/* ===== BB LEGAL SHELL — fable-hard design system ===== */
@font-face{font-family:"Maison Mono";src:url("/static/bb-fable-hard/maison-mono.ttf") format("truetype");font-display:swap}
:root{
  --bg:#060606; --ink:#e8e6e0; --dim:#8a8a86; --green:#7dc795;
  --line:rgba(232,230,224,.14); --hair:rgba(232,230,224,.09);
  --body:#b9b7b1;
  --term:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Maison Mono",ui-monospace,monospace;
  font-size:15px;line-height:1.8;-webkit-font-smoothing:antialiased;
}
/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

a{color:var(--ink)}
::selection{background:rgba(125,199,149,.28)}

/* ===== top nav ===== */
.legal-top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(24px,4vw,64px);border-bottom:1px solid var(--hair);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.legal-top .brand{display:flex;align-items:baseline;gap:2px;text-decoration:none;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.legal-top .brand .r{color:var(--green);font-size:9px}
.legal-top nav{display:flex;gap:26px;align-items:center}
.legal-top nav a{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .25s}
.legal-top nav a:hover{color:var(--green)}
@media(max-width:700px){.legal-top nav a:not(.back){display:none}}

/* ===== doc header ===== */
.doc-head{max-width:1180px;margin:0 auto;padding:12vh clamp(24px,4vw,64px) 7vh}
.doc-head .tick{width:40px;height:1px;background:var(--green);margin-bottom:22px}
.doc-head .eyebrow{font-family:var(--term);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.doc-head .eyebrow b{color:var(--green);font-weight:500}
.doc-head h1{font-weight:400;text-transform:uppercase;letter-spacing:.04em;line-height:1.02;
  font-size:clamp(38px,6.4vw,88px)}
.doc-head h1 .ghost{color:transparent;-webkit-text-stroke:1px rgba(232,230,224,.42);display:block}
.doc-head .meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:30px;padding-top:18px;border-top:1px solid var(--hair);
  font-family:var(--term);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.doc-head .meta b{color:var(--green);font-weight:500}

/* ===== doc body ===== */
.doc{max-width:1180px;margin:0 auto;padding:0 clamp(24px,4vw,64px) 10vh;
  display:grid;grid-template-columns:250px 1fr;gap:56px;align-items:start}
@media(max-width:900px){.doc{grid-template-columns:1fr;gap:30px}}

/* index rail */
.doc-index{position:sticky;top:86px;border:1px solid var(--hair);padding:18px 0;font-family:var(--term)}
.doc-index .ih{padding:0 20px 12px;border-bottom:1px solid var(--hair);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.doc-index a{display:block;padding:9px 20px;font-size:10.5px;letter-spacing:.06em;color:var(--dim);
  text-decoration:none;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.doc-index a:hover{color:var(--ink)}
.doc-index a.on{color:var(--green);border-left-color:var(--green)}
@media(max-width:900px){.doc-index{position:static;display:none}}

/* article */
.doc-body{min-width:0;max-width:72ch}
.doc-body section{padding:34px 0;border-top:1px solid var(--hair)}
.doc-body section:first-child{border-top:0;padding-top:0}
.doc-body h2{font-weight:400;font-size:15px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin-bottom:18px;display:flex;gap:14px;align-items:baseline}
.doc-body h2 .no{font-family:var(--term);font-size:10px;color:var(--green);letter-spacing:.1em}
.doc-body p{font-size:13.5px;color:var(--body);margin-bottom:14px}
.doc-body p:last-child{margin-bottom:0}
.doc-body ul{list-style:none;margin:4px 0 14px}
.doc-body li{font-size:13.5px;color:var(--body);padding:7px 0 7px 22px;position:relative}
.doc-body li::before{content:"—";position:absolute;left:0;color:var(--green);font-size:11px}
.doc-body strong{color:var(--ink);font-weight:500}
.doc-body a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(125,199,149,.35)}
.doc-body a:hover{border-bottom-color:var(--green)}
.doc-body .callout{border:1px solid var(--line);padding:18px 22px;margin:8px 0 14px;
  font-family:var(--term);font-size:11.5px;line-height:1.9;color:var(--dim)}
.doc-body .callout b{color:var(--green);font-weight:500}

/* forms (do-not-sell) */
.doc-body form{display:flex;flex-direction:column;gap:20px;margin-top:10px}
.doc-body label{display:flex;flex-direction:column;gap:9px;
  font-family:var(--term);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.doc-body select,.doc-body input,.doc-body textarea{
  appearance:none;background:transparent;border:1px solid var(--line);border-radius:0;
  color:var(--ink);font-family:var(--term);font-size:13px;padding:13px 15px;letter-spacing:.02em}
.doc-body select:focus,.doc-body input:focus,.doc-body textarea:focus{outline:none;border-color:var(--green)}
.doc-body select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237dc795' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.doc-body select option{background:#0c0c0c;color:var(--ink)}
.doc-body textarea{min-height:120px;resize:vertical}
.doc-body form button{
  appearance:none;cursor:pointer;align-self:flex-start;
  font-family:var(--term);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--green);background:transparent;border:1px solid rgba(125,199,149,.55);padding:15px 32px;
  transition:background .25s,color .25s,box-shadow .25s}
.doc-body form button:hover{background:var(--green);color:#0a0f0b;box-shadow:0 0 26px rgba(125,199,149,.35)}

/* ===== footer ===== */
.legal-foot{border-top:1px solid var(--hair);padding:34px clamp(24px,4vw,64px);
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between;
  font-family:var(--term);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.legal-foot .links{display:flex;flex-wrap:wrap;gap:12px 22px}
.legal-foot a{color:var(--dim);text-decoration:none;transition:color .25s}
.legal-foot a:hover{color:var(--green)}
.legal-foot a.on{color:var(--green)}