/* ==========================================================================
   TRUST.CSS — /trust and /integrations page layer · Tier 3
   Loads after brand.css and overrides nothing outside these two pages'
   own components. Reuses brand tokens only: no new colours, no new type
   roles, hairlines only, radius ladder 2 / 6 / 10.

   These are reference pages. People scan them for "SOC 2" and "SAP";
   motion here is nearly invisible by intent.
   ========================================================================== */

/* Quieter reveals than the marketing pages: 24px travel, not 40px.
   motion.css already double-gates behind @supports + prefers-reduced-motion,
   with a visible base state. */
[data-reveal] { --reveal-distance: 24px; }

/* --------------------------------------------------------------------------
   1. PAGE HERO ADDITIONS — the two-CTA row under the lede
   -------------------------------------------------------------------------- */
.ph-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.ph-note { margin-top: var(--sp-2); }
@media (min-width: 900px) {
  .page-hero__grid .ph-actions { grid-column: 1 / 8; }
  .page-hero__grid .ph-note { grid-column: 1 / 8; }
}

/* --------------------------------------------------------------------------
   2. SECTION SHELL — hairline-topped bands, alternating ground
   -------------------------------------------------------------------------- */
.tsec { padding-block: var(--sp-16); border-top: var(--rule) solid var(--border); }
@media (min-width: 900px) { .tsec { padding-block: var(--sp-20); } }
.tsec--surface { background: var(--surface); }
.tsec .sec-head { margin-bottom: var(--sp-8); }
@media (min-width: 900px) { .tsec .sec-head { margin-bottom: var(--sp-10); } }
.tsec .sec-head .lede { max-width: 52ch; }

.note { font-size: var(--t-sm); color: var(--muted); max-width: 62ch; }
.note a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) { .note a:hover { text-decoration-color: var(--accent); } }
.note--after-table { margin-top: var(--sp-5); }
.strip-tag { margin-top: var(--sp-4); }
.strip-note { margin-top: var(--sp-3); }

/* One primary CTA mid-page, with its bracketed aside */
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-10); }

/* --------------------------------------------------------------------------
   3. THE TEXT LOCKUP — the SOC 2 mark, typographic by design. Hairline,
   never a drawn seal.
   -------------------------------------------------------------------------- */
.lockup {
  border: var(--rule) solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  max-width: 22rem;
  margin-top: var(--sp-3);
}
.lockup__mark {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
}
.lockup-note { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   4. ARTIFACT LEDGER — group the artifacts: scope, body, jurisdiction,
   document link. Rows, not cards.
   -------------------------------------------------------------------------- */
.artifacts { border-top: var(--rule) solid var(--border); }
.artifact {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-bottom: var(--rule) solid var(--border);
}
@media (min-width: 900px) {
  .artifact {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    column-gap: var(--gutter);
  }
}
.artifact h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  margin-top: var(--sp-2);
}
.artifact__body p { font-size: var(--t-sm); color: var(--muted); max-width: 52ch; }
.artifact__meta { display: grid; gap: var(--sp-3); align-content: start; }
.artifact__meta dd { font-size: var(--t-sm); color: var(--fg); margin-top: 2px; }
.artifact__meta dd .tag { display: inline; }
.artifact__meta a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) { .artifact__meta a:hover { text-decoration-color: var(--accent); } }

/* --------------------------------------------------------------------------
   5. DIRECTORY TABLES — genuinely tabular. The wrapper (.table-scroll,
   brand.css) scrolls inside itself at narrow widths; the page never
   scrolls sideways.
   -------------------------------------------------------------------------- */
.dt { width: 100%; min-width: 640px; border-collapse: collapse; }
.dt--narrow { min-width: 480px; }
.dt caption {
  text-align: left;
  padding: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: var(--rule) solid var(--border);
}
.dt th, .dt td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--rule) solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: var(--t-sm);
}
.dt thead th {
  font-family: var(--font-mono);
  font-size: var(--t-tag);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.dt tbody th { font-weight: 500; color: var(--fg); }
.dt tbody td { color: var(--muted); }
.dt tbody tr:last-child th, .dt tbody tr:last-child td { border-bottom: none; }
.dt .mono { font-size: 0.8125rem; }
.dt a {
  color: var(--fg);
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: text-decoration-color var(--duration-fast) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) { .dt a:hover { text-decoration-color: var(--accent); } }

/* Directory groups: bracket index, heading, table, note */
.dir-group { margin-top: var(--sp-10); }
.dir-group > .tag { margin-bottom: var(--sp-2); }
.dir-group h3 { margin-bottom: var(--sp-4); }
.dir-group .note { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   6. FACT LEDGER — data ownership. Bracket key left, plain answer right.
   -------------------------------------------------------------------------- */
.facts { border-top: var(--rule) solid var(--border); }
.facts > div {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-bottom: var(--rule) solid var(--border);
}
@media (min-width: 720px) {
  .facts > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gutter); }
}
.facts dt { align-self: start; }
.facts dd strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.facts dd p { font-size: var(--t-sm); color: var(--muted); max-width: 56ch; margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   7. DAY-ONE LEDGER — the numbered steps beside the zero
   -------------------------------------------------------------------------- */
.day-lede { margin-top: var(--sp-6); max-width: 34ch; }
#day-one .huge { margin-top: var(--sp-4); margin-bottom: var(--sp-4); }
#day-one h2 { margin-bottom: var(--sp-6); }
.steps-ledger { border-top: var(--rule) solid var(--border); }
.steps-ledger li {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-bottom: var(--rule) solid var(--border);
}
.steps-ledger strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.steps-ledger p:not(.tag) { font-size: var(--t-sm); color: var(--muted); max-width: 56ch; }

/* --------------------------------------------------------------------------
   8. SHORT ANSWER SECTIONS — documents, badges
   -------------------------------------------------------------------------- */
.doc-note { margin-top: var(--sp-4); }
.doc-tag { margin-top: var(--sp-5); }


/* --------------------------------------------------------------------------
   MOBILE TARGETS
   The document link in each artifact row is a standalone action, not a link
   inside a sentence, so WCAG 2.5.8's inline exception does not cover it. It
   measured 18px tall. Give it a real hit area without changing how it reads.
   -------------------------------------------------------------------------- */
.artifact__meta dd a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: var(--sp-2);
}