/* ==========================================================================
   STREIGHT DIGITAL SOLUTIONS — Policies page
   Extends design tokens from styles.css. Load styles.css first.
   ========================================================================== */

/* Current-page nav indicator */
.main-nav a.is-current{ color:var(--cyan); }
.main-nav a.is-current span{ color:var(--cyan); }

/* ---------------------------------------------------------------
   Legal hero
   --------------------------------------------------------------- */
.legal-hero{
  padding:150px clamp(20px,6vw,80px) 60px;
  border-bottom:1px solid var(--border);
}
.legal-hero .section-title{ margin-bottom:18px; }
.legal-hero-sub{
  color:var(--muted); max-width:640px; font-size:16px; margin-bottom:14px;
}
.legal-meta{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  color:var(--muted-dim); text-transform:uppercase;
}

/* ---------------------------------------------------------------
   Quick-nav chip row
   --------------------------------------------------------------- */
.legal-quicknav{
  position:sticky; top:0; z-index:40;
  display:flex; flex-wrap:wrap; gap:10px;
  padding:16px clamp(20px,6vw,80px);
  background:rgba(5,8,16,0.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.legal-quicknav a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); background:var(--panel); border:1px solid var(--border-bright);
  padding:8px 14px; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}
.legal-quicknav a:hover{ color:var(--cyan); border-color:var(--cyan); }

/* ---------------------------------------------------------------
   Legal content sections
   --------------------------------------------------------------- */
.legal-body{
  padding:20px clamp(20px,6vw,80px) 100px;
  max-width:840px; margin:0 auto;
}
.legal-section{
  padding:48px 0; border-bottom:1px solid var(--border);
  scroll-margin-top:74px;
}
.legal-section:last-child{ border-bottom:none; }
.legal-section h2{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(20px,2.6vw,28px); letter-spacing:0.01em; color:var(--white);
  margin-bottom:16px;
}
.legal-section .legal-index{
  font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:0.08em;
  display:block; margin-bottom:6px;
}
.legal-section h3{
  font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--cyan); margin:22px 0 10px;
}
.legal-section p{ color:var(--muted); line-height:1.75; margin-bottom:14px; }
.legal-section ul{ margin:0 0 14px; padding-left:20px; color:var(--muted); line-height:1.75; }
.legal-section li{ margin-bottom:8px; }
.legal-section li::marker{ color:var(--cyan); }
.legal-section strong{ color:var(--white); font-weight:600; }
.legal-section a.legal-link{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }

.legal-callout{
  background:var(--panel); border:1px solid var(--border-bright); border-left:3px solid var(--cyan);
  padding:18px 22px; margin-top:8px;
}
.legal-callout p{ margin-bottom:0; font-size:14px; }
.legal-callout p + p{ margin-top:10px; }

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 720px){
  .legal-quicknav{ overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
}