/* =============================================================================
   QRench — privacy policy + terms of use (the product page has its own
   assets/product.css, in the app's dark skin).
   Loaded after ../_shared/app-page.css (which supplies the KChannels frame and
   .wrap). The canvas wears the main site's own skin: pure white, ink
   text, logo teal + purple, Outfit for headings, Source Serif 4 for text
   (mirrors src/assets/site.css).
   ============================================================================ */

:root {
  --app-bg:        #ffffff;
  --app-bg-2:      #ffffff;
  --app-surface:   #ffffff;
  --app-text:      #1f1f1f;
  --app-muted:     #5e5e5e;
  --app-rule:      #e3e3e3;
  --app-accent:    #008080;
  --app-accent-2:  #660066;
  --app-on-accent: #ffffff;
  --app-glow:      transparent;

  --app-font-display: 'Outfit', system-ui, sans-serif;
  --app-font-body:    'Source Serif 4', Georgia, serif;

  --q-teal-h:   #009999;
  --q-purple-h: #800080;
}

body { font-size: 17px; line-height: 1.6; }
/* Line the content up with the frame's brand mark (frame: 1200px, 40px gutter) */
main.wrap { max-width: 1200px; padding: 0 40px; }

/* ── Page head: QRench mark, title, standfirst ─────────────── */
.q-head { padding: 64px 0 40px; max-width: 900px; }
.q-mark { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.q-mark img { width: 56px; height: 56px; display: block; border-radius: 12px; }
.q-mark span {
  font-family: var(--app-font-display); font-weight: 800; font-size: 32px;
  line-height: 1; letter-spacing: -0.02em; color: var(--app-accent);
}
a.q-mark:hover span { color: var(--q-teal-h); }
.q-head h1 {
  font-family: var(--app-font-display); font-weight: 800;
  font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--app-accent-2);
}
.q-dek { font-size: 22px; line-height: 1.45; max-width: 32em; margin-top: 22px; }
.q-effective { font-family: var(--app-font-display); font-weight: 600; font-size: 15px; color: var(--app-muted); margin-top: 16px; }

/* ── Boxed panel: "The short version" ── */
.q-box {
  max-width: 760px; border: 2px solid var(--app-accent); border-radius: 10px;
  padding: 28px 32px 30px; font-size: 19px; line-height: 1.6;
}
.q-box h2 {
  font-family: var(--app-font-display); font-weight: 700; font-size: 24px;
  line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 12px;
}
.q-box p + p { margin-top: 0.8em; }
.q-box ul { padding-left: 1.3em; }
.q-box li + li { margin-top: 0.45em; }
.q-box li::marker { color: var(--app-accent); }
.q-box a { color: var(--app-accent-2); text-underline-offset: 0.18em; }

/* ── Running text ──────────────────────────────────────────── */
.q-body { max-width: 760px; padding: 16px 0 88px; font-size: 19px; line-height: 1.7; }
.q-body > section { margin-top: 56px; }
.q-body h2 {
  font-family: var(--app-font-display); font-weight: 800; font-size: 22px; line-height: 1.25;
  border-top: 4px solid var(--app-text); padding-top: 16px; margin-bottom: 14px;
}
.q-body h3 { font-family: var(--app-font-display); font-weight: 700; font-size: 19px; margin: 1.4em 0 0.3em; }
.q-body p + p, .q-body p + ul, .q-body ul + p, .q-body .q-table + p { margin-top: 0.8em; }
.q-body ul { padding-left: 1.3em; }
.q-body li + li { margin-top: 0.4em; }
.q-body li::marker { color: var(--app-accent); }
.q-body strong { font-weight: 700; }
.q-body a { color: var(--app-accent-2); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.q-body a:hover, .q-box a:hover { color: var(--q-purple-h); }

/* Permissions table */
.q-table { overflow-x: auto; }
.q-table table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.55; }
.q-table th {
  font-family: var(--app-font-display); font-weight: 700; font-size: 15px; text-align: left;
  padding: 8px 16px 8px 0; border-bottom: 2px solid var(--app-text);
}
.q-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--app-rule); vertical-align: top; }
.q-table td:first-child { font-family: var(--app-font-display); font-weight: 600; width: 36%; }

/* Teal focus rings, as on the main site */
a:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 640px) {
  main.wrap { padding: 0 20px; }
  .q-head { padding: 40px 0 32px; }
  .q-mark img { width: 44px; height: 44px; border-radius: 10px; }
  .q-mark span { font-size: 26px; }
  .q-dek { font-size: 19px; }
  .q-box { padding: 22px 20px 24px; font-size: 18px; }
  .q-box h2 { font-size: 21px; }
  .q-body { font-size: 18px; }
  .q-body > section { margin-top: 44px; }
  .q-table td:first-child { width: auto; }
}