/* ---------------------------------------------------------------------------
 * IMPORTED DOCUMENTS, IN THE HOUSE STYLE.
 *
 * /policies/privacy-policy, /policies/terms-of-service and
 * /policies/trust-center carry fixed text: it is the company's legal and
 * security wording and must read here exactly as it reads on vijil.ai. So the
 * house style is applied in CSS and the words are never touched. The only
 * thing the importer removes is Webflow's spacer elements — paragraphs and
 * headings whose whole content is a zero-width joiner, 82 of them across the
 * three — and those carry no characters. Spacing is this file's job.
 *
 * THE THREE DOCUMENTS DISAGREE ON HEADING LEVELS. The terms use <h3> for a
 * section; the privacy policy uses <h4> with <h5> beneath it; the trust centre
 * uses <h3>. This file styled only h1–h3, which left the privacy policy's ten
 * section headings and sixteen sub-headings at browser defaults — and a
 * default <h5> is 0.83em, so its headings rendered SMALLER than the paragraphs
 * underneath them. h2, h3 and h4 now share one section treatment and h5 is the
 * sub-heading, so the three documents read alike whatever markup they arrived
 * with.
 *
 * MEASURE. Body text is 17.5px and the column is 640px, which is the cap the
 * measure gate holds every other page to. It was 16px in a 760px column here —
 * about 95 characters a line, where nothing else on the site exceeds 68.
 * ------------------------------------------------------------------------- */

.vj-imported {
  box-sizing: border-box;     /* without it the padding ADDS to max-width and
                                 the column runs 704px, over the 640 cap */
  max-width: 704px;           /* 640 of text between 32px gutters */
  margin: 0 auto;
  padding: 53px 32px 112px;
}

/* --------------------------------------------------------------- the title */
.vj-imported h1 {
  font-size: 40px; line-height: 1.12; font-weight: 600;
  letter-spacing: -0.01em; color: var(--vj-ink);
  margin: 0 0 12px; text-wrap: balance;
}

/* The line under the title on the policies is a date pair, not prose. It is
 * set as the document's metadata so the reader's eye starts at the first real
 * sentence instead of at a revision history.
 *
 * NOT .lead. On the imported landing pages the element after <h1> is the actual
 * introduction, so this rule was drawing a metadata rule under it and pushing
 * 36px of air below — the document treatment applied to prose it was written to
 * separate from. `.lead` sets only font and colour, so it never overrode the
 * border, margin or padding this rule contributes. */
.vj-imported h1 + p:not(.lead) {
  font-size: 15px; line-height: 1.6; color: var(--vj-ink-muted);
  margin: 0 0 36px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.12);
}

/* ------------------------------------------------------------- the sections */
.vj-imported h2,
.vj-imported h3,
.vj-imported h4 {
  font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--vj-ink);
  margin: 40px 0 14px; padding-top: 24px;
  border-top: 1px solid rgba(16, 24, 40, 0.12);
  text-wrap: balance;
}
.vj-imported h5 {
  font-size: 17.5px; line-height: 1.4; font-weight: 600; color: var(--vj-ink);
  margin: 28px 0 8px;
}
/* A heading arriving straight after another is a sub-head, not a new section,
 * so it does not get a second rule across the column. */
.vj-imported :is(h2, h3, h4) + :is(h2, h3, h4, h5) { border-top: 0; padding-top: 0; margin-top: 18px; }

/* ----------------------------------------------------------------- the prose */
.vj-imported p,
.vj-imported li {
  font-size: 17.5px; line-height: 1.65; color: var(--vj-ink-body);
}
.vj-imported p { margin: 0 0 18px; }
.vj-imported .lead { font-size: 19px; line-height: 1.6; color: var(--vj-ink); }
.vj-imported strong { color: var(--vj-ink); font-weight: 600; }
.vj-imported a { color: var(--vj-brand); text-underline-offset: 2px; }
.vj-imported a:hover { color: var(--vj-brand-hover); }

/* Webflow gives each bullet its own <ul>, so a list of eight is eight lists.
 * Consecutive ones close up into something that reads as one. */
.vj-imported ul, .vj-imported ol { margin: 0 0 18px; padding-left: 24px; }
.vj-imported li { margin: 0 0 8px; }
.vj-imported ul + ul, .vj-imported ol + ol { margin-top: -14px; }
/* The trust centre nests each description under its label as a one-item list.
 * That is Webflow's markup for a definition, not a second list, so the inner
 * marker goes and the description sits under the label it belongs to. */
.vj-imported li > ul { list-style: none; margin: 6px 0 0; padding-left: 0; }

/* ----------------------------------------------------------------- the rest */
.vj-imported img { max-width: 100%; height: auto; border-radius: 10px; }
.vj-imported table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.vj-imported td, .vj-imported th {
  border: 1px solid rgba(16, 24, 40, 0.12); padding: 10px 12px;
  font-size: 15px; vertical-align: top;
}
.vj-imported .dl { margin-top: 32px; }
.vj-imported .dl a {
  display: inline-block; padding: 12px 24px; border-radius: 999px;
  /* --vj-surface, NOT #fff. The brand flips to #6ea8e8 in dark and a hardcoded
     white sits on it at 2.49:1; the token flips with it and holds 6.69:1. Light
     is unchanged, because --vj-surface IS #ffffff there. Copilot, #246. */
  background: var(--vj-brand); color: var(--vj-surface); text-decoration: none; font-weight: 600;
}

@media (max-width: 767px) {
  .vj-imported { padding: 40px 20px 72px; }
  .vj-imported h1 { font-size: clamp(28px, 8.5vw, 40px); }
  .vj-imported :is(h2, h3, h4) { font-size: 19px; margin-top: 32px; padding-top: 20px; }
}