/* ==========================================================================
   TRUST
   A reference document, not a pitch. Every row is a key and a stated fact,
   because the reader is an IT lead checking claims rather than a buyer being
   persuaded. Two rules hold the page together:

   1. Constraints are set in the same material as the commitments. The
      abuse-monitoring window and the out-of-Canada processing note use
      .tr-note, which sits INSIDE its section rather than in a footnote.
      A trust page that hides its exceptions is not one.
   2. Nothing on this page states a certification Vecreal does not hold.
      .tr-st carries a status word only. Its one emphasised variant, .is-met,
      is for a standard that is COMPLIED WITH (a privacy statute, which has no
      certification path), never for one that is certified. There is no
      "certified" variant to reach for, and adding one is a copy decision made
      after an assessment completes, not a CSS decision.
   ========================================================================== */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.tr-hero{padding-block:clamp(96px,13vh,168px) clamp(64px,8vh,104px)}
.tr-hero h1{max-width:14ch;font-size:clamp(44px,6.2vw,84px);line-height:1.0;letter-spacing:-.04em}
.tr-hero h1 .c{color:var(--clay-display)}
.tr-hero .lead{max-width:52ch;margin-top:clamp(22px,2.4vw,30px)}

.tr-stamp{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(26px,3vw,38px);
  width:max-content;max-width:100%;
  border:var(--hair) solid var(--line);border-radius:var(--r-2);overflow:hidden}
.tr-stamp div{display:flex;flex-direction:column;gap:5px;padding:11px 16px;
  border-left:var(--hair) solid var(--line)}
.tr-stamp div:first-child{border-left:0}
.tr-stamp .k{font-family:var(--mono);font-size:var(--mono-m2-size);
  font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);
  text-transform:uppercase;color:var(--clay-lit)}
.tr-stamp .v{font-family:var(--mono);font-size:var(--mono-m3-size);
  letter-spacing:var(--mono-m3-track);color:var(--ink);font-variant-numeric:tabular-nums}

/* ── Section head ──────────────────────────────────────────────────────── */
/* Small mono labels take --clay-brand, the light-context tier. --clay-display
   is for display cuts; at 9.5px on a light plate it measured 4.4:1 and failed. */
.tr-head{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,22px);
  padding-bottom:clamp(16px,1.8vw,22px);margin-bottom:clamp(24px,2.8vw,36px);
  border-bottom:var(--hair) solid var(--line)}
.tr-head .no{flex:none;font-family:var(--mono);font-size:var(--mono-m3-size);
  font-weight:var(--mono-m3-index);letter-spacing:var(--mono-m3-track);
  color:var(--clay-brand);font-variant-numeric:tabular-nums}
.tr-head h2{font-size:clamp(24px,2.5vw,34px);font-weight:var(--w-display);
  line-height:1.12;letter-spacing:-.028em;color:var(--ink)}
.band.night .tr-head .no{color:var(--clay-lit)}

/* ── Definition rows: the page's primary unit ──────────────────────────── */
.tr-dl{border:var(--hair) solid var(--line);border-radius:var(--r-3);
  background:var(--plate-face);box-shadow:var(--lift-sm);overflow:hidden}
.band.night .tr-dl{background:var(--bg-1)}
.tr-d{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(14px,2vw,32px);padding:clamp(16px,1.8vw,22px) clamp(18px,2.2vw,28px);
  border-top:var(--hair) solid var(--line)}
.tr-d:first-child{border-top:0}
.tr-d dt{font-family:var(--mono);font-size:var(--mono-m2-size);
  font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);
  text-transform:uppercase;color:var(--clay-brand);line-height:1.5;padding-top:2px}
.band.night .tr-d dt{color:var(--clay-lit)}
.tr-d dd{font-size:var(--t-body);line-height:var(--lh-body);color:var(--mute)}
.tr-d dd b{font-weight:var(--w-strong);color:var(--ink)}
/* The first block in a dd is a bare text node, so p+p never matches. Any <p>
   in a dd is therefore a continuation and takes the gap. */
.tr-d dd>p{margin-top:10px}

/* ── The constraint note. Sits inside its section, never in a footnote. ──
   Reads as a recessed panel, not a flagged one. A clay left-edge band was the
   first attempt and it was wrong twice over: colour on the container says
   "warning" when the content is ordinary disclosure, and the clay rule puts
   colour on the label, never on the frame. The mono label carries the mark; the
   panel just sits a step below the plate around it. */
.tr-note{display:flex;gap:16px;margin-top:clamp(18px,2vw,24px);
  padding:clamp(15px,1.7vw,20px) clamp(17px,2vw,24px);
  border:var(--hair) solid var(--line);border-radius:var(--r-2);
  background:var(--bg-2);box-shadow:inset 0 1px 2px rgba(20,22,28,.05)}
.tr-note .nk{flex:none;font-family:var(--mono);font-size:var(--mono-m2-size);
  font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);
  text-transform:uppercase;color:var(--clay-brand);padding-top:3px}
.band.night .tr-note .nk{color:var(--clay-lit)}
.tr-note p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--mute)}
.tr-note p b{font-weight:var(--w-strong);color:var(--ink)}

/* ── Table: sub-processors ─────────────────────────────────────────────── */
.tr-tw{overflow-x:auto;border:var(--hair) solid var(--line);border-radius:var(--r-3);
  background:var(--plate-face);box-shadow:var(--lift-sm)}
.band.night .tr-tw{background:var(--bg-1)}
.tr-tbl{width:100%;min-width:640px;border-collapse:collapse;text-align:left}
.tr-tbl th{font-family:var(--mono);font-size:var(--mono-m2-size);
  font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);
  text-transform:uppercase;color:var(--clay-brand);
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.9vw,22px);
  border-bottom:var(--hair) solid var(--line);vertical-align:bottom}
.band.night .tr-tbl th{color:var(--clay-lit)}
.tr-tbl td{font-size:var(--t-body);line-height:var(--lh-body);color:var(--mute);
  padding:clamp(14px,1.6vw,18px) clamp(16px,1.9vw,22px);
  border-top:var(--hair) solid var(--line);vertical-align:top}
.tr-tbl tbody tr:first-child td{border-top:0}
.tr-tbl td b{font-weight:var(--w-strong);color:var(--ink)}

/* ── Status rows. No "certified" variant exists here on purpose. ───────── */
.tr-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(12px,1.4vw,16px)}
.tr-si{display:flex;flex-direction:column;gap:9px;
  padding:clamp(17px,2vw,23px);border:var(--hair) solid var(--line);
  border-radius:var(--r-2);background:var(--plate-face)}
.band.night .tr-si{background:var(--bg-1)}
.tr-si .n{font-size:var(--t-ui);font-weight:var(--w-strong);letter-spacing:-.012em;color:var(--ink)}
.tr-si .d{font-size:var(--t-cap);line-height:1.55;color:var(--mute)}
.tr-st{display:inline-flex;align-items:center;gap:7px;width:max-content;
  font-family:var(--mono);font-size:var(--mono-m2-size);
  font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);
  text-transform:uppercase;color:var(--mute)}
.tr-st::before{content:"";width:6px;height:6px;border-radius:50%;
  border:1.5px solid currentColor}
/* .is-met is for a standard that is MET, never for one that is certified. A law
   is complied with; a certification is awarded after an assessment. The filled
   dot marks the first and must never be attached to the second. */
.tr-st.is-met{color:var(--good)}
.tr-st.is-met::before{background:currentColor}

/* ── A note that belongs under a block rather than inside one ──────────── */
.tr-fnote{margin-top:clamp(14px,1.6vw,18px);max-width:78ch;
  font-size:var(--t-cap);line-height:1.6;color:var(--mute)}
.tr-fnote b{font-weight:var(--w-strong);color:var(--ink)}

/* ── Change log ────────────────────────────────────────────────────────── */
.tr-log{display:flex;flex-direction:column}
.tr-lr{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:clamp(14px,2vw,28px);padding:clamp(14px,1.6vw,18px) 0;
  border-top:var(--hair) solid var(--line)}
.tr-lr:first-child{border-top:0}
.tr-lr .dt{font-family:var(--mono);font-size:var(--mono-m3-size);
  letter-spacing:var(--mono-m3-track);color:var(--mute);font-variant-numeric:tabular-nums}
.tr-lr .wh{font-size:var(--t-body);line-height:var(--lh-body);color:var(--mute)}

/* ── Contact ───────────────────────────────────────────────────────────── */
.tr-ct a{color:var(--accent);border-bottom:var(--hair) solid var(--clay-line)}
.tr-ct a:hover{border-bottom-color:currentColor}

@media(max-width:760px){
  .tr-d,.tr-lr{grid-template-columns:1fr;gap:8px}
  .tr-d dt{padding-top:0}

  /* The sub-processor table collapses rather than scrolling. Processing
     location is the column a reader came for, and in a horizontal scroller it
     is the one that sits off-screen with no affordance saying so. */
  .tr-tw{overflow-x:visible}
  .tr-tbl{min-width:0}
  .tr-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    clip-path:inset(50%);white-space:nowrap}
  .tr-tbl tr{display:block;border-top:var(--hair) solid var(--line);
    padding:clamp(14px,1.6vw,18px) clamp(16px,1.9vw,22px)}
  .tr-tbl tbody tr:first-child{border-top:0}
  .tr-tbl td{display:block;padding:0;border-top:0}
  .tr-tbl td+td{margin-top:7px}
  .tr-tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;
    font-family:var(--mono);font-size:var(--mono-m2-size);
    font-weight:var(--mono-m2-weight);letter-spacing:var(--mono-m2-track);
    text-transform:uppercase;color:var(--clay-brand)}
  .band.night .tr-tbl td[data-l]::before{color:var(--clay-lit)}
  .tr-stamp{width:100%}
  .tr-stamp div{flex:1 1 auto;min-width:50%;border-left:0;
    border-top:var(--hair) solid var(--line)}
  .tr-stamp div:first-child,.tr-stamp div:nth-child(2){border-top:0}
  .tr-stamp div:nth-child(even){border-left:var(--hair) solid var(--line)}
}