/* Yours alone (scenes/trust.html, trust.js): a sealed computer that only your key opens.
   The page as written (no JS, reduced motion) is the opened-by-you state. trust.js adds .is-live and locks
   it; .is-open is the computer opened by your key, .is-shredded once the setup password is gone. The
   door, desk, keys, bolts and tags are moved by trust.js with inline transform and opacity. */
.sc-trust { position: relative; overflow: hidden; }
.sc-trust .tr-split { display: flex; align-items: center; justify-content: space-between; gap: 64px; padding: var(--section, 130px) var(--gutter); }

/* The copy */
.sc-trust .tr-copy { flex: 0 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.sc-trust .mono-muted { color: #9a9a98; }
.sc-trust .h2 { font-size: clamp(48px, 4.6vw, 70px); white-space: nowrap; }
.sc-trust .ficon { background: #151515; box-shadow: inset 0 0 0 1px #2a2a28; }
.sc-trust .features p { color: #a8a8a4; }
.sc-trust .tr-burn { color: #fff; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sc-trust.is-live:not(.is-shredded) .tr-burn { color: inherit; text-decoration-color: transparent; }
.sc-trust .tr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-trust .tr-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 9px; border-radius: 999px; background: #151515; box-shadow: inset 0 0 0 1px #262624; font-weight: 500; font-size: 14px; line-height: 18px; color: #dcdcd8; }
.sc-trust .tr-chips svg { flex-shrink: 0; }

/* The scene: room above for the taped slip, room on the right for the keys. */
.sc-trust .tr-scene { position: relative; flex: 1 1 520px; min-width: 0; max-width: 640px; padding: 40px 130px 0 0; }
.sc-trust .tr-monitor { position: relative; z-index: 0; }
/* The screen's light on the room, when it is open. */
.sc-trust .tr-monitor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 39px; z-index: -1; border-radius: 22px; box-shadow: 0 0 90px -4px rgba(233, 255, 59, 0.2); transition: opacity 0.6s ease; }
.sc-trust.is-live:not(.is-open) .tr-monitor::before { opacity: 0; transition-duration: 0.3s; }
.sc-trust .tr-bezel { position: relative; padding: 12px 12px 26px; border-radius: 22px; background: #1a1a19; box-shadow: inset 0 0 0 1px #2c2c2a; }
.sc-trust .tr-bezel::before { content: ""; position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #343432; }
.sc-trust .tr-screen { position: relative; aspect-ratio: 16 / 11; overflow: hidden; isolation: isolate; border-radius: 10px; background: #0e0e0d; }
.sc-trust .tr-stand { display: flex; flex-direction: column; align-items: center; }
.sc-trust .tr-stand i { display: block; }
.sc-trust .tr-stand i:first-child { width: 15%; max-width: 74px; height: 30px; background: #161615; box-shadow: inset 1px 0 0 #262624, inset -1px 0 0 #262624; }
.sc-trust .tr-stand i:last-child { width: 34%; max-width: 170px; height: 9px; border-radius: 6px 6px 3px 3px; background: #1a1a19; box-shadow: inset 0 0 0 1px #2c2c2a; }

/* Your computer, lit: the team at work. */
.sc-trust .tr-desk { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #f7f7f5; color: var(--ink); }
.sc-trust .tr-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-trust .tr-bar-title { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.08em; color: var(--muted); }
.sc-trust .tr-only { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--lime); font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; transform-origin: 100% 50%; }
.sc-trust .tr-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sc-trust .tr-rows li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 20px -14px rgba(0, 0, 0, 0.3); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25); transition-delay: calc(var(--i, 0) * 80ms + 220ms); }
.sc-trust.is-live:not(.is-open) .tr-rows li { opacity: 0; transform: translateY(10px); transition-duration: 0.15s; transition-delay: 0s; }
.sc-trust .tr-rows img { width: 38px; height: 22px; flex-shrink: 0; object-fit: contain; -webkit-user-drag: none; }
.sc-trust .tr-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sc-trust .tr-who b { font-weight: 700; font-size: 13px; line-height: 16px; }
.sc-trust .tr-who span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; line-height: 16px; color: var(--muted); }
.sc-trust .tr-st { flex-shrink: 0; padding: 3px 6px; border-radius: 5px; background: var(--lime); font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 9.5px; line-height: 12px; letter-spacing: 0.08em; }

/* The door: swings open on its left hinge (trust.js). Hidden in the page as written: it is open. */
.sc-trust .tr-vault { position: absolute; inset: 0; perspective: 1100px; }
.sc-trust .tr-door { position: absolute; inset: 0; visibility: hidden; opacity: 0; background: #151514; box-shadow: inset 0 0 0 1px #2a2a28, inset 0 0 0 9px #151514, inset 0 0 0 10px #232321; transform-origin: 0 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sc-trust.is-live .tr-door { visibility: visible; }
.sc-trust .tr-hinge { position: absolute; left: 2.5%; width: 2.6%; height: 13%; border-radius: 3px; background: #2c2c2a; }
.sc-trust .tr-hinge:first-child { top: 16%; }
.sc-trust .tr-hinge:nth-child(2) { bottom: 16%; }
.sc-trust .tr-bolt { position: absolute; right: 3.5%; width: 8%; height: 6%; border-radius: 3px; background: #3a3a38; }
.sc-trust .tr-bolt:nth-of-type(3) { top: 25%; }
.sc-trust .tr-bolt:nth-of-type(4) { top: 47%; }
.sc-trust .tr-bolt:nth-of-type(5) { top: 69%; }
.sc-trust .tr-locked { position: absolute; left: 0; right: 0; top: 11%; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.12em; color: #7a7a76; }
.sc-trust .tr-dial { position: absolute; left: 50%; top: 54%; height: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.sc-trust .tr-dial-lit { opacity: 0; transition: opacity 0.2s ease; }
.sc-trust .tr-door.is-turned .tr-dial-lit { opacity: 1; }
/* Where a key's tip goes: the keyhole, measured by trust.js. */
.sc-trust .tr-hole { position: absolute; left: 50%; top: 54%; width: 0; height: 0; }
.sc-trust .tr-nope { position: absolute; left: 0; right: 0; top: 80%; z-index: 2; width: max-content; margin: 0 auto; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 20px; letter-spacing: -0.01em; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--ink), 0 14px 30px -12px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; }

/* The setup password slip, taped to the top of the screen. As written it is already destroyed. */
.sc-trust .tr-slip { position: absolute; left: 7%; top: -30px; z-index: 2; width: 118px; height: 54px; transform: rotate(-5deg); pointer-events: none; }
.sc-trust .tr-slip-face { position: absolute; left: 0; top: 0; width: 118px; height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 8px 10px 6px; border-radius: 3px; background: #fff; color: var(--ink); box-shadow: 0 10px 18px -10px rgba(0, 0, 0, 0.7); }
.sc-trust .tr-slip-label { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 8.5px; line-height: 10px; letter-spacing: 0.08em; color: var(--muted); }
.sc-trust .tr-slip-code { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 15px; line-height: 18px; letter-spacing: 0.02em; }
.sc-trust .tr-tape { position: absolute; left: 50%; top: -7px; width: 46px; height: 15px; margin-left: -23px; background: rgba(233, 255, 59, 0.82); transform: rotate(3deg); }
.sc-trust .tr-slip-stub { position: absolute; left: 50%; top: 0; width: 42px; height: 10px; margin-left: -21px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 55%, 90% 100%, 78% 50%, 64% 100%, 50% 45%, 36% 100%, 22% 55%, 10% 100%, 0 50%); opacity: 0; }
.sc-trust .tr-slip-gone { position: absolute; left: 86px; top: -6px; white-space: nowrap; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.08em; color: var(--lime); opacity: 0; transition: opacity 0.4s ease 0.2s; }
.sc-trust .tr-slip.is-shredding > .tr-slip-face, .sc-trust .tr-slip.is-gone > .tr-slip-face { visibility: hidden; }
.sc-trust .tr-slip.is-shredding .tr-slip-stub, .sc-trust .tr-slip.is-gone .tr-slip-stub, .sc-trust .tr-slip.is-gone .tr-slip-gone { opacity: 1; }
.sc-trust .tr-strip { position: absolute; top: 0; overflow: hidden; }

/* The key ring: on a peg on the right of the screen. */
.sc-trust .tr-ring { position: absolute; left: 100%; top: 12%; z-index: 3; width: 130px; height: 230px; }
.sc-trust .tr-ring > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sc-trust .tr-ring-front { z-index: 1; }
.sc-trust .tr-peg-down { display: none; }
/* Each key hangs from its hole (24, 16 in its own px) on the ring. */
.sc-trust .tr-slot { position: absolute; top: 39.3px; width: 48px; height: 160px; }
.sc-trust .tr-slot-ours { left: 27.5px; }
.sc-trust .tr-slot-yours { left: 54.5px; }
.sc-trust .tr-key { position: absolute; left: 0; top: 0; display: block; width: 48px; height: 160px; padding: 0; border: 0; border-radius: 14px; background: none; cursor: grab; transform-origin: 24px 16px; pointer-events: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.sc-trust .tr-key-ours { transform: rotate(12deg); }
.sc-trust .tr-key-yours { transform: rotate(-12deg); }
.sc-trust .tr-key svg { display: block; pointer-events: none; }
.sc-trust .tr-key .tr-hit { pointer-events: all; }
.sc-trust .tr-key.is-held { cursor: grabbing; }
.sc-trust .tr-key:focus { outline: none; }
.sc-trust .tr-key:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.sc-trust .tr-key-name { position: absolute; left: 50%; top: 142px; width: max-content; transform: translateX(-50%); font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 10px; line-height: 14px; letter-spacing: 0.08em; color: #a3a39f; pointer-events: auto; transition: opacity 0.2s ease; }
.sc-trust .tr-key-yours .tr-key-name { color: var(--lime); }
.sc-trust .tr-key.is-away .tr-key-name { opacity: 0; }

/* Under the screen: what to do, or lock it again. */
.sc-trust .tr-controls { display: flex; align-items: center; min-height: 48px; margin-top: 16px; }
.sc-trust .tr-hint { font-family: "Geist Mono", ui-monospace, monospace; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: #8a8a87; }
.sc-trust .tr-lock { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; font-weight: 600; font-size: 14px; line-height: 18px; cursor: pointer; transition: transform 0.15s ease; }
.sc-trust .tr-lock:hover { transform: translateY(-1px); }
.sc-trust .tr-lock:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.sc-trust .tr-hint[hidden], .sc-trust .tr-lock[hidden] { display: none; }
.sc-trust .tr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tablets: copy, then the scene under it. */
@media (max-width: 1179.98px) {
  .sc-trust .tr-split { flex-direction: column; align-items: stretch; gap: 48px; }
  .sc-trust .tr-copy { flex: none; max-width: 640px; }
  .sc-trust .tr-scene { flex: none; width: 100%; max-width: 620px; align-self: center; }
}

/* Phones: the screen takes the width and the keys hang under it, on the right, beside the hint. */
@media (max-width: 640px) {
  .sc-trust .tr-split { gap: 36px; }
  .sc-trust .h2 { font-size: clamp(40px, 12.6vw, 52px); }
  .sc-trust .tr-chips li { font-size: 13.5px; }
  .sc-trust .tr-scene { padding: 40px 0 0; }
  .sc-trust .tr-ring { left: auto; right: 2%; top: 100%; }
  .sc-trust .tr-peg-side { display: none; }
  .sc-trust .tr-peg-down { display: inline; }
  .sc-trust .tr-stand i:first-child { width: 56px; height: 26px; }
  .sc-trust .tr-stand i:last-child { width: 84px; }
  .sc-trust .tr-controls { align-items: flex-start; min-height: 170px; margin-top: 18px; padding-right: 46%; }
  .sc-trust .tr-desk { gap: 8px; padding: 10px 12px; }
  .sc-trust .tr-rows li { gap: 8px; padding: 4px 8px 4px 6px; }
  .sc-trust .tr-who span { font-size: 12px; }
}

/* Touch screens: no hover state left stuck on after a tap. */
@media (hover: none) {
  .sc-trust .tr-lock:hover { transform: none; }
}

/* Reduced motion: the opened-by-you still, and the keys switch it without moving (trust.js). */
@media (prefers-reduced-motion: reduce) {
  .sc-trust .tr-rows li, .sc-trust .tr-key-name, .sc-trust .tr-slip-gone, .sc-trust .tr-monitor::before, .sc-trust .tr-dial-lit, .sc-trust .tr-lock { transition: none; }
}