/* ------------------------------------------------------------------
   /trust — the page that answers the PII objection.

   Almost everything here is reused: .trust-band__marks for the lockups,
   .solution-proof for the ownership claims, .faq-item for the questions,
   .final-cta to close. The only new pieces are the hashed-matching diagram
   and the practices list, because neither exists as a standalone component
   (the landing shows practices as a scrolling marquee, which is decoration
   there and would be unreadable as reference here).
   ------------------------------------------------------------------ */

/* --- Provenance cards ------------------------------------------------
   .solution-proof is a hard repeat(5) grid -- the landing puts five cards in
   it. Three cards left two empty cells and read as an unfinished row. */
.zl-section > .solution-proof {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 56rem) {
  .zl-section > .solution-proof {
    grid-template-columns: 1fr;
  }
}

/* --- Section rhythm and heads ----------------------------------------
   Two problems this fixes. First, --zl-section-space runs to 9.5rem, which
   is right for the landing's narrative scroll and leaves this reference page
   full of dead air. Second, every head was eyebrow/heading/paragraph stacked
   flush left, so thirteen sections read as one long left-hand column with an
   empty right half.

   The head is now two columns -- eyebrow and heading left, supporting line
   right and baseline-aligned -- which is the same shape .build-cases__head
   uses on the landing. Sections with no supporting line simply occupy the
   left column. */
.zl-section {
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

.trust-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: var(--zl-space-4);
  align-items: end;
  max-width: none;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.trust-head .zl-eyebrow { grid-column: 1; }
.trust-head h2 { grid-column: 1; max-width: 20ch; }

.trust-head p {
  grid-column: 2;
  align-self: end;
  max-width: 44ch;
  padding-bottom: .35em;
  color: var(--zl-body);
  font-size: var(--zl-text-md);
  line-height: var(--zl-leading-copy);
}

@media (max-width: 56rem) {
  .trust-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .trust-head h2,
  .trust-head p {
    grid-column: 1;
    padding-bottom: 0;
  }
}

/* --- Compliance lockups ---------------------------------------------
   Same markup as the landing band. Its 2-column grid is right for the narrow
   panel it lives in there; across a full-width section it stranded the four
   marks in two sparse rows of 545px cells. Four across, capped so they stay
   a group rather than drifting to the section edges. */
.zl-section > .trust-band__marks {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 56rem;
}

@media (max-width: 46rem) {
  .zl-section > .trust-band__marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Hashed matching diagram ---------------------------------------- */
/* Three stages: what leaves the customer, what we hold, what comes back.
   The middle stage is the whole argument, so it carries the cobalt accent. */
.hash-flow {
  /* One variable so the arrow always sits in the middle of the real gap --
     previously the gap and the arrow offset were written separately and drifted
     apart at narrow widths. */
  --flow-gap: clamp(1rem, 2vw, 2rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--flow-gap);
  align-items: stretch;
}

.hash-flow__step {
  position: relative;
  display: grid;
  gap: var(--zl-space-4);
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.hash-flow__step--ours {
  border-color: var(--zl-cobalt);
}

.hash-flow__label {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}

.hash-flow__step--ours .hash-flow__label {
  color: var(--zl-cobalt);
}

.hash-flow__value {
  color: var(--zl-ink);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.hash-flow__note {
  color: var(--zl-body);
  font-size: var(--zl-text-sm);
  line-height: var(--zl-leading-copy);
}

/* Arrow between stages, drawn rather than typed so it inherits the line
   colour and disappears cleanly when the grid stacks. */
.hash-flow__step + .hash-flow__step::before {
  position: absolute;
  top: 50%;
  left: calc(var(--flow-gap) / -2);
  translate: -50% -50%;
  color: var(--zl-muted);
  font-size: 1.1rem;
  line-height: 1;
  content: "→";
}

/* The claim the diagram exists to make. */
.hash-claim {
  max-width: 60ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--zl-ink);
  font-size: var(--zl-type-lead-size);
  line-height: var(--zl-leading-lead);
}

/* --- Compliance cards (V7 pattern: badge + what it actually means) --- */
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--zl-line);
  border-left: 1px solid var(--zl-line);
}

.compliance-card {
  display: grid;
  gap: var(--zl-space-4);
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border-right: 1px solid var(--zl-line);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.compliance-card__mark {
  display: grid;
  place-items: center start;
  height: 3.5rem;
}

.compliance-card__mark img,
.compliance-card__mark svg {
  width: auto;
  height: 3.5rem;
}

.compliance-card h3 {
  font-size: var(--zl-type-card-heading-size);
  line-height: var(--zl-leading-card);
}

.compliance-card p {
  color: var(--zl-body);
  font-size: var(--zl-text-sm);
  line-height: var(--zl-leading-copy);
}

/* --- Documentation on request --------------------------------------- */
.doc-request {
  display: grid;
  gap: var(--zl-space-5);
  max-width: 44rem;
}

.doc-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--zl-line);
}

.doc-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zl-space-3);
  padding: var(--zl-space-4) 0;
  border-bottom: 1px solid var(--zl-line);
  color: var(--zl-ink);
  font-size: var(--zl-text-md);
}

.doc-list b {
  font-weight: var(--zl-weight-regular);
}

.doc-list small {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
}

/* --- Spec tables (RTO/RPO, retention, incident tiers) ----------------
   A security reviewer reads these as reference, not prose. Each scrolls
   inside its own container so a wide table never pushes the page sideways
   at 390px. */
.spec-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--zl-line);
  background: var(--zl-surface);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--zl-text-sm);
}

.spec-table th,
.spec-table td {
  padding: var(--zl-space-4) clamp(.85rem, 1.6vw, 1.35rem);
  border-bottom: 1px solid var(--zl-line);
  text-align: left;
  vertical-align: top;
}

.spec-table thead th {
  color: var(--zl-muted-text);
  font-family: var(--zl-font-mono);
  font-size: var(--zl-text-xs);
  font-weight: var(--zl-weight-regular);
  letter-spacing: var(--zl-tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.spec-table tbody th {
  color: var(--zl-ink);
  font-weight: var(--zl-weight-regular);
}

.spec-table td {
  color: var(--zl-body);
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}

.spec-table b {
  color: var(--zl-ink);
  font-family: var(--zl-font-mono);
  font-weight: var(--zl-weight-regular);
  white-space: nowrap;
}

/* --- Policy library --------------------------------------------------- */
.policy-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Was a two-column grid with an internal document ID in the first track.
   The IDs are internal vocabulary and came off the page, so the names now
   run as a single column. */
.policy-list li {
  display: block;
  padding: var(--zl-space-3) 0;
  border-bottom: 1px solid var(--zl-line);
  color: var(--zl-ink);
  font-size: var(--zl-text-sm);
  line-height: var(--zl-leading-copy);
}

/* --- Practices ------------------------------------------------------- */
/* The landing runs these as a marquee. Scrolling text is fine as texture on
   a landing page and wrong on a reference page, so here they are a list. */
.practice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--zl-space-4) clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.practice-list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: var(--zl-space-3);
  color: var(--zl-body);
  font-size: var(--zl-text-md);
  line-height: var(--zl-leading-copy);
}

.practice-list svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .3em;
  fill: none;
  stroke: var(--zl-cobalt);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Rights ------------------------------------------------------------
   Was repeat(auto-fit, minmax(13rem, 1fr)), which fitted five across and
   orphaned the sixth on a row of its own with the longest label wrapping to
   two lines. Six items want a factor of six: three across gives two even
   rows. Bordered cells rather than a hairline rule, matching .compliance-grid,
   so the list has the same weight as the rest of the page. */
.rights-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--zl-line);
  border-left: 1px solid var(--zl-line);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  list-style: none;
}

.rights-list li {
  display: flex;
  align-items: center;
  gap: var(--zl-space-3);
  min-height: 4.5rem;
  padding: var(--zl-space-4) clamp(1rem, 2vw, 1.5rem);
  border-right: 1px solid var(--zl-line);
  border-bottom: 1px solid var(--zl-line);
  background: var(--zl-surface);
  color: var(--zl-ink);
  font-size: var(--zl-text-md);
  line-height: var(--zl-leading-copy);
}

/* Small cobalt tick so each cell reads as a right we honour, not a heading. */
.rights-list li::before {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--zl-cobalt);
  content: "";
}

@media (max-width: 56rem) {
  .rights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 30rem) {
  .rights-list { grid-template-columns: 1fr; }
}

.trust-contact {
  max-width: 60ch;
  color: var(--zl-body);
  font-size: var(--zl-text-md);
  line-height: var(--zl-leading-copy);
}

.trust-contact a {
  color: var(--zl-cobalt);
  text-underline-offset: .2em;
}

@media (max-width: 56rem) {
  /* Stacked, the arrow moves into the gap ABOVE each step. The row gap has to
     clear the glyph: at the previous clamp floor the gap was 16px against a
     ~21px arrow, so it straddled the card border and overlapped the content
     inside. 2.25rem leaves room for the arrow to sit in open space. */
  .hash-flow {
    --flow-gap: 2.25rem;
    grid-template-columns: 1fr;
  }

  .hash-flow__step + .hash-flow__step::before {
    top: calc(var(--flow-gap) / -2);
    left: 50%;
    content: "↓";
  }
}