/* terms.css - /Home/Terms (static legal content, sticky table of contents).
   Loads after redesign-core.css + profile-header-footer.css - the mockup's own hero-nav/mobile-menu
   and footer are replaced by the standard _RedesignHeaderAuto/_RedesignFooterAuto partials already
   used by every other redesigned page; everything here is specific to the legal-document layout.
   Structurally the same layout as privacypolicy.css (shared mockup family) - kept as its own file
   since only this page uses numbered priority lists and neither page's CSS is shared cross-page. */

/* ---- Legal page hero ---- */
.legal-hero { position: relative; padding: 150px 0 64px; overflow: hidden; background: linear-gradient(180deg, var(--bg-tint), var(--bg) 85%); border-bottom: 1px solid var(--line); text-align: center; }
.legal-hero::before {
    content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    width: 1100px; height: 560px;
    background: radial-gradient(ellipse at center, rgba(255,102,0,0.12), transparent 62%);
    pointer-events: none; z-index: 0;
}
.legal-hero-grid {
    position: absolute; inset: 0; z-index: 0; opacity: 0.5;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 25%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 20%, #000 25%, transparent 72%);
}
.legal-hero .container { position: relative; z-index: 1; }
.legal-hero h1 { margin-bottom: 16px; }
.legal-sub { color: var(--muted); font-size: 1.08rem; max-width: 680px; margin: 0 auto; }
.legal-meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 0.85rem; color: var(--muted); border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow-sm); }
.legal-meta .material-icons { font-size: 17px; color: var(--orange); }
[data-theme="dark"] .legal-hero { background: linear-gradient(180deg, #17120c, var(--bg) 85%); }
[data-theme="dark"] .legal-hero::before { background: radial-gradient(ellipse at center, rgba(255,102,0,0.2), transparent 64%); }

/* ---- Legal layout: sticky TOC + content ---- */
.legal-layout { display: grid; grid-template-columns: 264px 1fr; gap: 56px; align-items: start; padding: 64px 0 100px; }
.toc-card { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); padding: 20px 18px; max-height: calc(100vh - 130px); display: flex; flex-direction: column; }
.toc-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; flex: 0 0 auto; }
.toc-card nav { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; flex: 1 1 auto; min-height: 0; }
.toc-card nav a { display: block; font-size: 0.84rem; font-weight: 600; color: var(--muted); padding: 6px 11px; border-left: 2px solid var(--line); transition: color .2s, border-color .2s, background .2s; border-radius: 0 8px 8px 0; }
.toc-card nav a:hover { color: var(--orange); }
.toc-card nav a.on { color: var(--orange); border-left-color: var(--orange); background: var(--orange-soft); }
.toc-help { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); flex: 0 0 auto; }
.toc-help a { color: var(--orange); font-weight: 700; }

.legal-content { min-width: 0; max-width: 780px; }
.legal-section { scroll-margin-top: 100px; }
.legal-section + .legal-section { margin-top: 56px; padding-top: 46px; border-top: 1px solid var(--line); }
.legal-section h2 { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.legal-section h2 .sec-num { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: var(--orange-soft); color: var(--orange); display: grid; place-items: center; font-size: 1rem; font-weight: 800; letter-spacing: 0; margin-top: 1px; }
.legal-section h3 { margin: 28px 0 10px; }
.legal-content p { color: var(--ink-2); font-size: 0.99rem; line-height: 1.7; }
.legal-content a { color: var(--orange); font-weight: 600; }
.legal-content a:hover { text-decoration: underline; }
.legal-content b { color: var(--ink); }
.legal-intro-card { background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--radius-sm); padding: 20px 24px; margin: 0 0 18px; }
.legal-intro-card p { margin: 0 0 12px; }
.legal-intro-card p:last-child { margin: 0; }

/* bullet lists */
.legal-content ul { list-style: none; margin: 0 0 18px; padding: 0; }
.legal-content ul li { position: relative; padding: 5px 0 5px 24px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; }
.legal-content ul li::before { content: ""; position: absolute; left: 6px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* numbered priority lists (order of precedence between contract documents) */
.legal-content ol { list-style: none; counter-reset: pri; margin: 0 0 18px; padding: 0; }
.legal-content ol li { counter-increment: pri; position: relative; padding: 6px 0 6px 36px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; }
.legal-content ol li::before { content: counter(pri); position: absolute; left: 0; top: 7px; width: 24px; height: 24px; border-radius: 50%; background: var(--orange-soft); color: var(--orange); font-weight: 800; font-size: 0.78rem; display: grid; place-items: center; }

/* address / contact callout */
.contact-card { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px 24px; margin: 18px 0; }
.contact-card .material-icons { color: var(--orange); font-size: 24px; flex: 0 0 auto; margin-top: 2px; }
.contact-card p { margin: 0; font-size: 0.95rem; line-height: 1.7; }
.contact-card b { color: var(--ink); }

/* ---- Legal CTA band ---- */
.legal-cta { position: relative; text-align: center; overflow: hidden; background: linear-gradient(180deg, var(--bg), var(--bg-tint)); border-top: 1px solid var(--line); padding: 90px 0; }
.legal-cta::before {
    content: ""; position: absolute; bottom: -260px; left: 50%; transform: translateX(-50%);
    width: 1000px; height: 600px;
    background: radial-gradient(ellipse at center, rgba(255,102,0,0.14), transparent 65%); z-index: 0;
}
.legal-cta .container { position: relative; z-index: 1; }
.legal-cta h2 { max-width: 700px; margin: 0 auto 14px; font-size: clamp(1.7rem, 3vw, 2.4rem); display: block; }
.legal-cta p { color: var(--muted); max-width: 560px; margin: 0 auto 30px; }
.legal-cta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
[data-theme="dark"] .legal-cta { background: linear-gradient(180deg, var(--bg), #17120c); }
[data-theme="dark"] .legal-cta::before { background: radial-gradient(ellipse at center, rgba(255,102,0,0.2), transparent 64%); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 36px; padding: 44px 0 80px; }
    .toc-card { position: static; max-height: none; }
    .toc-card nav { max-height: 300px; }
    .legal-hero { padding: 128px 0 50px; }
}