/* ============================================================
   LEGAL PAGES — Quantum design system add-on (on top of styles.css)
   ============================================================ */
.legal-wrap{max-width:820px; margin:0 auto; padding:0 20px; position:relative; z-index:1}
@media(min-width:768px){.legal-wrap{padding:0 40px}}

.legal-top{padding:34px 0 8px}
.back-link{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border-strong); background:rgba(255,255,255,.03); border-radius:11px;
  padding:9px 15px; transition:border-color .2s, color .2s, transform .2s}
.back-link:hover{color:var(--fg); border-color:rgba(99,102,241,.45); transform:translateY(-1px)}

.legal-head{padding:30px 0 8px}
.legal-head h1{font-size:clamp(36px,6vw,64px); font-weight:600; letter-spacing:-.04em; line-height:1.02; margin:16px 0 0}
.legal-head .lede{margin-top:20px; font-size:clamp(15.5px,1.6vw,18px); line-height:1.62; color:var(--muted); max-width:60ch}
.legal-head .lede b{color:var(--fg); font-weight:500}

.legal-body{padding:30px 0 20px}
.legal-body h2{font-size:clamp(19px,2.4vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.2;
  margin:40px 0 12px; display:flex; align-items:baseline; gap:12px}
.legal-body h2 .n{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--cyan); flex:0 0 auto}
.legal-body p{font-size:15.5px; line-height:1.66; color:var(--muted); margin-bottom:14px}
.legal-body p b, .legal-body li b{color:var(--fg); font-weight:600}
.legal-body a{color:var(--cyan); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(34,211,238,.4)}
.legal-body a:hover{text-decoration-color:var(--cyan)}
.legal-body ul{list-style:none; margin:6px 0 20px; display:flex; flex-direction:column; gap:11px}
.legal-body li{font-size:15px; line-height:1.6; color:var(--muted); display:flex; gap:12px; align-items:flex-start}
.legal-body li::before{content:"→"; color:var(--lime); flex:0 0 auto; margin-top:1px}

.callout{padding:18px 22px; border-radius:14px; margin:20px 0;
  background:rgba(99,102,241,.07); border:1px solid rgba(99,102,241,.22); font-size:14.5px; color:var(--muted); line-height:1.6}
.callout b{color:var(--fg)}

/* contact / business-detail grid */
.dl{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin:6px 0 24px}
@media(min-width:560px){.dl{grid-template-columns:repeat(2,1fr)}}
.dl .cell{background:var(--bg); padding:18px 20px}
.dl .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:7px}
.dl .v{font-size:15px; color:var(--fg)}
.dl .v a{color:var(--cyan)}

/* reach-us tiles */
.reach{display:grid; gap:12px; grid-template-columns:1fr; margin:6px 0 24px}
@media(min-width:560px){.reach{grid-template-columns:repeat(2,1fr)}}
.reach a{display:flex; align-items:center; gap:14px; border:1px solid var(--border); background:rgba(255,255,255,.02);
  border-radius:14px; padding:16px 18px; text-decoration:none; transition:border-color .2s, transform .2s}
.reach a:hover{border-color:rgba(99,102,241,.45); transform:translateY(-2px)}
.reach .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:19px; flex:0 0 auto;
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25)}
.reach .tx{display:flex; flex-direction:column; min-width:0}
.reach .tx .lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.reach .tx .val{font-size:15px; color:var(--fg); font-weight:500; margin-top:3px; overflow:hidden; text-overflow:ellipsis}

/* cross-links + updated stamp */
.legal-foot{margin-top:48px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between}
.legal-foot .links{display:flex; flex-wrap:wrap; gap:16px}
.legal-foot .links a{font-size:13.5px; color:var(--muted); transition:color .2s}
.legal-foot .links a:hover{color:var(--fg)}
.legal-foot .stamp{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}