/* Legal / informational pages (terms, privacy, gdpr, refund, security,
   contact, cookie-policy, ai-usage-policy).

   These pages carried .legal-page / .legal-document classes that no
   stylesheet ever defined, so they rendered as raw browser default:
   no container, no max line length, unstyled headings, and default
   blue underlined links. They also do not set data-page="app", so they
   receive none of styles.css's ~830 scoped redesign rules.

   This gives them a real layout of their own, built on the same --ac-*
   tokens as the rest of the product (declared on a bare :root in
   styles.css, so available here without the data-page hook). */

.legal-page {
  min-height: 100vh;
  margin: 0;
  padding: clamp(24px, 5vw, 56px) 20px clamp(48px, 8vw, 96px);
  background: var(--ac-bg);
  color: var(--ac-text);
  font-family: var(--ac-font-body, "Poppins", sans-serif);
}

.legal-document {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--ac-border);
  border-radius: 24px;
  background: var(--ac-surface);
  box-shadow: 0 24px 70px rgba(11, 47, 51, .08);
}

/* Eyebrow: styles.css already paints .eyebrow teal/uppercase, but at a
   10px size meant for dense in-app chrome. On a reading page it needs
   to sit as a real kicker above the title. */
.legal-document .eyebrow {
  margin: 0 0 10px;
  color: var(--ac-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.legal-document h1 {
  margin: 0 0 22px;
  color: var(--ac-text);
  font-family: var(--ac-font-display, "Poppins", sans-serif);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.legal-document h2 {
  margin: 34px 0 10px;
  color: var(--ac-text);
  font-family: var(--ac-font-display, "Poppins", sans-serif);
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* 16px/1.75 on a ~760px column keeps the measure near 70-80 characters,
   which is the point of the container - the old pages ran text the full
   width of the viewport. */
.legal-document p {
  margin: 0 0 16px;
  color: var(--ac-text-secondary);
  font-size: 16px;
  line-height: 1.75;
}

.legal-document ul,
.legal-document ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--ac-text-secondary);
  font-size: 16px;
  line-height: 1.75;
}

.legal-document li { margin-bottom: 6px; }

.legal-document strong { color: var(--ac-text); font-weight: 700; }

/* Inline links inside body copy - readable, on-brand, and clearly a
   link without the default browser blue. */
.legal-document p a,
.legal-document li a {
  color: var(--ac-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-document p a:hover,
.legal-document li a:hover { color: var(--ac-primary-hover); }

/* The trailing "Back to app" link is an action, not body copy, so it
   gets real button affordance and is separated from the last paragraph
   by a rule. */
.legal-document > a:last-child {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 28px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ac-primary);
  color: var(--ac-on-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.legal-document > a:last-child:hover { background: var(--ac-primary-hover); }

.legal-document > a:last-child:focus-visible {
  outline: 3px solid var(--ac-focus);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .legal-document { border-radius: 18px; }
  .legal-document > a:last-child { width: 100%; justify-content: center; }
}