/* ============================================================
   NOVA · Legal Center
   Depends on styles/shared.css (tokens, base, components, nav, footer).
   Four pages (Privacy, Terms, EULA, Refund) share this layout:
   hero + sticky table of contents + readable legal prose.
   ============================================================ */

.legal-main{padding-top:72px}
.legal-wrap{max-width:1100px;margin:0 auto;padding:0 32px}

/* homepage motion language reused */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.js .fx{animation:rise var(--dur-reveal) var(--ease-out) var(--d,0ms) both}

/* ---- hero ---- */
.legal-hero{position:relative;overflow:hidden;padding:72px 0 36px;border-bottom:1px solid var(--border-subtle)}
.legal-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 60% at 20% 0%,var(--iris-glow),transparent 70%)}
.legal-hero h1{position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em}
.legal-hero p{position:relative;margin:16px 0 0;max-width:60ch;color:var(--text-secondary);font-size:17px;line-height:26px}
.legal-updated{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:6px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--border-default);background:var(--bg-1);font-family:var(--font-mono);font-size:11.5px;color:var(--text-tertiary)}
.legal-updated svg{color:var(--iris-500)}

/* ---- two-column: sticky TOC + content ---- */
.legal-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;padding:40px 0 96px}

/* TOC uses <details> so it collapses natively on mobile */
.legal-toc{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin}
.legal-toc::-webkit-scrollbar{width:6px}.legal-toc::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}
.legal-toc>summary{list-style:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);
  margin-bottom:12px;pointer-events:none}
.legal-toc>summary::-webkit-details-marker{display:none}
.legal-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.legal-toc a{display:block;padding:6px 12px;border-left:2px solid var(--border-subtle);color:var(--text-tertiary);text-decoration:none;font-size:12.5px;line-height:1.4;
  transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out)}
.legal-toc a:hover{color:var(--text-secondary)}
.legal-toc a[aria-current="true"]{color:var(--iris-500);border-left-color:var(--iris-500)}

/* ---- legal prose (readability first) ---- */
.legal-content{min-width:0;max-width:760px}
.legal-content>section{margin-bottom:8px}
.legal-content h2{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.02em;margin:40px 0 12px;scroll-margin-top:var(--anchor-clearance)}
.legal-content h2:first-child{margin-top:0}
.legal-content h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin:24px 0 8px}
.legal-content p{margin:12px 0;color:var(--text-secondary);font-size:15.5px;line-height:27px}
.legal-content ul,.legal-content ol{margin:12px 0;padding-left:22px;color:var(--text-secondary);font-size:15.5px;line-height:27px}
.legal-content li{margin:6px 0}
.legal-content li::marker{color:var(--text-tertiary)}
.legal-content strong{color:var(--text-primary);font-weight:600}
.legal-content a{color:var(--iris-300);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-hover) var(--ease-out),color var(--dur-hover) var(--ease-out)}
.legal-content a:hover{color:var(--iris-500);text-decoration-color:var(--iris-500)}
.legal-content hr{border:0;border-top:1px solid var(--border-subtle);margin:36px 0}

/* company info block + contact card reuse tokens */
.legal-meta{margin:8px 0 4px;padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--bg-1)}
.legal-meta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px}
.legal-meta dt{color:var(--text-tertiary)}
.legal-meta dd{margin:0;color:var(--text-primary)}
.legal-contact{margin-top:28px;padding:22px 24px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--bg-2),var(--bg-1))}
.legal-contact h2{margin-top:0}
.legal-contact p{margin-top:6px}

/* cross-links to the other legal pages */
.legal-more{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px;padding-top:24px;border-top:1px solid var(--border-subtle)}
.legal-more a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--radius-pill);border:1px solid var(--border-default);
  color:var(--text-secondary);text-decoration:none;font-size:12.5px;font-weight:500;transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out)}
.legal-more a:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-2)}
.legal-more a[aria-current="page"]{color:var(--iris-500);border-color:var(--iris-500);background:var(--iris-glow)}

/* ---- responsive: TOC collapses above the content ---- */
@media (max-width:860px){
  .legal-wrap{padding:0 20px}
  .legal-grid{grid-template-columns:1fr;gap:0;padding:24px 0 72px}
  .legal-toc{position:static;max-height:none;overflow:visible;margin-bottom:28px;
    border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-1);padding:14px 16px}
  .legal-toc>summary{display:flex;align-items:center;justify-content:space-between;margin:0;pointer-events:auto;cursor:pointer;
    font-size:12px;color:var(--text-secondary)}
  .legal-toc>summary::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-content) var(--ease-out)}
  .legal-toc[open]>summary::after{transform:rotate(-135deg)}
  .legal-toc[open] ul{margin-top:12px}
  .legal-content{max-width:none}
}