/* ==========================================================================
   Long-form pages: terms, privacy, security posture.
   Inherits the tokens and shell from styles.css. Optimised for reading:
   one measured column, a persistent contents rail, and unmissable markers
   wherever a business or legal fact is still outstanding.
   ========================================================================== */

.legal-page { color: var(--ink); background: var(--paper); }

.legal-header {
  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--white);
  background: linear-gradient(180deg, rgba(19, 30, 39, .94), rgba(19, 30, 39, .8));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: 0 20px 44px -34px rgba(0, 0, 0, .95);
}
.legal-header-shell { width: min(1180px, calc(100% - 64px)); height: 76px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 26px; margin-inline: auto; }
.legal-back { color: #aebcc3; font-size: 13px; font-weight: 600; transition: color .22s ease; }
.legal-back:hover { color: var(--white); }

.legal-hero { padding-block: 74px 54px; color: var(--white); background: radial-gradient(90% 80% at 78% 0%, rgba(64, 136, 244, .22), transparent 62%), linear-gradient(170deg, #1b2934, #16222c); }
.legal-hero-shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.legal-hero h1 { max-width: 16ch; margin: 18px 0 0; font-size: clamp(38px, 5vw, 60px); }
.legal-hero > .legal-hero-shell > p { max-width: 62ch; margin: 22px 0 0; color: #c3cfd5; font-size: 17px; line-height: 1.68; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); color: #9db0b9; font-family: var(--utility); font-size: 11px; }
.legal-meta b { color: var(--white); font-weight: 600; }

.legal-layout { width: min(1180px, calc(100% - 64px)); display: grid; grid-template-columns: 232px 1fr; align-items: start; gap: 72px; margin-inline: auto; padding-block: 66px 104px; }

.legal-toc { position: sticky; top: 108px; display: grid; gap: 4px; }
.legal-toc > span { margin-bottom: 8px; color: var(--approval); font-family: var(--utility); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.legal-toc a { display: block; padding: 7px 11px; color: #55666e; border-radius: var(--r-sm); font-size: 13px; line-height: 1.4; transition: color .2s ease, background .2s ease; }
.legal-toc a:hover { color: var(--ink); background: rgba(23, 35, 45, .05); }

.legal-body { min-width: 0; max-width: 72ch; display: grid; gap: 44px; }
.legal-body section { display: grid; gap: 14px; scroll-margin-top: 104px; }
.legal-body h2 { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; font-size: clamp(22px, 2.4vw, 27px); }
.legal-body h2 > i { color: var(--approval); font-family: var(--utility); font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; }
.legal-body h3 { margin: 10px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.012em; }
.legal-body p { margin: 0; max-width: 68ch; color: #43555e; font-size: 16px; line-height: 1.72; }
.legal-body ul, .legal-body ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; max-width: 68ch; color: #43555e; font-size: 16px; line-height: 1.68; }
.legal-body li strong, .legal-body p strong { color: var(--ink); font-weight: 650; }
.legal-body a:not(.legal-toc a) { color: var(--folder-deep); border-bottom: 1px solid rgba(44, 111, 221, .35); transition: color .2s ease, border-color .2s ease; }
.legal-body a:not(.legal-toc a):hover { color: var(--carbon); border-bottom-color: var(--carbon); }

/* A fact that is still outstanding. Deliberately loud: this must never ship. */
.needs-input {
  display: inline-block;
  padding: 2px 8px;
  color: var(--approval);
  background: var(--approval-pale);
  border: 1px dashed rgba(158, 70, 59, .55);
  border-radius: var(--r-xs);
  font-family: var(--utility);
  font-size: .85em;
  font-style: normal;
  font-weight: 600;
}

.legal-callout {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  background: linear-gradient(180deg, #fff, var(--porcelain));
  border: 1px solid rgba(23, 35, 45, .1);
  border-left: 3px solid var(--folder);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: var(--e1);
}
.legal-callout > span { color: var(--folder-deep); font-family: var(--utility); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.legal-callout p { font-size: 15px; }

.legal-table-wrap { overflow-x: auto; }
.legal-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.legal-table caption { margin-bottom: 12px; color: var(--muted); font-family: var(--utility); font-size: 11px; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.legal-table th, .legal-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(23, 35, 45, .1); font-size: 14px; line-height: 1.6; }
.legal-table th { color: var(--muted); font-family: var(--utility); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.legal-table td:first-child { color: var(--ink); font-weight: 600; }
.legal-table tbody tr:last-child td { border-bottom: 0; }

.legal-review {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 24px 26px;
  color: var(--white);
  background: linear-gradient(120deg, var(--carbon-mid), var(--carbon));
  border-radius: var(--r-md);
  box-shadow: var(--e3);
}
.legal-review > i { width: 38px; height: 38px; display: grid; place-items: center; color: var(--white); background: var(--approval); border-radius: 50%; font-family: var(--utility); font-size: 17px; font-style: normal; }
.legal-review div { display: grid; gap: 7px; }
.legal-review strong { font-size: 16px; }
.legal-review p { max-width: 62ch; color: #bcc8ce; font-size: 14px; line-height: 1.65; }

@media (max-width: 980px) {
  .legal-header-shell, .legal-hero-shell, .legal-layout { width: calc(100% - 48px); }
  .legal-layout { grid-template-columns: 1fr; gap: 42px; padding-block: 48px 84px; }
  .legal-toc { position: static; padding-bottom: 26px; border-bottom: 1px solid rgba(23, 35, 45, .12); }
  .legal-toc > div { display: flex; flex-wrap: wrap; gap: 6px; }
  .legal-toc a { padding: 8px 13px; background: rgba(23, 35, 45, .04); }
}

@media (max-width: 560px) {
  .legal-header-shell, .legal-hero-shell, .legal-layout { width: calc(100% - 30px); }
  .legal-header-shell { height: 68px; grid-template-columns: 1fr; gap: 12px; }
  .legal-back { display: none; }
  .legal-hero { padding-block: 46px 40px; }
  .legal-hero h1 { max-width: none; font-size: clamp(30px, 8.4vw, 38px); }
  .legal-hero > .legal-hero-shell > p { font-size: 16px; }
  .legal-body { gap: 36px; }
  .legal-body p, .legal-body ul, .legal-body ol { font-size: 15px; }
  .legal-body h2 { grid-template-columns: 1fr; gap: 4px; }
  .legal-review { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
}