/* ---------- fonts ---------- */
  @font-face{ font-family:'General Sans'; font-weight:600; font-style:normal; font-display:swap;
    src:url('../fonts/general-sans-600.woff2') format('woff2'); }
  @font-face{ font-family:'General Sans'; font-weight:700; font-style:normal; font-display:swap;
    src:url('../fonts/general-sans-700.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Sans'; font-weight:400 700; font-style:normal; font-display:swap;
    src:url('../fonts/plex-sans-variable.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-weight:400; font-style:normal; font-display:swap;
    src:url('../fonts/plex-mono-400.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-weight:500; font-style:normal; font-display:swap;
    src:url('../fonts/plex-mono-500.woff2') format('woff2'); }

  :root{
    --ink:        #0A0E15;
    --charcoal:   #111827;
    --charcoal-2: #171F30;
    --charcoal-3: #1E2739;
    --green:      #25D366;
    --green-deep: #128C4A;
    --warn:       #F5C065;
    --warn-bg:    rgba(240,169,59,.1);
    --text:       #F3F5F9;
    --mist:       #9AA4BC;
    --mist-dim:   #6F7A93;
    --line:       rgba(233,238,247,.10);
    --line-soft:  rgba(233,238,247,.06);
    --glass:      rgba(23,31,48,.66);
    --font-display:'General Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0; background:var(--ink); color:var(--text); font-family:var(--font-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a{ color:var(--green); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  ::selection{ background:var(--green); color:var(--ink); }

  .topbar{
    position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
    padding:16px 24px; border-bottom:1px solid var(--line);
    background:rgba(17,24,39,.75); backdrop-filter:blur(14px);
  }
  .topbar .mark{
    width:30px; height:30px; border-radius:9px; flex:none;
    background:linear-gradient(145deg, var(--charcoal-3), var(--charcoal-2));
    border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  }
  .topbar .wordmark{ font-family:var(--font-display); font-weight:700; font-size:.92rem; letter-spacing:.03em; }
  .topbar .wordmark b{ color:var(--green); }
  .topbar__spacer{ flex:1; }
  .back-link{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--mist); font-weight:500; }
  .back-link:hover{ color:var(--text); text-decoration:none; }
  .back-link svg{ width:14px; height:14px; }

  .doc{ max-width:760px; margin:0 auto; padding:48px 24px 90px; }
  .doc__eyebrow{
    font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em;
    color:var(--mist-dim); margin-bottom:10px;
  }
  .doc__title{ font-family:var(--font-display); font-weight:700; font-size:1.8rem; letter-spacing:-.01em; margin:0 0 8px; }
  .doc__meta{ font-family:var(--font-mono); font-size:.78rem; color:var(--mist-dim); margin-bottom:28px; }

  .pending-banner{
    display:flex; gap:11px; align-items:flex-start;
    background:var(--warn-bg); border:1px solid rgba(240,169,59,.28); border-radius:var(--radius-md);
    padding:14px 16px; margin-bottom:36px; font-size:.85rem; line-height:1.55; color:#F3E7CE;
  }
  .pending-banner svg{ width:18px; height:18px; flex:none; color:var(--warn); margin-top:1px; }
  .pending-banner b{ color:var(--warn); }

  .doc section{ margin-bottom:30px; }
  .doc h2{
    font-family:var(--font-display); font-weight:700; font-size:1.08rem;
    display:flex; align-items:baseline; gap:10px; margin:0 0 10px;
  }
  .doc h2 .num{ font-family:var(--font-mono); font-size:.8rem; color:var(--mist-dim); font-weight:500; }
  .doc p{ font-size:.9rem; line-height:1.7; color:var(--mist); margin:0 0 10px; max-width:65ch; }

  .placeholder{
    border:1px dashed var(--line); border-radius:var(--radius-sm);
    padding:12px 14px; font-size:.82rem; color:var(--mist-dim); font-style:italic;
    background:rgba(255,255,255,.02);
  }

  .doc__footer{
    margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
    font-size:.82rem; color:var(--mist-dim); line-height:1.7;
  }
  .doc__footer a{ font-weight:500; }

  @media (max-width:600px){
    .doc{ padding:32px 18px 70px; }
    .doc__title{ font-size:1.5rem; }
  }