/* Long-form pages: disclaimer, accessibility, security, 404.

   Policy pages are the ones people skim in a hurry, usually because something
   already worries them. So: a narrow measure, real spacing between sections,
   and headings you can find by scrolling fast. Nothing decorative. */

.prose {
  max-width: 68ch;
  padding-block: 40px 88px;
}

.prose h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 18px;
}

.prose-lede {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--navy);
  margin: 0 0 14px;
}

.prose-updated {
  font-size: 12.5px;
  color: var(--control);
  margin: 0 0 8px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.prose h2 {
  font-size: 21px;
  letter-spacing: -.015em;
  line-height: 1.3;
  /* The gap above a heading is what makes a policy page skimmable: it has to
     read as "new section", not "next paragraph". */
  margin: 44px 0 12px;
}

.prose p,
.prose li {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
}

.prose p { margin: 0 0 14px; }

.prose ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.prose li { margin-bottom: 9px; }
.prose li::marker { color: var(--control); }

.prose strong { color: var(--navy); font-weight: 650; }

/* :not(.button) matters. ".prose a" outranks ".button-primary" on
   specificity, so without it the call-to-action on the 404 page rendered as
   blue text on a blue button — an invisible label on the one control the page
   exists to offer. */
.prose a:not(.button) {
  color: var(--blue);
  text-underline-offset: 2px;
}
.prose a:not(.button):hover { color: var(--blue-hover); }
.prose a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── breadcrumbs ──────────────────────────────────────────────────────────
   Also marked up in JSON-LD on each page, so the trail can appear in search
   results instead of a bare URL. */

.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  font-size: 12.5px;
}
.crumbs li { color: var(--control); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--control); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

/* ── 404 ──────────────────────────────────────────────────────────────────
   A dead end is a bad place to leave someone with a back button and nothing
   else, so this one offers the four destinations people actually want. */

.prose-404 { padding-block: 64px 96px; }
.prose-404 .section-kicker { color: var(--blue); }

.lost-links {
  list-style: none;
  margin: 26px 0 32px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lost-links a {
  display: block;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.lost-links a:hover { border-color: var(--blue); transform: translateY(-1px); }
.lost-links strong { display: block; font-size: 15.5px; color: var(--navy); margin-bottom: 3px; }
.lost-links span { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .lost-links a:hover { transform: none; }
}

@media (max-width: 680px) {
  .prose { padding-block: 28px 64px; }
  .prose h2 { margin-top: 36px; }
}