/* Prose pages: policies, terms, and the Ramz product page.
   Reuses every token from styles.css. Adds no colour of its own. */

.doc {
  max-width: 760px;
  margin-inline: auto;
  padding-top: 72px;
  padding-bottom: 120px;
}

.doc-head {
  padding-bottom: 34px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--rule);
}

.doc-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.doc-eyebrow .tiny-square {
  width: 7px;
  height: 7px;
  background: var(--accent);
  flex: none;
}

.doc h1 {
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.12;
  font-weight: 450;
  letter-spacing: -0.04em;
  margin: 0;
}

.doc-meta {
  margin-top: 26px;
  display: grid;
  gap: 7px;
  font-size: 14px;
  color: var(--muted);
}

.doc-meta strong {
  color: var(--ink);
  font-weight: 550;
}

.doc h2 {
  font-size: 26px;
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 52px 0 16px;
}

.doc h3 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 34px 0 12px;
}

.doc p,
.doc li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  text-wrap: pretty;
  /* Package names and permission identifiers are longer than a phone is wide. */
  overflow-wrap: anywhere;
}

.doc p {
  margin: 0 0 17px;
}

.doc ul,
.doc ol {
  margin: 0 0 17px;
  padding-left: 22px;
}

.doc li {
  margin-bottom: 9px;
}

.doc li::marker {
  color: var(--muted);
}

/* Underlined, not merely coloured: a link inside a paragraph that is told
   apart by hue alone fails WCAG 1.4.1, and axe is right to say so. */
.doc a,
.doc-note a,
.doc-summary a,
.site-footer .footer-bottom a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc a:hover,
.doc-note a:hover,
.doc-summary a:hover,
.site-footer .footer-bottom a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

/* The back-link is a standalone control, not a link inside prose. */
.doc .text-link {
  text-decoration: none;
}

.doc strong {
  font-weight: 600;
}

.doc em {
  font-style: italic;
}

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--soft);
  padding: 2px 5px;
  border-radius: 3px;
}

/* The plain-language summary that opens every policy. */
.doc-summary {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  padding: 26px 28px 10px;
  margin: 0 0 12px;
}

.doc-summary h2 {
  margin-top: 0;
  font-size: 20px;
}

.doc-summary p:last-child {
  margin-bottom: 17px;
}

/* A point a careful reader would otherwise have to discover. */
.doc-note {
  border: 1px solid var(--control-border);
  border-radius: 5px;
  padding: 20px 22px 4px;
  margin: 0 0 20px;
  background: var(--light);
}

.doc-note > *:first-child {
  margin-top: 0;
}

.doc-table-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  font-size: 13px;
  line-height: 1.65;
  border-bottom: 1px solid var(--rule);
}

.doc th {
  font-weight: 600;
  color: var(--ink);
  background: var(--soft);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.doc tbody tr:last-child td {
  border-bottom: 0;
}

.doc-back {
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

/* ---- The Ramz product page ---- */

/* ---------- The wayfinding strip ---------- */

.page-chrome {
  padding-block: 0 4px;
}

/* The document already opens with a rule and an eyebrow, so with a breadcrumb
   above it the 72px gap reads as a dropped section rather than a margin. */
.page-chrome + main > .doc,
.page-chrome + main.doc,
.page-chrome + main > .product-hero {
  padding-top: 34px;
}

/* ---------- The enforced-promise panel on a product page ---------- */

/* The same two-part claim the home page cards make — a promise, and the check
   that fails the build when it stops being true — restated where a visitor who
   arrived on the product page rather than the landing page will see it. */
.doc-gate {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  margin: 0 0 44px;
}

.doc-gate .gate-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 9px;
}

.doc-gate .gate-label .icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  flex: none;
}

.doc-gate p:last-child {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
}

/* A live product says so in the accent, the same signal the home page uses. */
.product-status.status-live-text {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Product pages (/ramz, /brightkidz, /zadvest, /ramz/care) ----------
   Named .ramz-* until 2026-09-16, when BrightKidz Hub and ZadVest got pages of
   their own on this site. They were never Ramz-specific; only the one page that
   existed was. A product now has the same shape whether or not it also lives on
   a domain of its own: status, name, promise, what it is, what it refuses, the
   check that enforces the refusal, availability, support. */
.product-hero {
  max-width: 760px;
  margin-inline: auto;
  padding-top: 72px;
  padding-bottom: 20px;
}

.product-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--control-border);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 24px;
}

.product-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.product-hero h1 {
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
  font-weight: 450;
  letter-spacing: -0.04em;
  margin: 0 0 24px;
}

.product-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 58ch;
}

.product-sub {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

.product-refusals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  margin: 42px 0 0;
  max-width: 760px;
  margin-inline: auto;
}

.product-refusals > div {
  background: var(--paper);
  padding: 24px 22px;
}

.product-refusals h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.product-refusals p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 680px) {
  .doc,
  .product-hero {
    padding-top: 52px;
  }

  .doc {
    padding-bottom: 84px;
  }

  .doc h2 {
    font-size: 23px;
    margin-top: 42px;
  }

  .doc-summary {
    padding: 22px 20px 8px;
  }
}

/* ---------- Capability brief (/brief) ---------- */

/* The row above the document that explains how to keep a copy. The instruction
   is plain text and always there; the button is revealed by script, so a reader
   without JavaScript is told what to do rather than shown a control that does
   nothing. */
.brief-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 34px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--soft);
}

.brief-save p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 54ch;
}

/* ---------- Print ---------- */

/* Printing a prose page is a real thing people do with a policy and the whole
   point of the capability brief, so the page is laid out for paper rather than
   left to the browser's guess. Chrome drops backgrounds by default, which is
   why nothing here relies on a fill to carry meaning. */
@page {
  size: A4;
  margin: 16mm;
}

@media print {
  /* Force the light palette: a reader who happened to be in dark mode would
     otherwise print an ivory page as a black rectangle. */
  html,
  html[data-theme="dark"] {
    background: #fff;
  }

  body,
  html[data-theme="dark"] body {
    background: #fff;
    color: #232622;
  }

  /* Screen furniture: navigation, the theme control, the save row and the back
     link are all things you cannot use on paper. */
  .site-header,
  .skip-link,
  .brief-save,
  .doc-back,
  .page-chrome,
  .footer-links,
  #theme-toggle,
  #menu-toggle {
    display: none !important;
  }

  .doc {
    max-width: none;
    padding: 0;
    font-size: 10.5pt;
  }

  .doc-head {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1.5pt solid #232622;
  }

  .doc h1 {
    font-size: 22pt;
    margin: 0;
  }

  .doc h2 {
    font-size: 11pt;
    margin: 16px 0 6px;
    break-after: avoid;
  }

  .doc p,
  .doc li {
    font-size: 10pt;
    line-height: 1.5;
    color: #232622;
  }

  .doc p {
    margin-bottom: 8px;
  }

  .doc li {
    margin-bottom: 4px;
    break-inside: avoid;
  }

  .doc-summary,
  .doc-note {
    padding: 10px 12px;
    margin: 12px 0;
    border: 0.75pt solid #d6d8d0;
    border-left: 2pt solid #28734f;
    background: transparent;
    break-inside: avoid;
  }

  .doc-meta {
    gap: 4px;
  }

  .doc-meta span,
  .doc-eyebrow {
    font-size: 8.5pt;
  }

  /* A URL is useless as a hyperlink on paper, but the address itself matters —
     these are the two ways to reach us. Kept as text, in ink, not underlined
     into noise. */
  .doc a,
  .doc a:visited {
    color: #232622;
    text-decoration: none;
    font-weight: 600;
  }

  .site-footer {
    padding: 8px 0 0;
    margin-top: 14px;
    border-top: 0.75pt solid #d6d8d0;
  }

  .footer-bottom span {
    font-size: 8pt;
    color: #5b6058;
  }
}