/* Long-form prose, for the four legal pages.
 *
 * The design system is built for landing pages: it styles components, and every
 * page that uses it sets its own type inline. It has no notion of a document
 * you read top to bottom, which is exactly what a privacy policy is.
 *
 * This sheet is the smallest thing that fills that gap. It uses only design
 * system tokens — no new colours, no new type scale — so these pages cannot
 * drift away from the rest of the site.
 *
 * Loaded AFTER the eleven design system sheets and only on these four pages.
 * The eleven keep their exported order untouched: that order decides the
 * cascade, styles.css re-imports the other ten, and reset.css ends up applying
 * last. Nothing here is inserted among them.
 *
 * Scoped to .prose-page so it cannot reach a landing page by accident.
 */

.prose-page {
  padding: clamp(72px, 10vw, 120px) clamp(24px, 5vw, 40px) clamp(56px, 8vw, 96px);

  /* Manrope ships a standard ligature that turns "(c)" into ©, and browsers
     enable standard ligatures by default. On a marketing page that never comes
     up. On this one the text reads "Legal obligation — Art 6(1)(c)", and it was
     rendering as "Art 6(1)©": a citation of the UK GDPR pointing at a paragraph
     that does not exist. The HTML was always correct — nothing in a text diff,
     a link check or a spell check can see this, because it happens in the font.
     Not calt and not dlig; both were tested and neither changed the result. */
  font-variant-ligatures: none;
}

/* One measure for the whole document, centred. ~70 characters is the readable
   range for continuous text; the design system's --measure is tuned for the
   shorter paragraphs on a landing page.
   Applied to the WRAPPERS, not to a list of text tags.

   It used to be the list — h1..h4, p, ul, ol, blockquote, hr, header, table —
   and that is an allow-list, which means everything not on it fell out of the
   column and sat against the raw left edge of the page. On 2026-08-18 that was
   ten elements across the four legal pages: every standalone link, including
   the "Request Your Free SEO Audit" call to action, and the four step numbers
   in the complaints procedure, each one stranded alone in the margin while its
   paragraph sat centred a third of the way across the screen.

   The cause is upstream of the CSS. These pages were converted from a Tailwind
   build, and the conversion dropped the wrapper elements that carried the
   layout classes, so markup that was <li><span>1</span><p>…</p></li> arrived
   here as a bare span followed by a bare p, siblings with nothing holding them
   together. An allow-list cannot survive that; constraining the container can,
   because a child cannot escape a box that is already the right width. */
.prose-page > header,
.prose-page > section {
  max-width: 70ch;
  margin-inline: auto;
}

/* Tables carry columns rather than a sentence, so the reading measure is the
   wrong constraint for them: they may use the full width the section has. */
.prose-page table {
  width: 100%;
}

/* ---------------------------------------------------------------- headings */

/* The eyebrow above each h1 — "LEGAL DOCUMENT", "PHILOSOPHY". Its capitals came
   from a Tailwind class, so without this rule the words on the page change. */
.prose-page header span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--micro-size);
  font-weight: 700;
  letter-spacing: var(--micro-track);
  text-transform: uppercase;
  /* --text-muted is 2.85:1 against this page's background, and this is small
     uppercase text, which is the hardest thing on the page to read. WCAG AA
     wants 4.5:1 for it; --text-secondary gives 5.46:1 and is still visibly a
     quieter grey than the body copy, which is all the eyebrow was ever asking
     for. Measured, not guessed — see verify-legal-layout. */
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.prose-page h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 88%;
  /* Sentence case, as these pages have always rendered. The landing pages
     uppercase their h1; a legal document titled "PRIVACY POLICY" in display
     caps reads as marketing, and more to the point it would be a change. */
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: var(--display-lg-line);
  letter-spacing: var(--display-lg-track);
  color: var(--text-primary);
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.prose-page h2 {
  font-family: var(--font-core);
  font-weight: 800;
  /* Uppercase, as these sections have always rendered: "01. WHAT WE COLLECT". */
  text-transform: uppercase;
  font-size: var(--head-md-size);
  line-height: var(--head-md-line);
  letter-spacing: var(--head-track);
  color: var(--text-primary);
  /* Generous space above, tight below: a heading belongs to what follows it. */
  margin: clamp(44px, 6vw, 64px) auto clamp(12px, 1.5vw, 16px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--border-hairline);
}

.prose-page h3 {
  font-family: var(--font-core);
  font-weight: 800;
  font-size: var(--head-sm-size);
  line-height: var(--head-sm-line);
  letter-spacing: var(--head-track);
  color: var(--text-primary);
  margin: clamp(28px, 3.5vw, 36px) auto clamp(8px, 1vw, 12px);
}

/* ------------------------------------------------------------------- text */

.prose-page p {
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-secondary);
  margin: 0 auto clamp(16px, 2vw, 20px);
}

.prose-page strong {
  font-weight: 800;
  color: var(--text-primary);
}

.prose-page ul,
.prose-page ol {
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--text-secondary);
  margin: 0 auto clamp(16px, 2vw, 20px);
  padding-left: 1.25em;
}

/* reset.css sets list-style:none on ul site-wide, for the nav. A document needs
   its markers back, or a list of what we store reads as loose sentences. */
.prose-page ul {
  list-style: disc;
}
.prose-page ol {
  list-style: decimal;
}

.prose-page li {
  margin-bottom: 0.5em;
}
.prose-page li::marker {
  color: var(--text-muted);
}

.prose-page a {
  color: var(--green-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose-page a:hover {
  color: var(--green-700);
  text-decoration-thickness: 2px;
}

.prose-page hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: clamp(36px, 5vw, 52px) auto;
}

.prose-page code {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  color: var(--text-primary);
}

/* The first heading needs no rule above it — it opens the document. */
.prose-page h1 + h2,
.prose-page > h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* ------------------------------------------------- standalone links & steps

   Everything below exists because these pages were converted from a Tailwind
   build and the conversion kept the text and threw away the elements that
   carried the layout. What arrived was a bare <a> where a button had been, a
   bare <span> where a numbered badge had been, and an email address followed by
   a loose text node where a contact block had been. The words were perfect,
   which is exactly why every text-level check passed. */

/* A link that stands on its own, rather than sitting inside a sentence. Given
   an arrow so it reads as somewhere to go, and a hit area tall enough to press:
   a bare inline link in the middle of a page is a 19px target. */
/* NOTE ON SPECIFICITY. The two classes below are written as `.prose-page .x`,
   not `.x`. The generic rule above, `.prose-page a`, is a class plus a type
   selector and therefore outranks a lone class — so the first version of the
   call to action rendered green text on a green background and shipped as a
   blank pill. Anything here that styles a link has to be at least this
   specific, or it silently loses to that rule. */
.prose-page .prose-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--green-200, currentColor);
  color: var(--green-700, currentColor);
}
.prose-page .prose-link::after {
  content: "→";
  transition: transform 160ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.prose-page .prose-link:hover::after {
  transform: translateX(3px);
}
.prose-page .prose-link:hover {
  border-bottom-color: currentColor;
}

/* A call to action. "Request Your Free SEO Audit" was rendering as a plain blue
   link against the left edge of the page — the only thing on these four pages
   asking the reader to do something, and it looked like a footnote. */
.prose-page .prose-cta {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  background: var(--green-600, #1a8a4a);
  color: var(--white, #fff);
  font-weight: 800;
  text-decoration: none;
  border-radius: var(--radius-pill, 999px);
  box-shadow: var(--shadow-card, 0 10px 24px -8px rgba(22, 35, 58, 0.25));
}
.prose-page .prose-cta::after {
  content: "→";
}
.prose-page .prose-cta:hover {
  background: var(--green-700, #147a40);
  color: var(--white, #fff);
}

/* Email plus location, which arrived as a link and a loose text node. */
.prose-page .prose-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.prose-page .prose-contact span {
  color: var(--text-secondary);
  font-size: var(--body-sm-size);
}

/* The complaints procedure. Four steps that arrived as four numbers and four
   paragraphs, siblings with nothing joining them, so each number sat alone in
   the margin beside a paragraph it no longer belonged to. */
.prose-page .prose-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 16px;
}
.prose-page .prose-steps li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}
.prose-page .prose-steps li > p {
  margin: 0;
  max-width: none;
}
.prose-page .prose-step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-accent-soft, #e8f6f0);
  color: var(--green-700, #147a40);
  font-family: var(--font-core);
  font-weight: 800;
  font-size: var(--body-sm-size);
  font-variant-numeric: tabular-nums;
}