// Terms of Service CSS

   :root{
     --bg:#0b0f14;
     --panel:#111826;
     --panel2:#0f1623;
     --text:#e8eef7;
     --muted:#a9b7c9;
     --border:rgba(255,255,255,.08);
     --link:#8ab4ff;
     --accent:#7ee0b8;
     --danger:#ff6b6b;
     --shadow: 0 10px 30px rgba(0,0,0,.35);
     --radius: 14px;
     --max: 1080px;
     --sidebar: 290px;
     --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
   }
   *{box-sizing:border-box}
   html,body{height:100%}
   body{
     margin:0;
     font-family:var(--font);
     background:linear-gradient(180deg, #08101c 0%, var(--bg) 40%, #070b11 100%);
     color:var(--text);
     line-height:1.55;
   }
   a{color:var(--link); text-decoration:none}
   a:hover{text-decoration:underline}
   .wrap{
     max-width:var(--max);
     margin:0 auto;
     padding:28px 16px 48px;
   }
   header{
     display:flex;
     gap:14px;
     align-items:flex-start;
     justify-content:space-between;
     margin-bottom:18px;
   }
   .title{
     display:flex;
     flex-direction:column;
     gap:6px;
   }
   h1{
     margin:0;
     font-size: clamp(22px, 3.2vw, 34px);
     letter-spacing:.2px;
   }
   .meta{
     color:var(--muted);
     font-size:14px;
     display:flex;
     flex-wrap:wrap;
     gap:10px 14px;
   }
   .pill{
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:6px 10px;
     border:1px solid var(--border);
     border-radius:999px;
     background:rgba(255,255,255,.03);
   }
   .grid{
     display:grid;
     grid-template-columns: var(--sidebar) 1fr;
     gap:16px;
     align-items:start;
   }
   nav{
     position:relative;
     top:10px;
     border:1px solid var(--border);
     border-radius:var(--radius);
     background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
     box-shadow:var(--shadow);
     overflow:hidden;
   }
   nav .nav-head{
     padding:14px 14px 10px;
     border-bottom:1px solid var(--border);
     background:rgba(0,0,0,.15);
   }
   nav .nav-head strong{
     display:block;
     font-size:14px;
     letter-spacing:.4px;
     text-transform:uppercase;
     color:var(--muted);
   }
   nav ul{
     list-style:none;
     margin:0;
     padding:8px;
     display:flex;
     flex-direction:column;
     gap:6px;
   }
   nav a{
     display:block;
     padding:10px 10px;
     border-radius:10px;
     border:1px solid transparent;
     color:var(--text);
     font-size:14px;
   }
   nav a:hover{
     background:rgba(255,255,255,.04);
     border-color:var(--border);
     text-decoration:none;
   }
   main{
     border:1px solid var(--border);
     border-radius:var(--radius);
     background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
     box-shadow:var(--shadow);
     overflow:hidden;
	 position:relative;
   }
   .content{
     padding:18px 18px 8px;
   }
   section{
     padding:16px 0;
     border-bottom:1px solid var(--border);
   }
   section:last-child{border-bottom:none}
   h2{
     margin:0 0 8px;
     font-size:18px;
   }
   p{margin:0 0 10px; color:var(--text)}
   .muted{color:var(--muted)}
   .callout{
     margin:12px 0 0;
     padding:12px 12px;
     border:1px solid var(--border);
     border-radius:12px;
     background:rgba(0,0,0,.18);
   }
   .callout strong{color:var(--accent)}
   .list{
     margin:8px 0 0 18px;
     color:var(--text);
   }
   .list li{margin:6px 0}
   .footer{
     padding:14px 18px 18px;
     border-top:1px solid var(--border);
     background:rgba(0,0,0,.14);
     color:var(--muted);
     font-size:13px;
   }
   .kbd{
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 12px;
     padding: 2px 6px;
     border-radius: 8px;
     border: 1px solid var(--border);
     background: rgba(255,255,255,.04);
     color: var(--text);
   }
   @media (max-width: 920px){
     .grid{grid-template-columns:1fr}
     nav{position:relative; top:auto}
   }
   @media print{
     body{background:#fff; color:#000}
     nav{display:none}
     main{box-shadow:none; border:1px solid #ddd; background:#fff}
     a{color:#000; text-decoration:underline}
     .pill{border:1px solid #ddd; background:#fff}
   }
   
   .content-separator {
     display: block;
     width: 100%;
     height: 200px; /* or any height you want */
     background-color:  #f5ce42;
     border-radius: 0;
     margin: 24px 0;
   }