/* The trust page.
 *
 * Read by a security reviewer, not browsed, so it is set as a document: one
 * column, generous measure, headings that survive being skimmed for the two
 * questions everybody actually arrives with (where does our data go, and how do
 * we get it out). No cards, no tiles - a reviewer copying a paragraph into a
 * procurement form should get a paragraph.
 */

.trust-page {
  background: var(--canvas, var(--bg));
}

.trust-topbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 780px;
  padding: 20px 24px;
}

.trust-main {
  margin: 0 auto;
  max-width: 780px;
  padding: 8px 24px 64px;
}

.trust-main h1 {
  font-size: 1.9rem;
  margin: 0 0 12px;
  text-wrap: balance;
}

.trust-lede {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 8px;
}

.trust-updated {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 8px;
}

.trust-section {
  border-top: 1px solid var(--line, #d6e0dd);
  margin-top: 28px;
  padding-top: 24px;
}

.trust-section h2 {
  font-size: 1.15rem;
  margin: 0 0 10px;
}

.trust-section h3 {
  font-size: 0.95rem;
  margin: 20px 0 8px;
}

.trust-section p {
  line-height: 1.65;
  margin: 0 0 12px;
  /* Around 65 characters at this size - the point where a reviewer stops
     losing their place between lines. */
  max-width: 68ch;
}

.trust-list {
  display: grid;
  gap: 7px;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 68ch;
  padding-left: 20px;
}

/* Wide content scrolls inside itself; the page never scrolls sideways. */
.trust-table-scroll {
  margin: 0 0 12px;
  overflow-x: auto;
}

.trust-table {
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 520px;
  width: 100%;
}

.trust-table th,
.trust-table td {
  border-bottom: 1px solid var(--line, #d6e0dd);
  padding: 9px 12px 9px 0;
  text-align: left;
  vertical-align: top;
}

.trust-table th {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trust-note {
  color: var(--muted);
  font-size: 0.86rem;
}

/* The gaps - no SOC 2, no SSO, no export API. Marked rather than buried,
   because a reviewer who finds an omission themselves stops believing the rest
   of the page, and one who is told plainly does not. */
.trust-gap {
  background: var(--panel-strong, #f4f7f6);
  border-left: 3px solid #b4342c;
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
}

@media (max-width: 600px) {
  .trust-main h1 {
    font-size: 1.55rem;
  }
}

/* Links, which this page had none of.
 * -------------------------------------------------------------------------
 * Reported as "the legal pages don't look like the rest of the brand", and the
 * first diagnosis was that they were missing landing-refresh.css. They are, but
 * that is not what caused this: grepping that file for a link rule turns up
 * `.landing-nav nav a` and `.language-switcher a`, and neither selector exists
 * on a .trust-page. Adding the stylesheet would have changed nothing visible
 * and the symptom would have survived the fix.
 *
 * The real cause is simpler and worse: NO stylesheet in this page's chain sets
 * a link colour at all - not styles.css, not design-refresh.css, not this file,
 * not dark-mode.css - so every inline link fell through to the browser's own
 * blue underline. On the one page a procurement reviewer, a security assessor
 * and Google's OAuth reviewer read most carefully.
 *
 * --accent-brand rather than --accent: this is a document, and the brand green
 * reads as deliberate where the near-black would read as body text that happens
 * to be clickable. The underline is kept - in running prose it is what marks a
 * link as a link without relying on colour alone, which also keeps it legible
 * to a reader who cannot separate the two.
 */
.trust-main a {
  color: var(--accent-brand, #14635a);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.trust-main a:hover,
.trust-main a:focus-visible {
  text-decoration-thickness: 2px;
}

/* The topbar link is chrome rather than prose, so it takes the page's own text
 * colour and earns its underline on hover instead of carrying one always. */
.trust-topbar a {
  color: inherit;
  text-decoration: none;
}

.trust-topbar a:hover,
.trust-topbar a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}