/* ============================================================================
   Legal / content archetype (A-CONTENT) — self-contained layout + typography.
   WHY THIS FILE EXISTS: the v2 Tailwind build (sovereign-core-v2.compiled.css)
   purged the `col-span-*` and `prose` utilities the legal pages relied on, so
   privacy/terms/cookies/security rendered with collapsed 48px columns and
   unstyled prose (the reported "privacy/terms broken layout" defect). This file
   owns the legal-page reading layout with plain CSS + brand values so it never
   depends on purged utilities or page-specific tokens. Load on A-CONTENT pages.
   Brand: bg var(--bg) · teal var(--teal) · ink var(--bg) · steel var(--line-deep).
   ========================================================================== */

/* ── Two-column reading layout (TOC rail + document) ── */
.legal-shell { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) {
  .legal-shell { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 4rem; }
}

/* Variant: wide document on the left + narrow info sidebar on the right. */
@media (min-width: 1024px) {
  .legal-shell--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); }
}
.legal-aside__card { padding: 2rem; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.25rem; }
@media (min-width: 1024px) { .legal-aside__card { position: sticky; top: 8rem; } }
.legal-aside__label { font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(4, 14, 26, 0.45); margin: 0 0 1rem; }
.legal-aside__card p { color: var(--line-deep); margin: 0 0 0.75rem; }
.legal-aside__links { display: flex; flex-direction: column; gap: 0.85rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.legal-aside__links a { color: var(--bg); font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.legal-aside__links a:hover { color: var(--teal); }

.legal-rail { font-size: 0.875rem; }
.legal-rail__title { font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(4, 14, 26, 0.45); margin: 0 0 1.5rem; }
.legal-rail__list { display: flex; flex-direction: column; gap: 0.85rem; border-left: 1px solid rgba(0, 0, 0, 0.08); padding-left: 1.25rem; }
.legal-rail__list a { color: var(--line-deep); font-weight: 700; text-decoration: none; line-height: 1.4; transition: color 0.15s ease; }
.legal-rail__list a:hover, .legal-rail__list a:focus-visible { color: var(--teal); }
@media (min-width: 1024px) {
  .legal-rail__inner { position: sticky; top: 8rem; }
}

/* ── Document typography ── */
.legal-doc { max-width: none; color: var(--line-deep); }
.legal-doc > section { scroll-margin-top: 7.5rem; }
.legal-doc > section + section { margin-top: 1rem; }
.legal-doc h2 { font-size: clamp(1.6rem, 1rem + 1.8vw, 2.25rem); font-weight: 900; color: var(--bg); line-height: 1.15; margin: 4rem 0 1.75rem; }
.legal-doc > section:first-child h2 { margin-top: 0; }
.legal-doc h3 { font-size: 1.375rem; font-weight: 900; color: var(--bg); line-height: 1.25; margin: 2.5rem 0 1.25rem; }
.legal-doc h4 { font-size: 1.1875rem; font-weight: 900; color: var(--bg); line-height: 1.3; margin: 2rem 0 0.75rem; }
.legal-doc p { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 1.25rem; }
.legal-doc ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 1.5rem; }
.legal-doc ul li { font-size: 1.0625rem; line-height: 1.7; margin: 0 0 0.65rem; }
.legal-doc strong { color: var(--bg); font-weight: 800; }
.legal-doc a { color: var(--teal-edge); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--teal); }

/* ── Callout (note / warning) ── */
.lc-callout { margin: 2.5rem 0; padding: 1.75rem 2rem; border-radius: 1rem; background: var(--teal-06); border-left: 4px solid var(--teal); }
.lc-callout__label { display: flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bg); margin: 0 0 0.9rem; }
.lc-callout__label svg { width: 1.25rem; height: 1.25rem; color: var(--teal); flex: none; }
.lc-callout p { margin: 0 0 0.75rem; }
.lc-callout p:last-child { margin-bottom: 0; }

/* ── Table (explicit .lc-table and any raw <table> inside a legal doc) ── */
.lc-table-wrap, .legal-doc .overflow-x-auto { overflow-x: auto; margin: 2rem 0; }
.lc-table, .legal-doc table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 2rem 0; }
.lc-table caption, .legal-doc table caption { text-align: left; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(4, 14, 26, 0.45); padding-bottom: 0.75rem; }
.lc-table th, .lc-table td, .legal-doc table th, .legal-doc table td { border: 1px solid rgba(0, 0, 0, 0.08); padding: 0.85rem 1rem; text-align: left; vertical-align: top; }
.lc-table thead th, .legal-doc table thead th { background: rgba(0, 0, 0, 0.04); font-weight: 900; color: var(--bg); }
.lc-table tbody th, .lc-table td.lc-key, .legal-doc table tbody th { font-weight: 700; color: var(--bg); }

/* ── Accordion ── */
.lc-details { margin: 1.5rem 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 1rem; background: rgba(0, 0, 0, 0.03); padding: 1.25rem 1.5rem; }
.lc-details > summary { font-weight: 900; color: var(--bg); cursor: pointer; list-style: none; }
.lc-details > summary::-webkit-details-marker { display: none; }
.lc-details > summary::after { content: "+"; float: right; font-weight: 700; color: var(--teal); }
.lc-details[open] > summary::after { content: "\2212"; }
.lc-details__body { margin-top: 1rem; }
.lc-details__body ul { margin-top: 0.5rem; }

/* ── CTA row ── */
.lc-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0; }
.lc-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: 0.75rem; font-weight: 800; font-size: 0.95rem; text-decoration: none; transition: transform 0.15s ease, background 0.15s ease; }
.lc-cta svg { width: 1.1rem; height: 1.1rem; }
.lc-cta:hover { transform: translateY(-1px); }
.lc-cta--primary { background: var(--bg); color: var(--white); }
.lc-cta--primary:hover { background: var(--teal); color: var(--bg); }
.lc-cta--ghost { background: transparent; color: var(--bg); border: 1px solid rgba(0, 0, 0, 0.12); }
.lc-cta--ghost:hover { border-color: var(--teal); color: var(--teal); }

/* ── Uptime stat block ── */
.lc-stat { display: flex; flex-direction: column; gap: 1.5rem; margin: 2.5rem 0; padding: 2.5rem; border-radius: 1.5rem; background: var(--bg); color: var(--cloud); }
@media (min-width: 768px) { .lc-stat { flex-direction: row; align-items: center; gap: 2.5rem; } }
.lc-stat__num { font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 900; color: var(--teal); line-height: 1; margin: 0; }
.lc-stat__num sup { font-size: 0.4em; vertical-align: super; }
.lc-stat__body { flex: 1; }
.lc-stat__body p { color: rgba(232, 240, 250, 0.72); font-size: 1.0625rem; line-height: 1.6; margin: 0 0 1rem; }
.lc-stat__cta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); text-decoration: none; }
.lc-stat__cta svg { width: 1rem; height: 1rem; }

/* ── Trust badges ── */
.lc-badges { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 2.5rem; }
.lc-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bg); }
.lc-badge svg { width: 1rem; height: 1rem; color: var(--teal); }
.lc-footnote { font-size: 0.75rem; color: rgba(4, 14, 26, 0.5); margin-top: 1.5rem; }

/* ── Cookie table (cookies.html) — real CSS; the page's inline @apply block was
   a build-time directive that does nothing at runtime. Badge colours darkened
   for WCAG AA on the white content background. ── */
.cookies-table-wrapper { overflow-x: auto; margin: 2rem 0; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1.25rem; }
.cookies-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
.cookies-table th { padding: 0.9rem 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.625rem; color: rgba(4, 14, 26, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.cookies-table td { padding: 0.9rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); color: var(--line-deep); vertical-align: top; }
.cookies-table tr:last-child td { border-bottom: 0; }
.cookies-table .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.8rem; color: var(--bg); }
.badge-cookie { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 0.375rem; font-size: 0.625rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.badge-essential { background: rgba(12, 201, 168, 0.14); color: var(--ca-c-0a6e5c); }
.badge-analytics { background: rgba(94, 116, 0, 0.12); color: var(--ca-c-4f6300); }
.badge-marketing { background: rgba(109, 79, 208, 0.12); color: var(--ca-c-5a3fc0); }

@media (prefers-reduced-motion: reduce) {
  .lc-cta, .legal-rail__list a { transition: none; }
}