/* Page-scoped styles extracted from trust.html. */

/* =====================================================================
   /trust.html page-scoped styles (sanctioned per-page pattern).
   Copy source: Marketing/Website/Contracts_Wireframes/page-contracts/03-trust.md (FROZEN).
   Tokens from site-tokens.css; shared components from site.css.
   Class prefix tr-. Zero em-dashes / en-dashes anywhere (site copy law);
   only hyphen, middot (U+00B7), and arrow (U+2192 / rarr) glyphs separate.
   ===================================================================== */

/* ---------- Shared page primitives ---------- */
.tr-hero { padding-block: var(--s-9) var(--s-7); }
.tr-hero .context-label {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
  max-width: 66ch;
}
.tr-hero h1 { max-width: 20ch; margin-bottom: 0; }

.tr-prose > p { max-width: var(--measure-prose); }
.tr-fig { margin: 0; }
.tr-fig svg { display: block; width: 100%; height: auto; }
/* v5: spacing wrapper for figures promoted out of prose (shared .flow /
   .stat-row components used inline inside a pillar). */
.tr-v5fig { margin: var(--s-5) 0; }
.tr-v5fig.flow { flex-wrap: wrap; }
/* v5: the six user controls reuse .tr-tiles for visual parallel with the five
   admin tiles, but need their own column count so six items do not leave an
   orphan under the 5-across rule below. Sits inside a pillar, so 3-across. */
.tr-tiles--six { margin-bottom: 0; }
@media (min-width: 680px) { .tr-tiles--six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tr-tiles--six { grid-template-columns: repeat(3, 1fr); } }

.link-arrow { font-weight: var(--weight-semibold); }

.tr-quote {
  margin: var(--s-7) 0 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 3px solid var(--blue);
  max-width: 54ch;
}
.tr-quote p {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-wrap: balance;
}
.band--ink .tr-quote p { color: var(--on-ink); }

/* ---------- Stage labels: EXACT parenthetical text preserved verbatim,
   never converted to a chip that drops the parentheses ---------- */
.tr-stage {
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
}
.tr-stage--available { color: var(--ok-deep); }
.tr-stage--planned { color: var(--warn-deep); }
.tr-stage--ga { color: var(--ink-muted); }

.tr-status { font-size: var(--fs-14); color: var(--ink-soft); }

/* ---------- Section 1: Evolutionary Framework chain (code-native) ---------- */
.tr-chain-fig { margin-top: var(--s-6); }
.tr-chain { display: flex; flex-direction: column; gap: var(--s-2); align-items: stretch; }
.tr-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-16);
  color: var(--ink-muted);
}
.tr-link.is-first {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-ink);
  box-shadow: var(--shadow-blue);
}
.tr-chain-arrow {
  align-self: center;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  transform: rotate(90deg);
}
@media (min-width: 680px) {
  .tr-chain { flex-direction: row; align-items: stretch; }
  .tr-link { flex: 1; }
  .tr-chain-arrow { transform: none; }
}

/* ---------- Section 2: Privacy Paradox keystone ---------- */
.tr-keystone { max-width: 560px; margin: var(--s-7) auto 0; }
.tr-ks-arrow { stroke: var(--blue-deep); stroke-width: 6; stroke-linecap: round; }
.tr-ks-head { fill: var(--blue-deep); }
.tr-ks-stone { fill: var(--blue); stroke: var(--blue-deep); stroke-width: 2; stroke-linejoin: round; }
.tr-ks-side { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 22px; fill: var(--ink-muted); }
.tr-ks-key { font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: 26px; fill: var(--on-ink); }
.tr-lockline { margin-top: var(--s-7); }

/* ---------- Section 3: Visibility, Confidence, Control ---------- */
.tr-vcc { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.tr-pillar {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.tr-pillar-head h3 { margin: 0 0 var(--s-4); font-size: var(--fs-24); }
.tr-pillar > p { max-width: 64ch; }
.tr-pillar > p + p { margin-top: var(--s-4); }
.tr-pillar > p:last-child { margin-bottom: 0; }

/* Visibility: captures vs never-captures side by side (TRUST-PAGE LAW).
   never-captures = EQUAL OR GREATER visual weight (tint + 2px accent border
   + lift); never collapsed / below the fold / tab-hidden; stays prominent
   when it stacks at 375px. */
.tr-vis-grid { display: grid; gap: var(--s-4); margin-bottom: var(--s-4); }
@media (min-width: 720px) { .tr-vis-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.tr-caplist { border-radius: var(--r-md); padding: var(--s-5); }
.tr-caplist p { margin: 0; font-size: var(--fs-16); color: var(--ink-muted); }
.tr-caplist--captures { background: var(--bg-cream); border: 1px solid var(--line); }
.tr-caplist--never { background: var(--blue-soft); border: 2px solid var(--blue); box-shadow: var(--shadow-card); }
.tr-caplist--captures strong { color: var(--ink); }
.tr-caplist--never strong { color: var(--blue-deep); }

.tr-conf-ctrl { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .tr-conf-ctrl { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.tr-controls { font-weight: var(--weight-medium); color: var(--ink); }

/* ---------- Section 4: manager-view gate + code-rendered toggle ---------- */
.tr-gate { display: grid; gap: var(--s-4); align-items: stretch; margin: var(--s-6) 0 var(--s-6); }
@media (min-width: 760px) { .tr-gate { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.tr-gate-side { border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.tr-gate-user { background: var(--blue-soft); border: 2px solid var(--blue); }
.tr-gate-mgr { background: var(--bg); border: 1px dashed var(--line); }
.tr-gate-tag { font-weight: var(--weight-semibold); color: var(--ink); }
.tr-gate-bar { justify-self: center; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
.tr-gate-bar svg { width: 32px; height: 32px; }
.tr-toggle { display: inline-flex; align-items: center; gap: var(--s-3); }
.tr-toggle-track { width: 46px; height: 26px; border-radius: var(--r-pill); background: var(--blue); position: relative; flex-shrink: 0; }
.tr-toggle-knob { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-ink); box-shadow: var(--shadow-card); }
.tr-toggle-label { font-size: var(--fs-14); font-weight: var(--weight-medium); color: var(--ink-muted); }

/* ---------- Section 5: admin-controls tiles + architectural floor ---------- */
.tr-tiles-lead { font-weight: var(--weight-medium); color: var(--ink); margin-bottom: var(--s-4); }
.tr-tiles { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 680px) { .tr-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tr-tiles { grid-template-columns: repeat(5, 1fr); } }
.tr-tile { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); font-size: var(--fs-14); font-weight: var(--weight-medium); color: var(--ink); }
.tr-tiles-note { margin: 0 0 var(--s-6); }
.tr-floor { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); padding: var(--s-6); }
.tr-floor > p { max-width: 72ch; margin-bottom: var(--s-4); }
.tr-floor-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 680px) { .tr-floor-items { grid-template-columns: repeat(3, 1fr); } }
.tr-floor-items li { font-weight: var(--weight-semibold); color: var(--ink); background: var(--blue-soft); border-radius: var(--r-md); padding: var(--s-4); text-align: center; }

/* ---------- Section 6: one shield feeding five checks (standalone SVG) ---------- */
.tr-shield { max-width: 520px; margin: var(--s-7) auto 0; }
.tr-shield-body { fill: var(--blue); stroke: var(--blue-deep); stroke-width: 3; stroke-linejoin: round; }
.tr-shield-emblem { fill: none; stroke: var(--on-ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tr-connect { fill: none; stroke: var(--line); stroke-width: 2; }
.tr-check-badge { fill: #E4F4ED; stroke: var(--ok); stroke-width: 2; }
.tr-check-mark { fill: none; stroke: var(--ok-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tr-check-label { font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: 24px; fill: var(--ink); }
.tr-shield-cap { max-width: 64ch; margin: var(--s-6) auto 0; }

/* ---------- Section 7: compliance stage table (no badge wall) ---------- */
.tr-table-wrap { overflow-x: auto; margin-top: var(--s-6); -webkit-overflow-scrolling: touch; }
.tr-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tr-table th { text-align: left; font-size: var(--fs-14); font-weight: var(--weight-semibold); color: var(--on-ink); background: var(--ink); padding: var(--s-4) var(--s-5); vertical-align: top; width: 33.33%; }
.tr-table td { padding: var(--s-5); vertical-align: top; border-top: 1px solid var(--line); }
.tr-table td + td { border-left: 1px solid var(--line); }
.tr-table ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); }
.tr-table li { color: var(--ink-muted); }

/* ---------- Section 8: refusal-card (the "No." is the LARGEST type on the
   page: clamp min 4.5rem exceeds the h1 max of 4rem at every viewport) ------- */
.tr-refusal { display: grid; gap: var(--s-6); align-items: center; margin-top: var(--s-6); }
@media (min-width: 820px) { .tr-refusal { grid-template-columns: 1fr 1fr; } }
.tr-ask { margin: 0; }
.tr-ask-label { font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--on-ink-faint); margin-bottom: var(--s-3); }
.tr-ask-quote { margin: 0; border: 1px solid var(--line-on-ink); border-radius: var(--r-lg); padding: var(--s-6); background: rgba(255, 255, 255, 0.04); }
.tr-ask-quote p { margin: 0; color: var(--on-ink-muted); font-size: var(--fs-18); font-style: italic; }
.tr-no { font-size: clamp(4.5rem, 20vw, 12rem); font-weight: var(--weight-bold); line-height: 0.9; letter-spacing: -0.03em; color: var(--on-ink); margin: 0; }
.tr-no-sub { font-size: var(--fs-20); color: var(--on-ink); font-weight: var(--weight-medium); margin: var(--s-3) 0 0; }
.tr-refusal-body { margin-top: var(--s-7); }
.tr-refusal-body p { max-width: 72ch; }

/* ---------- Section 9: the close (Talk to Lucy + subordinate procurement) ---------- */
.tr-close-lede { max-width: 42ch; margin-bottom: var(--s-6); }
.tr-close-cta { gap: var(--s-5); }
.tr-secondary { font-size: var(--fs-16); font-weight: var(--weight-semibold); color: var(--ink-muted); }
.tr-secondary:hover { color: var(--blue); }

/* ---------- FAQ: h3 inside summary inherits the summary type ---------- */
.tr-faq .faq summary h3 { margin: 0; font: inherit; flex: 1; }

/* == TRUST PAGE CSS END == */