/* Shared CSS for legal pages — OpsyLab */
:root{
  --ink:#132349; --ink-2:#0c1730; --ink-3:#1a2d5c;
  --teal:#2EA4A5; --teal-soft:#7ac5c6;
  --orange:#E58624;
  --paper:#F6F4EF; --paper-2:#EDEAE2;
  --line:#d9d5c9; --muted:#5e6377;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:112px}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.6; font-feature-settings:"ss01","cv11"}
a{color:inherit}
.mono{font-family:'JetBrains Mono',monospace; letter-spacing:-.01em}
.wrap{max-width:1280px; margin:0 auto; padding:0 32px}
img{display:block; max-width:100%}
h1,h2,h3,h4{font-family:'Inter',sans-serif; font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance}
p{text-wrap:pretty}

/* ===== Buttons + nav (shared) ===== */
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:600; font-size:14.5px; border:1px solid transparent; transition:.2s; cursor:pointer; text-decoration:none}
.btn-dark{background:var(--ink); color:#fff} .btn-dark:hover{background:#0c1730}
.btn svg{width:14px; height:14px}

.topbar{position:sticky; top:0; z-index:50; background:rgba(246,244,239,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:40px; height:88px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.brand img{height:52px; width:auto; display:block}
.nav ul{list-style:none; display:flex; gap:28px; padding:0; margin:0 auto 0 16px; font-size:14.5px; font-weight:500}
.nav ul a{opacity:.8; text-decoration:none} .nav ul a:hover{opacity:1; color:var(--teal)}
.nav .status{display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); border:1px solid var(--line); padding:6px 10px; border-radius:999px; background:#fff}
.dot{width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* ===== Legal hero ===== */
.legal-hero{background:var(--ink); color:#fff; padding:88px 0 96px; position:relative; overflow:hidden}
.legal-hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse at 20% 30%, #000 30%, transparent 75%)}
.legal-hero > .wrap{position:relative}
.crumbs{display:inline-flex; align-items:center; gap:10px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:32px}
.crumbs a{color:inherit; text-decoration:none} .crumbs a:hover{color:var(--teal-soft)}
.crumbs span:first-of-type{opacity:.4}
.legal-hero h1{font-size:clamp(44px, 6vw, 80px); line-height:1; letter-spacing:-.035em; margin-bottom:40px; max-width:18ch}
.legal-meta{display:grid; grid-template-columns:repeat(4,auto); gap:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12)}
.legal-meta > div{display:flex; flex-direction:column; gap:6px}
.legal-meta .lbl{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45)}
.legal-meta strong{font-size:15px; font-weight:500}

/* ===== Body layout ===== */
.legal-body{padding:80px 0 100px}
.legal-grid{display:grid; grid-template-columns:280px 1fr; gap:80px; align-items:start}

/* TOC */
.toc{position:sticky; top:112px}
.toc-inner{border-left:1px solid var(--line); padding:6px 0 6px 22px}
.toc-title{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.toc ol{list-style:none; padding:0; margin:0; counter-reset:tocsec; display:flex; flex-direction:column; gap:8px}
.toc li{counter-increment:tocsec; font-size:14px; line-height:1.4; position:relative; padding-left:32px}
.toc li::before{content:"§" counter(tocsec, decimal-leading-zero); position:absolute; left:0; top:1px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); letter-spacing:.04em}
.toc a{color:var(--ink); text-decoration:none; opacity:.75; transition:.15s}
.toc a:hover{opacity:1; color:var(--teal)}
.toc-cta{margin-top:32px; padding-top:24px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:4px}
.toc-cta .lbl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.toc-cta a{font-size:13.5px; color:var(--ink); text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px}

/* Content */
.content{max-width:760px; font-size:16px}
.content .intro{font-size:18px; line-height:1.6; color:var(--ink-3); padding:24px 28px; background:#fff; border-left:3px solid var(--orange); border-radius:0 8px 8px 0; margin:0 0 64px}

.sec{padding:0 0 56px; margin:0 0 56px; border-bottom:1px solid var(--line); position:relative}
.sec:last-of-type{border-bottom:none; padding-bottom:0; margin-bottom:0}
.sec-num{display:inline-block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; margin-bottom:18px}
.sec h2{font-size:32px; letter-spacing:-.02em; line-height:1.1; margin-bottom:20px}
.sec h2 small{font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:400; color:var(--muted); letter-spacing:.04em; margin-left:6px}
.sec h3{font-size:16px; font-weight:600; margin:28px 0 12px; color:var(--ink); letter-spacing:0}
.sec p{margin:0 0 16px}
.sec p strong{color:var(--ink)}
.sec a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px}
.sec a:hover{color:var(--teal)}

.list{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px}
.list li{position:relative; padding-left:22px; font-size:15.5px; line-height:1.55}
.list li::before{content:""; position:absolute; left:0; top:11px; width:8px; height:1px; background:var(--ink)}
.list.rights li{padding-left:20px}
.list.rights li::before{background:var(--orange); width:6px; height:6px; border-radius:50%; top:9px}

/* Table */
.tbl-wrap{margin:8px 0 8px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px}
.tbl th{text-align:left; padding:14px 18px; background:var(--paper-2); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; border-bottom:1px solid var(--line)}
.tbl td{padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td:first-child{font-weight:500}

/* Callout & contact card */
.callout{margin-top:16px; padding:18px 22px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:0 6px 6px 0; font-size:15px; line-height:1.55}
.contact-card{display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:24px 26px; background:#fff; border:1px solid var(--line); border-radius:8px}
.contact-card > div{display:flex; flex-direction:column; gap:4px}
.contact-card .lbl{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.contact-card strong{font-size:15.5px}

/* Doc end */
.doc-end{padding-top:48px; border-top:1px dashed var(--line); font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; font-family:'JetBrains Mono',monospace}

/* ===== Footer (shared) ===== */
.site-footer{background:var(--ink-2); color:rgba(255,255,255,.7); padding:72px 0 32px}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08)}
.site-footer h5{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.14em; margin:0 0 18px; font-family:'JetBrains Mono',monospace; font-weight:500}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px}
.site-footer a{text-decoration:none; color:inherit}
.site-footer ul a:hover{color:var(--teal)}
.site-footer .f-brand img{width:140px; margin-bottom:18px}
.site-footer .f-brand p{font-size:14px; max-width:32ch; color:rgba(255,255,255,.55)}
.f-base{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:28px; color:rgba(255,255,255,.4)}
.f-base .legal-links{display:flex; align-items:center; gap:14px}
.f-base .legal-links a.active{color:var(--teal-soft)}
.f-base a:hover{color:var(--teal)}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .nav ul{display:none}
  .legal-grid{grid-template-columns:1fr; gap:48px}
  .toc{position:static}
  .toc-inner{padding-left:18px}
  .legal-meta{grid-template-columns:1fr 1fr; gap:28px}
  .legal-hero h1{font-size:clamp(36px, 9vw, 56px)}
  .sec h2{font-size:26px}
  .contact-card{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}