/* The home page below its first screen: the header, the sections and the footer.
   The first screen's own styles are in index.html, with the palette and the type. */

:root {
  /* Where the glare streak sits on every metal face. The pointer moves it (home.js). */
  --gx: 34%;
  --metal: linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--gx) - 12%), var(--m-glare) calc(var(--gx) + 4%), rgba(255, 255, 255, 0) calc(var(--gx) + 18%)), linear-gradient(180deg, var(--m-hi), var(--m-lo));
  --metal-lip: inset 0 1.5px 0 rgba(255, 255, 255, .32), inset 0 -1.5px 0 rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .55);
  --face: linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--gx) - 16%), rgba(255, 255, 255, .055) var(--gx), rgba(255, 255, 255, 0) calc(var(--gx) + 16%)), linear-gradient(180deg, #1f1f23, #0e0e10);
  --face-lip: inset 0 1.5px 0 rgba(255, 255, 255, .24), inset 0 -1.5px 0 rgba(0, 0, 0, .65), 0 2px 10px rgba(0, 0, 0, .5);
  --plinth: radial-gradient(60% 80% at 22% 8%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #3b3b41 0%, #222226 34%, #0f0f11 68%, #1e1e22 100%);
  --hair: rgba(242, 242, 238, .07);
  --out: cubic-bezier(.16, 1, .3, 1);
}

/* Smooth scrolling is for links within a page. A page reached from another one goes straight to the
   section its address names, so home.js turns this on only once the page has loaded: started any
   earlier, the scroll is cut short by the change of page and the visitor is left at the top. */
html.smooth { scroll-behavior: smooth; }
/* Moving between the home page and the trust page, the page cross-fades and the header stays put. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-header; }
h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; text-decoration: none; transition: top .15s ease; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ */
/* The header: always at the top, clear over the first screen, solid once the page moves. */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav); border-bottom: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease; }
.js .nav { animation: nav-in .9s ease .15s both; }
@keyframes nav-in { from { opacity: 0; } }
.nav.scrolled { border-bottom-color: var(--rail); background: rgba(12, 12, 13, .84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; padding: 0 var(--edge); }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 2px; border-radius: 8px; font-family: var(--font-display); font-size: 18.75px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--ink); text-decoration: none; }
.brand .mark { width: 1.5em; height: 1.68em; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a { position: relative; padding: 8px 13px; border-radius: 999px; font-size: 14px; line-height: 20px; color: var(--ink-3); text-decoration: none; transition: color .2s ease, background-color .2s ease; }
.nav-links a:hover { color: var(--ink); background: rgba(242, 242, 238, .06); }
.nav-links a[aria-current] { color: var(--ink); }
.nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--ok); transform: scaleX(0); transition: transform .3s var(--out); }
.nav-links a[aria-current]::after { transform: none; }

/* ------------------------------------------------------------------ */
/* Metal: the chrome button, the dark pill and the Verified chip, as on the wall. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .95);
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .95) 47%, rgba(255, 255, 255, 0) 62%) 160% 0 / 240% 100% no-repeat, linear-gradient(180deg, #fff 0%, #ededea 46%, #c6c6c3 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px rgba(0, 0, 0, .22), 0 0 0 2px #3f3f45, 0 0 0 3px rgba(255, 255, 255, .3), 0 12px 24px -14px rgba(0, 0, 0, .9);
  color: #0c0c0d; font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: background-position .8s var(--out), transform .2s cubic-bezier(.2, .7, .2, 1);
}
a.btn:hover { background-position: -60% 0, 0 0; }
a.btn:active { transform: scale(.97); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 9px; flex: none; height: 40px; padding: 0 18px 0 14px; border-radius: 999px; border: 1px solid rgba(242, 242, 238, .2); background: var(--metal); box-shadow: var(--metal-lip); font-size: 15px; font-weight: 500; line-height: 1; color: var(--ink); white-space: nowrap; }
.pill svg { flex: none; width: 18px; height: 18px; fill: currentColor; }
.pill-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.seal { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; border: 1px solid var(--g-edge); background: linear-gradient(112deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .18) 38%, rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, #27624a, #0d261b); box-shadow: inset 0 1.5px 0 rgba(170, 255, 216, .5), inset 0 -1.5px 0 rgba(0, 0, 0, .5); color: var(--ok); font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tick { flex: none; width: 10px; height: 11.2px; fill: currentColor; }

/* ------------------------------------------------------------------ */
/* The page as one sheet of brushed metal in the dark: the pointer is the only light, and it
   shows the grain around itself. Under everything but the first screen. */
.surface { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%), url("/grain.svg") 0 0 / 1200px 240px; -webkit-mask-image: radial-gradient(600px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 72%); mask-image: radial-gradient(600px circle at var(--mx, 50%) var(--my, 40%), #000, transparent 72%); }
.lit-page .surface { opacity: 1; }

/* ------------------------------------------------------------------ */
/* The column: every section sits between two rails, a mark where each rule meets them. */
.col { position: relative; z-index: 1; width: min(1200px, 100% - 40px); margin: 0 auto; border-inline: 1px solid var(--rail); }
.sec { position: relative; padding: 112px var(--pad); border-top: 1px solid var(--rail); }
.sec::before, .sec::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; background: linear-gradient(rgba(242, 242, 238, .4), rgba(242, 242, 238, .4)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(242, 242, 238, .4), rgba(242, 242, 238, .4)) 0 50% / 100% 1px no-repeat; }
/* The rule as a polygraph line (home.js): a canvas draws it from rail to rail, with one sharp kick
   that crosses from one mark to the other, so the section's own rule steps aside while it runs. */
.sec.pulsing { border-top-color: transparent; }
.rule { position: absolute; left: 0; top: -13px; width: 100%; height: 25px; pointer-events: none; }
.sec::before { left: -5px; }
.sec::after { right: -5px; }

.title { font-family: var(--font-display); font-size: clamp(1.875rem, 1.1rem + 2.2vw, 2.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.title em { font-style: normal; color: var(--ok); }
.title.center { max-width: 19.5em; margin: 0 auto 56px; text-align: center; }

/* A card: a dark metal face with a lit upper lip. */
.card { position: relative; display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 22px; border-radius: 18px; border: 1px solid rgba(242, 242, 238, .17); background: var(--face); box-shadow: var(--face-lip); }
/* Its edge catches the pointer's light where the pointer is (home.js sets --cx and --cy). */
.card::before, .panel::before, .plinth::before { content: ""; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; background: radial-gradient(440px circle at var(--cx, 50%) var(--cy, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.card:hover::before, .panel:hover::before, .plinth:hover::before { opacity: 1; }
.eyebrow { font-size: 13px; line-height: 18px; color: var(--ink-4); }
.card .art { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 150px; }
.copy h3, .own strong { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -.015em; color: var(--ink-2); }
.copy p, .own .copy > span { display: block; font-size: 14px; line-height: 22px; color: var(--ink-4); text-wrap: pretty; }

/* The black device every example sits in. */
.device { min-width: 0; border-radius: 12px; border: 1px solid rgba(242, 242, 238, .14); background: #070708; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 5px #0a0a0b, 0 0 0 6px rgba(242, 242, 238, .22), 0 0 0 7px rgba(0, 0, 0, .6), 0 30px 60px -24px #000; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.device .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 9px 14px; border-bottom: 1px solid var(--hair); color: var(--ink-3); }
.rows li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; }
.rows li + li { border-top: 1px solid var(--hair); }
.rows b { flex: none; font-size: 15px; font-weight: 500; line-height: 18px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ */
/* The idea: two old options and the new one. */
.trio { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 14px; }
.trio .card { min-height: 372px; }
.who { margin-bottom: 8px; font-size: 13px; line-height: 18px; color: var(--ink-4); }
.quote { align-self: flex-start; padding: 12px 14px; border-radius: 14px 14px 14px 4px; border: 1px solid rgba(242, 242, 238, .2); background: var(--metal); box-shadow: var(--metal-lip); font-size: 14px; line-height: 20px; color: var(--ink-2); }
.locks { display: flex; flex-direction: column; gap: 6px; }
.locks li { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(242, 242, 238, .2); background: var(--metal); box-shadow: var(--metal-lip); font-size: 13px; line-height: 18px; color: var(--ink-3); }
.locks svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Asked for, they stay shut. */
.card:hover > .locks li { animation: refuse .42s ease both; }
.card:hover > .locks li:nth-child(2) { animation-delay: .05s; }
.card:hover > .locks li:nth-child(3) { animation-delay: .1s; }
@keyframes refuse { 25% { transform: translateX(-3px); } 55% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }
.card.lit { border-color: rgba(75, 227, 160, .45); background: radial-gradient(90% 90% at 100% 100%, rgba(75, 227, 160, .2), rgba(75, 227, 160, 0) 70%), linear-gradient(135deg, #333338 0%, #1c1c20 45%, #0f0f11 100%); box-shadow: inset 0 1.5px 0 rgba(170, 255, 216, .5), inset 0 -1.5px 0 rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .5); }
.lit .eyebrow { color: var(--ok); }
.lit .copy h3 { color: var(--ink); }
.lit .copy p { color: var(--ink-3); }
.lit .art { padding: 7px; }
.answer .ask { padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.answer .got { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.answer .got b { font-family: var(--font-display); font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Where it runs. */
.works { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding-block: 22px; }
.works p { margin-right: 10px; font-size: 14px; line-height: 20px; color: var(--ink-4); }

/* ------------------------------------------------------------------ */
/* How a request runs: three steps beside a stage that plays each one. */
.split { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 64px; align-items: center; }
.how .title { margin-bottom: 26px; font-size: clamp(1.75rem, 1rem + 1.9vw, 2.375rem); }
.steps { display: flex; flex-direction: column; gap: 8px; }
.step { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(242, 242, 238, .1); background: none; overflow: hidden; font-family: var(--font); font-size: 13.5px; line-height: 20px; text-align: left; color: var(--ink-4); cursor: pointer; transition: border-color .3s ease, background-color .3s ease, color .3s ease; }
.step b { font-family: var(--font-display); font-size: 16px; font-weight: 500; line-height: 22px; color: var(--ink-3); transition: color .3s ease; }
.step:hover { border-color: rgba(242, 242, 238, .2); }
.step:hover b { color: var(--ink); }
.step[aria-pressed="true"] { border-color: rgba(242, 242, 238, .26); background: linear-gradient(180deg, #2a2a2f, #151517); box-shadow: var(--face-lip); color: var(--ink-3); }
.step[aria-pressed="true"] b { color: var(--ink); }
.meter { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ok); transform: scaleX(0); transform-origin: 0 50%; }
.steps.auto .step[aria-pressed="true"] .meter { animation: meter var(--beat, 5.4s) linear both; }
@keyframes meter { to { transform: none; } }

.plinth { position: relative; display: grid; place-items: center; min-height: 480px; padding: 40px 28px; border-radius: 16px; border: 1px solid rgba(242, 242, 238, .2); background: var(--plinth); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1.5px 0 rgba(0, 0, 0, .65); overflow: hidden; }
.flow { position: relative; display: grid; width: min(468px, 100%); font-size: 13.5px; line-height: 19px; }
.screen { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
/* The device is as tall as the step that is showing; the others lie over it while they fade (home.js eases the change of height). */
.screen:not(.on) { position: absolute; left: 0; top: 0; width: 100%; }
.screen.on { opacity: 1; visibility: visible; transition: opacity .45s ease .12s, visibility 0s; }
.asks { padding: 2px 14px 4px; counter-reset: ask; }
.asks li { position: relative; display: flex; gap: 10px; padding: 10px 0; counter-increment: ask; }
.asks li + li { border-top: 1px solid var(--hair); }
.asks li::before { content: counter(ask); flex: none; width: 14px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
/* A question opens to its details, as it does in the product: what a word in it means, as "Term:
   meaning", then what its answer must be established from. A small chevron says it opens. */
.asks .q { flex: 1 1 auto; min-width: 0; }
.asks li::after { content: ""; flex: none; align-self: flex-start; width: 6px; height: 6px; margin: 5px 4px 0 2px; border-right: 1.5px solid var(--ink-4); border-bottom: 1.5px solid var(--ink-4); transform: rotate(-45deg); }
.asks li.open::after { transform: rotate(45deg); }
.detail { display: grid; grid-template-rows: 1fr; }
.detail > div { min-height: 0; overflow: hidden; }
/* Two parts, set alike and given room: a quiet label, then its sentence. */
.detail p { padding-top: 14px; font-size: 13px; line-height: 20px; color: var(--ink-3); text-wrap: pretty; }
.detail p:last-child { padding-bottom: 6px; }
.detail span { display: block; padding-bottom: 3px; font-size: 12px; line-height: 16px; color: var(--ink-4); }
.asks .cursor { left: auto; right: 58px; top: 15px; }
.acts { position: relative; display: grid; align-items: center; padding: 12px 14px 14px; border-top: 1px solid var(--hair); }
/* Once a choice is made its buttons give way to a line that says what happens next. */
.choices, .after { grid-area: 1 / 1; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.after { opacity: 0; font-size: 13px; line-height: 19px; color: var(--ink-3); }
/* A pointer comes in and presses the step's button. */
.cursor { position: absolute; left: 58px; top: 30px; z-index: 2; width: 20px; height: 20px; opacity: 0; pointer-events: none; }
.cursor svg { display: block; width: 100%; height: 100%; fill: var(--ink); stroke: #0c0c0d; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.state { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(242, 242, 238, .16); font-size: 11.5px; line-height: 1; color: var(--ink-3); white-space: nowrap; }
.state.yes { border-color: var(--g-edge); background: rgba(75, 227, 160, .08); color: var(--ok); }
.swap { display: grid; justify-items: end; }
.swap > * { grid-area: 1 / 1; }
.swap .then { opacity: 0; }
.flow .rows li { padding-block: 15px; }
.stamp { padding: 10px 14px 12px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 18px; color: var(--ink-4); }

/* Each screen plays as it comes on: the questions are written, a button is pressed, the answers arrive together. */
.js .screen.on .asks li { animation: line-in .5s var(--out) both; }
.js .screen.on .asks li:nth-child(1) { animation-delay: .3s; }
.js .screen.on .asks li:nth-child(2) { animation-delay: .45s; }
.js .screen.on .asks li:nth-child(3) { animation-delay: .6s; }
.js .screen.on .acts { animation: line-in .5s var(--out) .85s both; }
.js .screen.on .press { animation: press .55s ease 2.6s both; }
.js .screen.on .cursor { animation: point 2.7s cubic-bezier(.3, 0, .2, 1) 1.15s both; }
.js .screen.on .swap .state:not(.then) { animation: leave .3s ease 3s both; }
.js .screen.on .swap .then { animation: arrive .45s var(--out) 3.1s both; }
.js .screen.on .choices { animation: leave .3s ease 3s both; }
.js .screen.on .after { animation: say .45s var(--out) 3.2s both; }
/* The first screen takes longer: a pointer opens the first question to its definition and evidence
   criteria, leaves them to be read, then presses the button. */
.js .screen.ask.on .asks .cursor { animation: tap 1.9s cubic-bezier(.3, 0, .2, 1) 1.15s both; }
.js .screen.ask.on .detail { animation: unfold .5s var(--out) 2.3s both; }
.js .screen.ask.on .open::after { animation: turn .3s ease 2.3s both; }
.js .screen.ask.on .acts .cursor { animation-delay: 4.1s; }
.js .screen.ask.on .press { animation-delay: 5.55s; }
.js .screen.ask.on .swap .state:not(.then), .js .screen.ask.on .choices { animation-delay: 5.95s; }
.js .screen.ask.on .swap .then { animation-delay: 6.05s; }
.js .screen.ask.on .after { animation-delay: 6.15s; }
.js .flow .screen.on .rows li::after { content: ""; position: absolute; right: 14px; top: 50%; width: 34px; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, rgba(242, 242, 238, .07), rgba(242, 242, 238, .24), rgba(242, 242, 238, .07)) 0 0 / 200% 100%; animation: checking 1.5s ease both; }
.js .flow .screen.on .rows b { animation: arrive .45s var(--out) both; animation-delay: 1.5s; }
.js .flow .screen.on .seal { animation: arrive .5s var(--out) 1.85s both; }
.js .flow .screen.on .stamp { animation: line-in .5s var(--out) 2s both; }
@keyframes point { 0% { opacity: 0; transform: translate(150px, 76px); } 14% { opacity: 1; } 54% { opacity: 1; transform: none; } 59% { transform: scale(.84); } 67% { transform: none; } 86% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes press { 35% { transform: scale(.94); filter: brightness(.9); } }
@keyframes leave { to { opacity: 0; } }
@keyframes say { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tap { 0% { opacity: 0; transform: translate(70px, 54px); } 16% { opacity: 1; } 56% { opacity: 1; transform: none; } 62% { transform: scale(.84); } 70% { transform: none; } 84% { opacity: 1; } 100% { opacity: 0; transform: none; } }
@keyframes unfold { from { grid-template-rows: 0fr; opacity: 0; } }
@keyframes turn { from { transform: rotate(-45deg); } }
@keyframes arrive { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes checking { 0% { opacity: 0; background-position: 100% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -100% 0; } }

/* ------------------------------------------------------------------ */
/* Where people use it. */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.use { gap: 0; padding: 0; }
.use .device { margin: 31px 23px 29px; }
.use > .copy { margin-top: auto; padding: 20px 22px 22px; border-top: 1px solid var(--hair); }
.use .copy h3 { color: var(--ink); }
.use .copy p { color: var(--ink-3); }
.use .device { transition: translate .5s var(--out); }
.use:hover .device { translate: 0 -4px; }
/* The answers arrive together as a card comes into view. */
.js .use[data-reveal] .rows b, .js .use[data-reveal] .seal { opacity: 0; }
.js .use.in .rows b { animation: arrive .45s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + .55s); }
.js .use.in .seal { animation: arrive .5s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + .85s); }
.own { justify-content: space-between; gap: 40px; padding: 22px; min-height: 280px; color: inherit; text-decoration: none; }
.own > .copy { margin-top: 0; padding: 0; border-top: 0; }
.own:hover { border-color: rgba(242, 242, 238, .34); }
.arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(242, 242, 238, .2); background: var(--metal); box-shadow: var(--metal-lip); }
.arrow svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s var(--out); }
.own:hover .arrow svg { translate: 2px -2px; }
.own strong { color: var(--ink); font-size: 24px; line-height: 30px; }
/* What you would type: the request starts in your own words. */
.ask-line { display: flex; align-items: center; height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(242, 242, 238, .2); background: var(--metal); box-shadow: var(--metal-lip); font-size: 14px; line-height: 20px; color: var(--ink-4); white-space: nowrap; overflow: hidden; }
.ask-line::after { content: ""; flex: none; width: 1.5px; height: 18px; margin-left: 3px; background: var(--ok); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.own-top { display: flex; flex-direction: column; gap: 18px; }
.own .copy > span { color: var(--ink-3); }

/* ------------------------------------------------------------------ */
/* What stays private: their records in a box, one line out, one answer. */
.panel { position: relative; border-radius: 20px; border: 1px solid rgba(242, 242, 238, .2); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .3), inset 0 -1.5px 0 rgba(0, 0, 0, .65); }
.keep { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 56px; background: radial-gradient(60% 130% at 100% 50%, rgba(75, 227, 160, .13), rgba(75, 227, 160, 0) 70%), radial-gradient(90% 140% at 0% 0%, #26262b 0%, #141416 50%, #0d0d0e 100%); }
.keep-copy p { margin-top: 16px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.keep-art { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.vault { flex: 0 1 250px; min-width: 0; padding: 16px; border-radius: 16px; border: 1px dashed rgba(242, 242, 238, .3); background: rgba(0, 0, 0, .28); }
.vault p, .reach p, .wire span { margin-bottom: 10px; font-size: 13px; line-height: 18px; color: var(--ink-4); white-space: nowrap; }
.wire { flex: 1 1 110px; display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 0 6px; }
.wire span { margin-bottom: 6px; }
.wire i { position: relative; display: block; width: 100%; height: 12px; overflow: hidden; background: linear-gradient(90deg, rgba(75, 227, 160, .12), var(--ok)) 0 50% / 100% 2px no-repeat; }
.wire i::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at calc(100% - 6px) 50%, #dcfff0 0 3px, rgba(75, 227, 160, .4) 3.5px 5.5px, rgba(75, 227, 160, 0) 6px); transform: translateX(-100%); }
.reach { flex: none; min-width: 150px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--g-edge); background: linear-gradient(180deg, rgba(31, 77, 57, .55), rgba(13, 38, 27, .55)); box-shadow: inset 0 1.5px 0 rgba(170, 255, 216, .3); }
.reach b { display: block; margin-bottom: 10px; font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
/* The answer makes the trip again and again; nothing else ever does. */
.js .keep.in .wire i::before { animation: carry 3.4s cubic-bezier(.45, 0, .2, 1) 1.1s infinite; }
.js .keep.in .reach { animation: receive 3.4s ease 1.1s infinite; }
@keyframes carry { 0% { transform: translateX(-100%); opacity: 0; } 8% { opacity: 1; } 62% { transform: none; opacity: 1; } 70%, 100% { transform: none; opacity: 0; } }
@keyframes receive { 0%, 58% { border-color: var(--g-edge); } 68% { border-color: #9ff5cf; } 100% { border-color: var(--g-edge); } }

/* ------------------------------------------------------------------ */
/* The close: a reading that settles into the logo's check. */
.last { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 112px 28px 96px; overflow: hidden; text-align: center; background: radial-gradient(70% 120% at 50% 100%, rgba(75, 227, 160, .2), rgba(75, 227, 160, 0) 70%), radial-gradient(90% 120% at 50% 0%, #1e1e22 0%, #121214 48%, #0c0c0d 100%); }
.last p { max-width: 440px; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.last .btn { margin-top: 8px; }
.reading { position: absolute; left: 0; top: 36px; width: 100%; height: 44px; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* The footer, on the same rails, ending on the name. */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--rail); overflow: hidden; }
.foot-in { container-type: inline-size; width: min(1200px, 100% - 40px); margin: 0 auto; padding: 40px var(--pad) 0; border-inline: 1px solid var(--rail); }
.foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 2px; margin-right: -10px; }
.foot nav a { padding: 7px 10px; border-radius: 999px; font-size: 13.5px; line-height: 18px; color: var(--ink-3); text-decoration: none; transition: color .2s ease; }
.foot nav a:hover { color: var(--ink); }
.fine { margin-top: 26px; font-size: 13px; line-height: 18px; color: var(--ink-4); }
/* The name set as wide as the column (its nine letters are 4.47em across), its feet below the page's edge. */
.giant { margin: 30px 0 -.17em; font-family: var(--font-display); font-size: 22cqw; font-weight: 500; line-height: .82; letter-spacing: -.05em; text-align: center; white-space: nowrap; color: rgba(242, 242, 238, .1); -webkit-mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, 0) 92%); mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, 0) 92%); -webkit-user-select: none; user-select: none; }

/* ------------------------------------------------------------------ */
/* The inner pages (trust): the same column and faces, a plain first section in place of the wall. */
a.pill { text-decoration: none; transition: border-color .25s ease; }
a.pill:hover { border-color: rgba(242, 242, 238, .42); }
a.pill svg { order: 2; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate .35s var(--out); }
a.pill:hover svg { translate: 3px 0; }
.keep-copy .pill { margin-top: 26px; padding: 0 12px 0 15px; }
.inner main { padding-top: var(--nav); }
.lead { padding-block: 128px 104px; border-top: 0; }
.lead::before, .lead::after { display: none; }
.lead .title { max-width: 13.5em; font-size: clamp(2.375rem, 1.2rem + 3.9vw, 4.25rem); line-height: 1.02; }
.intro { max-width: 40em; margin-top: 24px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.sees { gap: 14px; padding: 26px; }
.sees h3, .plain h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: -.015em; color: var(--ink); }
.sees h3 { margin-bottom: 6px; }
.has, .not { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 21px; }
.has li, .not li { position: relative; padding-left: 26px; color: var(--ink-2); text-wrap: pretty; }
/* What someone sees is marked with the logo, as a verified claim is; what they never see, with a dash. */
.has li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 17px; background: url("/favicon.svg") 50% 50% / contain no-repeat; }
.not { margin-bottom: 4px; }
.not li { color: var(--ink-4); }
.not li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 10px; height: 1.5px; border-radius: 1px; background: var(--ink-4); }
.sees .eyebrow + ul + .eyebrow { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--hair); }
.pair { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 64px; align-items: start; }
.points { display: flex; flex-direction: column; }
.points > * { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-top: 1px solid var(--hair); }
.points > :first-child { padding-top: 0; border-top: 0; }
.points b, .points dt { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -.01em; color: var(--ink); }
.points span, .points dd { max-width: 38em; margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-3); text-wrap: pretty; }
ol.points { counter-reset: point; }
ol.points > li { padding-left: 46px; counter-increment: point; }
/* A numbered point sits in a hexagon, the logo's shape, never a circle: one hexagon for the edge and
   a slightly smaller one on it for the face. */
ol.points > li::before { content: counter(point); position: absolute; left: 1px; top: 21px; z-index: 1; display: grid; place-items: center; width: 28px; height: 31px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--metal); font-size: 13px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
ol.points > li::after { content: ""; position: absolute; left: 0; top: 20px; width: 30px; height: 33px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: rgba(242, 242, 238, .3); }
ol.points > li:first-child::before { top: -1px; }
ol.points > li:first-child::after { top: -2px; }
.means { display: flex; flex-direction: column; align-items: flex-start; padding: 64px 56px; background: radial-gradient(70% 130% at 100% 0%, rgba(75, 227, 160, .14), rgba(75, 227, 160, 0) 70%), radial-gradient(90% 140% at 0% 0%, #26262b 0%, #141416 50%, #0d0d0e 100%); }
.seal.big { height: 30px; margin-bottom: 22px; padding: 0 12px 0 9px; font-size: 14px; }
.seal.big .tick { width: 13px; height: 14.5px; }
.means .intro { max-width: 46em; margin-top: 18px; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px; width: 100%; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hair); }
.notes p { font-size: 15px; line-height: 24px; color: var(--ink-3); text-wrap: pretty; }
.notes b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 24px; letter-spacing: -.01em; color: var(--ink); }
.notes.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 36px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.plain { gap: 10px; padding: 26px; }
.plain p { font-size: 15px; line-height: 24px; color: var(--ink-3); text-wrap: pretty; }
/* Addresses and names a developer copies: in the reading face on a quiet chip, and allowed to break anywhere. */
.inner code { padding: 1px 6px; border-radius: 6px; background: rgba(242, 242, 238, .07); font: inherit; color: var(--ink); overflow-wrap: anywhere; }
.spec a, .points a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: rgba(242, 242, 238, .35); overflow-wrap: anywhere; }
.spec a:hover, .points a:hover { color: var(--ink); text-decoration-color: currentColor; }
.plain a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: rgba(242, 242, 238, .35); }
.plain a:hover { color: var(--ink); text-decoration-color: currentColor; }
.more { margin-top: 28px; font-size: 15px; line-height: 24px; color: var(--ink-4); }
.more:not(.row) a { color: var(--ink-2); text-underline-offset: 3px; text-decoration-color: rgba(242, 242, 238, .35); }
.more:not(.row) a:hover { color: var(--ink); text-decoration-color: currentColor; }
.more.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* How it works and the page for people who were asked. */
.how-copy > .pill { margin-top: 18px; }
.aside { max-width: 30em; margin-top: 18px; font-size: 15px; line-height: 24px; color: var(--ink-3); text-wrap: pretty; }
.aside.wide { max-width: 44em; margin-top: 16px; }
/* Who acts at a step: a quiet chip, green when it is the other person or their agent. */
.points .by { align-self: flex-start; display: inline-flex; align-items: center; max-width: none; height: 22px; margin-bottom: 4px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(242, 242, 238, .16); font-size: 11.5px; line-height: 1; color: var(--ink-3); }
.points .by.them { border-color: var(--g-edge); background: rgba(75, 227, 160, .08); color: var(--ok); }
/* One question, taken apart. */
.spec { margin: 7px; font-size: 14px; line-height: 21px; }
.spec dl { margin: 0; }
.spec dl > div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; padding: 13px 14px; }
.spec dl > div + div { border-top: 1px solid var(--hair); }
.spec dt { color: var(--ink-4); }
.spec dd { margin: 0; color: var(--ink); text-wrap: pretty; }
.form { gap: 16px; padding: 22px; }
.form h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -.01em; color: var(--ink); }
.eg { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding: 11px 13px; border-radius: 10px; border: 1px solid rgba(242, 242, 238, .12); background: #070708; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.eg b { flex: none; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.grid.two.spaced { margin-top: 40px; }

/* ------------------------------------------------------------------ */
/* Arrival: each block rises into place once, as it comes into view. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--out), transform .9s var(--out), border-color .3s ease; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s; }
.js [data-reveal].in { opacity: 1; transform: none; }
/* If the script that brings the blocks in never arrives, they bring themselves in: nothing on the
   page stays hidden for want of it. home.js marks the page with "reveals" once it is running. */
.js:not(.reveals) [data-reveal], .js:not(.reveals) .use[data-reveal] .rows b, .js:not(.reveals) .use[data-reveal] .seal { animation: stand .6s ease 3s forwards; }
@keyframes stand { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .split { gap: 40px; }
  .keep { grid-template-columns: 1fr; gap: 44px; padding: 56px 40px; }
  .keep-art { justify-content: flex-start; }
}
@media (max-width: 899px) {
  .col, .foot-in { border-inline: 0; }
  .sec { padding-block: 76px; }
  .sec::before, .sec::after { display: none; }
  .title.center { margin-bottom: 40px; text-align: left; }
  .trio { grid-template-columns: 1fr; }
  .trio .card { min-height: 0; }
  .card .art { min-height: 0; padding-block: 10px; }
  .works { justify-content: flex-start; padding-block: 20px; }
  /* One column: the title, then the stage, then the steps right under it, so choosing a step shows it in view. */
  .split { display: flex; flex-direction: column; gap: 24px; }
  .how-copy { display: contents; }
  .how .title { order: 0; margin-bottom: 4px; }
  .plinth { order: 1; min-height: 0; padding: 36px 18px; }
  .steps { order: 2; }
  .how-copy > .pill { order: 3; align-self: flex-start; margin-top: 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .own { min-height: 220px; }
  .keep { padding: 44px 24px; }
  .last { padding: 96px 22px 72px; }
  .lead { padding-block: 72px 64px; }
  .pair { grid-template-columns: 1fr; gap: 32px; }
  .means { padding: 44px 24px; }
  .notes.three { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .nav-links { display: none; }
}
@media (max-width: 639px) {
  .grid, .grid.two { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr; }
  .spec dl > div { grid-template-columns: 1fr; gap: 4px; }
  .keep-art { flex-direction: column; align-items: stretch; }
  .vault { flex: none; }
  .wire { flex: none; flex-direction: row; justify-content: center; gap: 12px; min-width: 0; padding: 10px 0; }
  .wire span { margin: 0; order: 2; }
  .wire i { width: 12px; height: 48px; background: linear-gradient(180deg, rgba(75, 227, 160, .12), var(--ok)) 50% 0 / 2px 100% no-repeat; }
  .wire i::before { background: radial-gradient(circle at 50% calc(100% - 6px), #dcfff0 0 3px, rgba(75, 227, 160, .4) 3.5px 5.5px, rgba(75, 227, 160, 0) 6px); transform: translateY(-100%); }
  .js .keep.in .wire i::before { animation-name: carry-down; }
  .foot-row { flex-direction: column; align-items: flex-start; }
  .foot nav { margin: 0 0 0 -10px; }
}
@keyframes carry-down { 0% { transform: translateY(-100%); opacity: 0; } 8% { opacity: 1; } 62% { transform: none; opacity: 1; } 70%, 100% { transform: none; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.smooth { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js:not(.reveals) [data-reveal], .js:not(.reveals) .use[data-reveal] .rows b, .js:not(.reveals) .use[data-reveal] .seal { animation: none; }
  .js .use[data-reveal] .rows b, .js .use[data-reveal] .seal { opacity: 1; }
  .js .screen.on .asks li, .js .screen.on .acts, .js .screen.on .press, .js .screen.on .cursor, .js .screen.on .swap .state, .js .screen.on .choices, .js .screen.on .after, .js .screen.on .detail, .js .screen.on .open::after, .js .flow .screen.on .rows b, .js .flow .screen.on .seal, .js .flow .screen.on .stamp, .js .use.in .rows b, .js .use.in .seal, .js .keep.in .wire i::before, .js .keep.in .reach, .card:hover > .locks li, .brand .mark.landed, .ask-line::after { animation: none; }
  .js .flow .screen.on .rows li::after { content: none; }
  .swap .state:not(.yes) { opacity: 0; }
  .swap .yes { opacity: 1; }
  .screen, .screen.on, .btn, .use .device, .arrow svg, a.pill svg, .card::before, .panel::before, .plinth::before { transition: none; }
  .js .nav { animation: none; }
  .steps.auto .step[aria-pressed="true"] .meter { animation: none; }
}