.legal-hero {
  padding: 76px 0 58px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% 10%, rgba(20, 91, 255, 0.08), transparent 28%),
    var(--off-white);
}

.legal-breadcrumbs {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
}

.legal-breadcrumbs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-hero h1 {
  max-width: 850px;
  margin: 8px 0 18px;
}

.legal-summary {
  max-width: 760px;
  margin: 0;
  color: #4f596b;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
}

.legal-updated {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.legal-body {
  padding: 68px 0 96px;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: start;
  gap: 72px;
}

.legal-content {
  width: min(100%, 810px);
}

.legal-content p,
.legal-content li,
.legal-content dd {
  color: #4f596b;
}

.legal-content a:not(.button) {
  color: #104bd3;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legal-section {
  padding: 0 0 34px;
  margin: 0 0 34px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}

.legal-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.legal-section h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3vw, 34px);
}

.legal-section h3 {
  margin: 24px 0 9px;
  font-size: 18px;
}

.legal-section p {
  margin: 0 0 15px;
}

.legal-section ul,
.legal-section ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.legal-section li + li {
  margin-top: 8px;
}

.legal-toc {
  position: sticky;
  top: 102px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.legal-toc strong {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
}

.legal-toc a {
  min-height: 36px;
  padding: 5px 0;
  display: block;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-toc a:hover {
  color: var(--ink);
}

.legal-note {
  margin: 0 0 34px;
  padding: 22px 24px;
  border: 1px solid #f0d48d;
  border-left: 4px solid #e8a913;
  border-radius: 14px;
  color: #5c4612;
  background: #fff9e9;
}

.legal-note strong {
  display: block;
  margin-bottom: 5px;
  color: #3e2f0c;
}

.legal-note p {
  margin: 0;
  color: inherit;
}

.plain-note {
  margin: 20px 0;
  padding: 20px 22px;
  border-left: 4px solid var(--cobalt);
  border-radius: 10px;
  background: var(--cobalt-soft);
}

.plain-note.teal {
  border-left-color: var(--teal);
  background: var(--teal-soft);
}

.plain-note p:last-child {
  margin-bottom: 0;
}

.policy-list {
  margin: 20px 0;
  display: grid;
  gap: 12px;
}

.policy-item {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--off-white);
}

.policy-item strong {
  display: block;
  margin-bottom: 4px;
}

.policy-item p {
  margin: 0;
}

.contact-grid {
  margin: 26px 0 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-card {
  min-height: 210px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.contact-card h2,
.contact-card h3 {
  margin: 0 0 10px;
  font-size: 21px;
}

.contact-card p {
  margin: 0 0 12px;
}

.draft-placeholder {
  padding: 3px 7px;
  border-radius: 5px;
  color: #6b4700;
  background: #ffedb6;
  font-size: 0.92em;
  font-weight: 700;
}

.company-details {
  margin: 18px 0 0;
}

.company-details div {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
}

.company-details dt {
  font-weight: 700;
}

.company-details dd {
  margin: 0;
}

.support-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* .legal-footer-grid used to restate the desktop column widths here,
   unconditionally. That value was identical to .footer-grid's own base
   rule in styles.css, so it changed nothing at desktop width, but because
   this file loads AFTER styles.css, an unconditional rule at equal
   specificity beats styles.css's media-query rules that collapse the
   footer to one or two columns on a narrow screen: a media query matching
   does not add specificity, only source order breaks the tie. Every legal
   page's footer stayed four columns wide no matter how narrow the screen,
   which is the sideways scroll Lee found on 14 September. Removed rather
   than given its own breakpoints, since .footer-grid's already do exactly
   the same job for every other page's footer, including this one, once
   nothing here overrides it. */

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .legal-toc {
    position: static;
    order: -1;
  }

  .legal-toc a {
    min-height: 40px;
  }
}

@media (max-width: 620px) {
  .legal-hero {
    padding: 54px 0 44px;
  }

  .legal-body {
    padding: 50px 0 72px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .company-details div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .support-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .support-actions .button {
    width: 100%;
  }
}