/* ---------- trust: the document ---------- */
/* The page's one paper section, for signed commitments: paper ground, ink
   text, ink rules, ink focus and selection, no panels. One composition:
   the launch lock (six numbered steps down a spine into the lock, and the
   runs it holds back) with the rules and the BCG figure beside it.
   Default state is finished (every step done, tracking unlocked); .is-live
   (js/sections/trust.js) adds the pending states that scrolling clears. */

.trust { padding: var(--section-y) 0; background: var(--paper); color: var(--ink); }
.trust ::selection { background: var(--ink); color: var(--paper); }
.trust :focus-visible { outline-color: var(--ink); }
.trust .lead { color: var(--ink-2); }
.trust a { color: inherit; text-decoration-color: var(--ink-line); transition: text-decoration-color 0.2s ease; }
.trust a:hover { text-decoration-color: var(--ink); }

.trust-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "lock rules" "lock stat";
  column-gap: clamp(56px, 8vw, 128px);
  margin-top: clamp(72px, 8vw, 112px);
}
.trust .lock { grid-area: lock; }
.trust .rules { grid-area: rules; }
.trust .trust-stat { grid-area: stat; align-self: end; }

.trust-h { padding-top: 18px; border-top: 1px solid var(--ink); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }

/* ---- the launch lock: numbered steps on a spine ---- */

.lock-steps { position: relative; margin: 36px 0 0; padding: 0; list-style: none; }
/* the spine runs from step 1 into the lock tag: dashed while pending, made
   good (solid) down to the reading line. --made is set by trust.js. */
.lock-steps::before,
.lock-steps::after { content: ""; position: absolute; left: 13.5px; top: 14px; bottom: -30px; width: 1px; }
.lock-steps::before { background-image: linear-gradient(var(--ink-2) 50%, transparent 0); background-size: 1px 6px; }
.lock-steps::after { background: var(--ink); transform: scaleY(var(--made, 1)); transform-origin: top; }

.lock-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 20px; padding-bottom: 28px; }
.lock-step:last-child { padding-bottom: 0; }
.lock-step > :not(.lock-n) { grid-column: 2; }

.lock-n {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.lock-n > span,
.lock-tick { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.45s var(--ease-out); }
.lock-n > span { opacity: 0; }
.lock-tick { width: 14px; height: 14px; color: var(--paper); }

.lock-t { padding-top: 1px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); transition: color 0.45s var(--ease-out); }

/* pending, while the reader has not passed the step yet */
.lock.is-live .lock-step:not(.is-done) .lock-n { background: var(--paper); border-color: var(--ink-2); color: var(--ink-2); }
.lock.is-live .lock-step:not(.is-done) .lock-n > span { opacity: 1; }
.lock.is-live .lock-step:not(.is-done) .lock-tick { opacity: 0; transform: scale(0.6); }
.lock.is-live .lock-step:not(.is-done) .lock-t { color: var(--ink-2); }

/* step 2: what is never collected */
.never { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; justify-content: start; gap: 8px 40px; margin: 14px 0 4px; padding: 0; list-style: none; }
.never li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.never li::before,
.never li::after { content: ""; position: absolute; left: 1px; top: calc(0.725em - 0.6px); width: 11px; height: 1.25px; background: var(--ink); }
.never li::before { transform: rotate(45deg); }
.never li::after { transform: rotate(-45deg); }

/* step 3: the one line about promises shipdock.ai never makes for the owner */
.lock-note { max-width: 40em; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ---- the lock: state tag, gate and the runs it holds back ---- */

.lock-gate { margin-top: 30px; }
.lock-state {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 5px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
  transition: background-color 0.35s var(--ease-out) 0.12s, border-color 0.35s var(--ease-out) 0.12s, color 0.35s var(--ease-out) 0.12s;
}
.lock-state span { min-width: 17.9ch; }
.lock-state svg { width: 12px; height: 12px; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lock-shackle { transform: translateY(-2.5px); transition: transform 0.45s var(--ease-out) 0.12s; }
.lock.is-live:not(.is-open) .lock-state { background: var(--paper); border-color: var(--ink-2); color: var(--ink-2); }
.lock.is-live:not(.is-open) .lock-shackle { transform: none; }

/* the runs field: a WebGL canvas (trust.js) behind an HTML gate at --gate.
   The gate has one segment per step: dashed while pending, solid when the
   step is done, closed into one solid line when the lock opens. */
.lock-runs { --gate: 28%; position: relative; height: 128px; margin-top: 14px; }
.lock-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lock-bar { position: absolute; top: 0; bottom: 0; left: var(--gate); display: flex; flex-direction: column; gap: 4px; width: 1px; background: var(--ink); transition: background-color 0.4s ease 0.12s; }
.lock-seg { flex: 1; background: var(--ink); transition: background-color 0.35s ease; }
.lock.is-live:not(.is-open) .lock-bar { background: transparent; }
.lock.is-live .lock-seg:not(.is-done) { background: linear-gradient(var(--ink-2) 50%, transparent 0) 0 0 / 1px 6px; }

/* without WebGL (or without JS) a still picture stands in for the runs:
   the queue behind the gate, and runs in threes along the lanes past it
   (an SVG tile on the scene's 11px lane pitch; its dots are --ink) */
.trust.no-webgl .lock-runs::before,
.trust.no-webgl .lock-runs::after,
html:not(.js) .trust .lock-runs::before,
html:not(.js) .trust .lock-runs::after { content: ""; position: absolute; top: 3.5px; bottom: 3.5px; }
.trust.no-webgl .lock-runs::before,
html:not(.js) .trust .lock-runs::before { left: 0; width: calc(var(--gate) - 4px); background: radial-gradient(circle, var(--ink-2) 0.9px, transparent 1.4px) right top / 7px 11px; opacity: 0.55; }
.trust.no-webgl .lock-runs::after,
html:not(.js) .trust .lock-runs::after { left: calc(var(--gate) + 6px); right: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='77'%3E%3Cpath d='M303.5 5.5h0M321.5 5.5h0M334.4 5.5h0M418.7 5.5h0M435.0 5.5h0M12.5 5.5h0M169.1 5.5h0M182.2 5.5h0M200.2 5.5h0M6.1 16.5h0M21.3 16.5h0M35.0 16.5h0M140.0 16.5h0M157.8 16.5h0M175.3 16.5h0M250.3 16.5h0M268.4 16.5h0M281.3 16.5h0M365.8 16.5h0M381.1 16.5h0M401.0 16.5h0M373.4 27.5h0M387.2 27.5h0M401.9 27.5h0M66.3 27.5h0M80.7 27.5h0M93.7 27.5h0M237.5 27.5h0M256.4 27.5h0M272.0 27.5h0M61.4 38.5h0M78.2 38.5h0M94.4 38.5h0M238.3 38.5h0M254.8 38.5h0M265.9 38.5h0M376.0 38.5h0M390.1 38.5h0M409.0 38.5h0M366.8 49.5h0M380.3 49.5h0M400.3 49.5h0M63.0 49.5h0M80.9 49.5h0M94.7 49.5h0M178.5 49.5h0M190.3 49.5h0M207.9 49.5h0M306.4 49.5h0M325.8 49.5h0M337.2 49.5h0M125.5 60.5h0M141.3 60.5h0M160.0 60.5h0M290.7 60.5h0M310.3 60.5h0M327.7 60.5h0M413.4 60.5h0M427.1 60.5h0M2.8 60.5h0M337.4 71.5h0M349.7 71.5h0M361.4 71.5h0M67.8 71.5h0M84.6 71.5h0M99.3 71.5h0M197.4 71.5h0M217.0 71.5h0M230.9 71.5h0' stroke='%23070809' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left top / 440px 77px; opacity: 0.7; -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent); mask-image: linear-gradient(90deg, #000 35%, transparent); }

/* ---- the rules ---- */

.rule-list { display: grid; gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.rule-list li { position: relative; padding-left: 21px; line-height: 1.45; color: var(--ink); }
.rule-list li::before { content: ""; position: absolute; left: 0; top: calc(0.725em - 2.5px); width: 5px; height: 5px; background: var(--ink); }

/* ---- the BCG figure ---- */

.trust-stat { margin: 64px 0 0; }
.trust-stat p { max-width: 22em; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.stat-range { display: block; margin-bottom: 10px; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 480; line-height: 1; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.trust-stat figcaption { margin-top: 12px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.45; }
.trust-stat figcaption a { color: var(--ink-2); }

/* touch: 44px hit areas without changing how the links look. The inline
   link in step 4 gets a transparent box; base.css boxes citation links 12px
   out, and this 16px line needs 14px. */
@media (pointer: coarse), (max-width: 860px) {
  .lock-t a { position: relative; }
  .lock-t a::after { content: ""; position: absolute; inset: -10px -4px; }
  .trust-stat figcaption a::after { inset: -14px -6px; }
}

@media (max-width: 899px) {
  .trust-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "lock" "rules" "stat"; }
  .trust .rules { margin-top: 72px; }
  .trust .trust-stat { align-self: start; }
}

@media (max-width: 560px) {
  .lock-step { column-gap: 16px; padding-bottom: 24px; }
  .never { grid-template-rows: none; grid-auto-flow: row; gap: 6px; }
  .lock-runs { --gate: 30%; height: 104px; }
}