/* ============================================================
   Policy pages — AI, Security, Privacy, Cookie (src/*-policy.html).

   Long-form reading on a white ground under the shared menubar and
   footer. Deliberately plain: these pages are read for what they say,
   so the measure, the line height and the tables do the work, and the
   kit only supplies the type, the chip and the colours.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #fff;
  color: var(--cube-black, #000);
  font-family: var(--cube-font-primary, "Poppins", system-ui, sans-serif);
}

.policy {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(110px, 15vh, 160px) 16px clamp(72px, 10vh, 120px);
  font-size: 16px;
  line-height: 1.7;
}

.policy-head { margin-bottom: clamp(28px, 4vh, 44px); }
.policy-head .cube-badge { margin-bottom: 18px; }
.policy-head h1 {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.policy-meta {
  font-family: var(--cube-font-secondary, "Anonymous Pro", ui-monospace, monospace);
  font-weight: 700;
  font-size: 14px;
  color: var(--cube-gray-600, #5b5b5b);
}

/* While a policy is a draft it says so, first, in a box nobody can miss.
   Approving a policy means deleting this box, not restyling it. */
.policy-draft {
  border: 2px solid #000;
  background: var(--cube-yellow, #ffd100);
  box-shadow: 6px 6px 0 #000;
  padding: 20px 22px;
  margin-bottom: clamp(36px, 5vh, 52px);
  font-size: 15px;
}
.policy-draft strong { display: block; font-size: 17px; margin-bottom: 6px; }
.policy-draft ul { margin: 10px 0 0 20px; }
.policy-draft li + li { margin-top: 4px; }

.policy h2 {
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  margin: clamp(36px, 5vh, 48px) 0 12px;
}
.policy h3 { font-size: 17px; font-weight: 700; margin: 22px 0 6px; }
.policy p + p, .policy p + ul, .policy ul + p { margin-top: 12px; }
.policy .policy-table + p { margin-top: 16px; }
.policy ul { margin: 10px 0 0 22px; }
.policy li + li { margin-top: 6px; }
.policy a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--cube-green, #00ed71); }
.policy a:hover { text-decoration-color: currentColor; }
.policy code {
  font-family: var(--cube-font-secondary, "Anonymous Pro", ui-monospace, monospace);
  font-size: .95em;
  background: var(--cube-gray-100, #f3f3f3);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-word;
}

/* Tables scroll inside their own box on a phone, never the page. */
.policy-table { overflow-x: auto; margin-top: 14px; border: 2px solid #000; }
.policy table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; min-width: 520px; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--cube-gray-200, #e2e2e2); }
.policy th { background: #000; color: #fff; font-weight: 600; }
.policy tr:last-child td { border-bottom: 0; }

/* Something the approver has to fill in or confirm, inline in the text. */
.policy .tbc { background: var(--cube-yellow, #ffd100); padding: 0 4px; font-weight: 600; }