/* Whorl landing page. Tokens and fonts live in base.css.
   Frame: a blockchain forensics product page. The header is a breadcrumb: logo, the sample
   wallet as a path chip, the sections as the rest of the path, the download on the right.
   The first screen is radial: a compact pitch at the top left, and in the centre of the page
   the whorl itself, the sample wallet with one ring per hop and its counterparties as dots.
   Four cards stand at the four corners of the whorl and are tied to it by thin lines.
   Below: what an investigation contains (four cards with mocks), how a hop is read (a chain
   of three wallets), what it will not claim, questions as accordion cards in two columns,
   and a closing card with three plain rings behind the text.
   Flat colour only; periwinkle is the wallet at the centre, its pattern and the download. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
i, em { font-style: normal; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:root { --gutter: max(24px, calc((100vw - 1320px) / 2)); }

/* ---------- small pieces ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 15.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: #A9B8FF; }
.btn:active { transform: scale(.97); }
.btn svg { flex: none; width: 17px; height: 17px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14.5px; }
.btn--quiet { background: var(--panel-2); color: var(--text); }
.btn--quiet:hover { background: #2A2D44; }
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.tag { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--panel-2); font: 600 11.5px/1 var(--sans); letter-spacing: .01em; color: var(--text-2); }
.mono { font-family: var(--mono); letter-spacing: -.02em; }
.note { font-size: 13.5px; color: var(--text-3); }
/* An address that is held back for the app. */
.redact { display: inline-block; width: 2.6em; height: .72em; margin-left: 3px; border-radius: 3px; background: #34374F; }
/* What a counterparty is: an exchange, a bridge, any other wallet. The same three marks are the dots on the rings. */
.k { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.k--x { background: var(--text); }
.k--b { border: 2px solid var(--text); }
.k--w { background: var(--dot); }

/* ---------- nav: a breadcrumb ---------- */

.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; height: 64px; padding: 0 var(--gutter); background: var(--bg); box-shadow: 0 1px 0 transparent; transition: box-shadow .2s ease-out; }
.nav.is-stuck { box-shadow: 0 1px 0 var(--line); }
.logo { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.logo img { border-radius: 7px; }
.sep { margin: 0 10px; font-size: 15px; color: var(--text-3); }
.sep--crumb { margin: 0 14px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; white-space: nowrap; }
.crumb i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.crumb .mono { font-size: 13px; color: var(--text-2); }
.crumb__dot { margin: 0 -2px; color: var(--text-3); }
.crumb .tag { margin-left: 2px; }
.path { display: flex; align-items: center; margin-left: 4px; }
.path a { display: inline-flex; align-items: center; height: 40px; padding: 0 4px; font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: color .15s ease-out; }
.path a:hover { color: var(--text); }
.nav .btn { margin-left: auto; }

/* ---------- first screen: the pitch, top left ---------- */

.hero { padding: 24px var(--gutter) 0; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
h1 { font-size: clamp(31px, 3.06vw, 44px); line-height: 1.1; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
.lede { max-width: 38em; margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.head__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }

/* The trace, step by step: a hop per ring, then the pattern. */
.steps { display: grid; grid-template-columns: repeat(4, 104px); }
.steps li { position: relative; display: grid; gap: 1px; padding-top: 38px; }
.steps i { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--text); border-radius: 50%; background: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--bg); transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out; }
.steps i svg { width: 16px; height: 16px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; left: 36px; right: 8px; top: 13px; height: 2px; border-radius: 1px; background: var(--text-3); transition: background-color .3s ease-out; }
.steps b { font-size: 14.5px; line-height: 1.3; letter-spacing: -.01em; transition: color .3s ease-out; }
.steps span { font-size: 13px; line-height: 1.4; color: var(--text-2); transition: opacity .3s ease-out; }
.steps li:last-child i { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.steps .tag { position: absolute; right: 0; top: 4px; }
.js .steps li:not(.is-done) i { border-color: #454863; background: none; color: var(--text-3); }
.js .steps li:not(.is-done)::after { background: var(--panel-2); }
.js .steps li:not(.is-done) b { color: var(--text-3); }
.js .steps li:not(.is-done) span { opacity: 0; }
.js .steps li.is-on:not(.is-done) i { border-color: var(--text); color: var(--text); }
.js .steps li.is-on:not(.is-done) b { color: var(--text); }

/* ---------- first screen: the whorl and its four cards ---------- */

.stage { position: relative; display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 560px) minmax(320px, 1fr); grid-template-areas: "seen whorl in" "out whorl pattern"; gap: 20px 28px; margin-top: 24px; }
.whorl { grid-area: whorl; align-self: center; position: relative; }
.whorl svg { display: block; width: 100%; height: auto; overflow: visible; }
.info--seen { grid-area: seen; }
.info--in { grid-area: in; }
.info--out { grid-area: out; }
.info--pattern { grid-area: pattern; }

.ring { fill: none; stroke: rgba(255, 255, 255, .19); stroke-width: 1.25; stroke-dasharray: var(--len); transform: rotate(-90deg); transform-origin: 300px 300px; transition: stroke-dashoffset 1s cubic-bezier(.45, 0, .2, 1); }
.ring--1 { --len: 603.2; }
.ring--2 { --len: 1131; }
.ring--3 { --len: 1658.8; }
.dot { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.2, 1.3, .4, 1) var(--d, 0ms), opacity .25s ease-out var(--d, 0ms); }
.dot--x { fill: var(--text); }
.dot--b { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.dot--w { fill: var(--dot); }
.core { fill: var(--accent); }
.core-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
/* The pattern: three ridges, one on each ring. */
.arc { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: var(--len); transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1) var(--d, 0ms), opacity .15s linear var(--d, 0ms); }
.arc--1 { --len: 209.4; }
.arc--2 { --len: 138.3; --d: 140ms; }
.arc--3 { --len: 276.5; --d: 280ms; }
/* Words on the drawing are set in HTML over it, so they keep their size when the drawing scales. */
.hop { position: absolute; left: 50%; translate: -50% -50%; padding: 1px 8px; border-radius: 999px; background: var(--bg); font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--text-2); white-space: nowrap; transition: opacity .3s ease-out; }
.hop--1 { top: 34%; }
.hop--2 { top: 20%; }
.hop--3 { top: 6%; }
.me { position: absolute; left: 50%; top: 55.8%; translate: -50% 0; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }

.js .ring { stroke-dashoffset: var(--len); }
.js .dot { opacity: 0; transform: scale(.2); }
.js .hop { opacity: 0; }
.js .arc { stroke-dashoffset: var(--len); opacity: 0; }
.js .is-h1 .ring--1, .js .is-h2 .ring--2, .js .is-h3 .ring--3 { stroke-dashoffset: 0; }
.js .is-h1 .dot--h1, .js .is-h2 .dot--h2, .js .is-h3 .dot--h3 { opacity: 1; transform: none; }
.js .is-h1 .hop--1, .js .is-h2 .hop--2, .js .is-h3 .hop--3 { opacity: 1; }
.js .is-p .arc { stroke-dashoffset: 0; opacity: 1; }

/* The lines from the cards to the whorl. */
.ties { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ties path { fill: none; stroke: #666A8C; stroke-width: 1; stroke-dasharray: var(--len); transition: stroke-dashoffset .6s cubic-bezier(.45, 0, .2, 1); }
.ties circle { fill: none; stroke: #8D90AD; stroke-width: 1.25; transition: opacity .3s ease-out .45s; }
.ties .tie--pattern path, .ties .tie--pattern circle { stroke: var(--accent); }
.js .tie:not(.is-on) path { stroke-dashoffset: var(--len); }
.js .tie:not(.is-on) circle { opacity: 0; transition: none; }

/* The four cards. Each waits as an outline of itself and fills when its ring lands. */
.info { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.info__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; letter-spacing: -.01em; }
.info__val { margin-top: 10px; font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.03em; }
.info__val.mono { font-weight: 500; letter-spacing: -.04em; }
.info__sub { margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
/* A value: a blank bar until its card (.v) or its row (.tv) is read. */
.v, .tv { border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color .35s ease-out, background-color .35s ease-out; }
.js .info:not(.is-in) .v, .js .traits li:not(.is-in) .tv { background: var(--panel-2); color: transparent; }

.bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; flex: 1; min-height: 56px; margin-top: 16px; }
.bars i { height: max(2px, calc(var(--f) * 100%)); border-radius: 2px; background: var(--dot); transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.bars .is-top { background: var(--text); }
.js .info:not(.is-in) .bars i { transform: scaleY(0); }
.axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--text-3); }

.kinds { display: grid; gap: 9px; margin-top: 16px; }
.kinds li { display: grid; grid-template-columns: 10px 7.4em minmax(0, 1fr) 2.6em; gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; }
.kinds li > span:first-of-type { color: var(--text-2); white-space: nowrap; }
.kinds b { justify-self: end; font: 500 13.5px/1.4 var(--mono); letter-spacing: -.02em; }
.meter { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.meter i { display: block; width: calc(var(--f) * 100%); height: 100%; border-radius: 3px; background: var(--text-2); transform-origin: left; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .info:not(.is-in) .meter i { transform: scaleX(0); }
/* A fact per row, on the page colour: the largest transfer, what is left, what goes into the pattern. */
.facts { display: grid; gap: 6px; align-content: start; margin-top: auto; }
.facts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 0 12px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.facts b { font-size: 13px; font-weight: 500; color: var(--text); }
.kinds + .facts { padding-top: 16px; }

.match { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.match__n { flex: none; min-width: 1.22em; border-radius: 10px; font-size: 58px; line-height: 1; letter-spacing: -.06em; color: var(--accent); transition: color .3s ease-out, background-color .3s ease-out; }
.match__t { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.match__t b { font-size: 15px; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.js .info:not(.is-in) .match__n { background: var(--panel-2); color: transparent; }
/* While the hops are read the card lists what goes into the pattern; when the run ends, the offer takes that place. */
.swap { display: grid; flex: 1; margin-top: 14px; }
.swap > * { grid-area: 1 / 1; min-width: 0; }
.traits { margin-top: 0; opacity: 0; visibility: hidden; }
.traits li { min-height: 46px; }
.offer { display: grid; gap: 8px; align-content: end; }
.offer .btn { width: 100%; }
.locked { display: flex; align-items: center; gap: 10px; min-width: 0; height: 40px; margin-bottom: 4px; padding: 0 12px; border-radius: 10px; background: var(--bg); font-size: 13px; white-space: nowrap; overflow: hidden; }
.locked svg { flex: none; width: 14px; height: 14px; color: var(--text-2); }
.locked b { margin-left: auto; font-weight: 500; color: var(--text-2); }
.js .hero:not(.is-done) .traits { opacity: 1; visibility: visible; }
.js .hero:not(.is-done) .offer { opacity: 0; visibility: hidden; }
.js .hero.is-done .offer { animation: rise .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }
/* A replay clears the drawing at once instead of running every transition backwards. */
.is-reset, .is-reset *, .is-reset *::after { transition: none !important; animation: none !important; }

/* ---------- sections ---------- */

h2 { font-size: clamp(28px, 2.95vw, 42px); line-height: 1.1; letter-spacing: -.04em; font-weight: 600; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.025em; font-weight: 600; }
.sec { padding: 128px var(--gutter) 0; }
.sec__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 56px; align-items: end; }
.sec__head p { font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* What an investigation contains: four cards, each with a small piece of the report. */
.report__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.feat { grid-column: span 5; display: flex; flex-direction: column; padding: 28px; }
.feat--wide { grid-column: span 7; }
.feat > p { max-width: 33em; margin: 8px 0 26px; color: var(--text-2); text-wrap: pretty; }
.mock { margin-top: auto; padding: 16px 18px 18px; border-radius: 12px; background: var(--bg); }
.mock__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-2); }

.heat { display: grid; grid-template-columns: 2.6em repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; font-size: 12.5px; line-height: 1; color: var(--text-3); }
.heat i { aspect-ratio: 1; border-radius: 4px; background: var(--panel); }
.heat [data-n="1"] { background: #34374F; }
.heat [data-n="2"] { background: #7A7EA2; }
.heat [data-n="3"] { background: var(--text); }
.heat small { grid-column-end: span 6; padding-top: 5px; font-size: 12px; }

.split { display: flex; gap: 3px; height: 12px; }
.split i { border-radius: 3px; }
.split .k--b { border-width: 2px; }
.rows { display: grid; gap: 6px; margin-top: 14px; }
.rows li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 2.2em; gap: 12px; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; background: var(--panel); font-size: 15px; }
.rows span { font-size: 13px; color: var(--text-2); }
.rows em { justify-self: end; font-size: 15px; font-weight: 500; }

.moves { display: grid; gap: 6px; }
.moves li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; grid-template-areas: "dir sum when" "dir who tx"; column-gap: 12px; row-gap: 1px; align-items: center; padding: 10px 14px 10px 12px; border-radius: 10px; background: var(--panel); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.moves b { grid-area: sum; font-size: 15px; font-weight: 500; color: var(--text); }
.dir { grid-area: dir; display: grid; place-items: center; width: 38px; height: 28px; border-radius: 8px; background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--text); }
.dir--in { background: var(--text); color: var(--bg); }
.moves__who { grid-area: who; white-space: nowrap; }
.moves__when { grid-area: when; justify-self: end; }
.moves__tx { grid-area: tx; justify-self: end; color: var(--text-3); white-space: nowrap; }

.twins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.twin { display: grid; justify-items: center; gap: 1px; padding: 14px 10px 14px; border-radius: 10px; background: var(--panel); font-size: 12.5px; line-height: 1.4; color: var(--text-2); text-align: center; }
.twin > svg { width: 112px; height: 112px; margin-bottom: 8px; fill: var(--dot); }
.twin__core { fill: var(--text); }
.twin--me .twin__core { fill: var(--accent); }
.twin b { display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--text); }
.twin--me b { font-weight: 600; letter-spacing: -.01em; }
.twin span { display: inline-flex; align-items: center; gap: 5px; }
.twin span svg { width: 12px; height: 12px; }

/* How a hop is read: one card, the words on the left, a chain of three wallets on the right. */
.hopcard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center; padding: 44px 44px 44px 48px; }
.hopcard__text p { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.fields li { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--panel-2); font-size: 13.5px; font-weight: 500; }
.trail { padding: 18px 20px 20px; border-radius: 12px; background: var(--bg); }
.wallet { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 62px; padding: 8px 16px 8px 14px; border-radius: 12px; background: var(--panel-2); }
.wallet i { width: 22px; height: 22px; border-radius: 50%; }
.wallet i.k--b { border-width: 3px; }
.wallet--me i { background: var(--accent); }
.wallet p { display: grid; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.wallet p b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.wallet p b.mono { font-weight: 500; letter-spacing: -.02em; }
.wallet em { font-size: 13px; color: var(--text-2); }
/* A transfer: the line between two wallets, with what the ledger says about it. */
.xfer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-height: 58px; padding: 8px 0 8px 50px; font-size: 13px; color: var(--text-2); }
.xfer::before { content: ''; position: absolute; left: 24px; top: 0; bottom: 5px; width: 2px; background: #454863; }
.xfer::after { content: ''; position: absolute; left: 20px; bottom: 0; border: 5px solid transparent; border-top: 7px solid #454863; border-bottom: 0; }
.xfer em { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); font-size: 11.5px; font-weight: 600; color: var(--text); }
.xfer b { font-size: 15px; font-weight: 500; color: var(--text); }
.xfer .mono { color: var(--text-3); }
.xfer b.mono { color: var(--text); }
.trail__why { margin-top: 16px; padding-left: 2px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* What it will not claim: what the report says, and what it never says. */
.limits__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.claim { padding: 20px 20px 28px; }
.claim h3 { margin: 24px 8px 0; }
.claim > p { margin: 8px 8px 0; color: var(--text-2); text-wrap: pretty; }
.pair { display: grid; gap: 4px; padding: 10px 16px; border-radius: 12px; background: var(--bg); }
.pair p { display: grid; grid-template-columns: 3.9em minmax(0, 1fr); align-items: center; min-height: 34px; font-size: 13px; color: var(--text-3); }
.pair b, .pair s { font-size: 14.5px; line-height: 1.4; }
.pair b { font-weight: 500; color: var(--text); }
.pair b .mono { font-size: 14px; }
.pair s { text-decoration-thickness: 1.5px; }

/* Questions: accordion cards in two columns. */
.faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 40px; }
.faq__col { display: grid; gap: 16px; }
.qa { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 14px 20px 14px 26px; border-radius: 16px; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa h3 { font-size: 18px; }
.qa summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); transition: background-color .15s ease-out; }
.qa summary:hover i { background: #2A2D44; }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 11px; top: 16px; width: 12px; height: 2px; border-radius: 1px; background: var(--text); transition: transform .2s ease-out; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: none; }
.qa > p { max-width: 36em; padding: 0 26px 26px; color: var(--text-2); text-wrap: pretty; }

/* Closing card: three plain rings behind the words. */
.final { position: relative; display: grid; justify-items: center; align-content: center; min-height: 600px; margin: 128px var(--gutter) 0; padding: 48px 24px; text-align: center; overflow: hidden; }
.final__rings { position: absolute; left: 50%; top: 50%; width: 1000px; height: 1000px; translate: -50% -50%; }
.final__rings circle { fill: none; stroke: var(--panel-2); stroke-width: 2; }
.final > :not(svg) { position: relative; }
.final h2 { max-width: 6.6em; font-size: clamp(33px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.05em; }
.final__req { max-width: 26em; margin-top: 16px; font-size: 14.5px; color: var(--text-2); text-wrap: balance; }
.final .btn { margin-top: 24px; }

/* ---------- footer ---------- */

.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); gap: 20px 48px; align-items: start; padding: 56px var(--gutter) 64px; font-size: 14px; color: var(--text-3); }
.foot .logo { justify-self: start; color: var(--text); }
.foot p { max-width: 46ch; text-wrap: pretty; }
.foot b { display: block; margin-bottom: 4px; color: var(--text-2); }

.js [data-reveal] { opacity: 0; translate: 0 20px; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- smaller screens ---------- */

/* The cards are at their narrowest just above the switch: one locked address is enough there. */
@media (min-width: 1280px) and (max-width: 1379px) {
  .locked span:nth-of-type(2) { display: none; }
}
@media (max-width: 1279px) {
  /* No room for cards beside the whorl: it stands alone and the cards go under it, two by two. */
  .stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "whorl whorl" "seen in" "out pattern"; gap: 16px; }
  .whorl { justify-self: center; width: min(100%, 560px); margin-bottom: 8px; }
  .ties { display: none; }
}
@media (max-width: 1040px) {
  .path { display: none; }
  .head { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 480px; }
  .feat, .feat--wide { grid-column: span 12; }
  .hopcard { grid-template-columns: minmax(0, 1fr); padding: 36px; }
  .limits__row { grid-template-columns: minmax(0, 1fr); }
  .claim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 20px; align-items: center; padding: 20px; }
  .pair { grid-row: span 2; }
  .claim h3 { margin-top: 0; align-self: end; }
  .claim > p { align-self: start; }
  .sec__head { grid-template-columns: minmax(0, 1fr); }
  .sec, .final { padding-top: 96px; }
  .final { margin-top: 96px; padding-top: 48px; }
}
@media (max-width: 760px) {
  .nav { height: 60px; }
  .sep--crumb, .crumb { display: none; }
  .hero { padding-top: 16px; }
  .lede { font-size: 16px; }
  .head__go .btn { width: 100%; }
  .head__go { justify-content: center; }
  .steps { max-width: none; margin-top: 4px; }
  .steps li { padding-top: 33px; }
  .steps i { width: 24px; height: 24px; font-size: 12px; }
  .steps i svg { width: 14px; height: 14px; }
  .steps li:not(:last-child)::after { left: 32px; top: 11px; }
  .steps .tag { top: 2px; padding: 0 6px; font-size: 11px; }
  .steps b { font-size: 13.5px; }
  .steps span { font-size: 12px; }
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "whorl" "seen" "in" "out" "pattern"; gap: 12px; margin-top: 20px; }
  .whorl { width: min(100% + 16px, 560px); margin: 0 -8px 4px; justify-self: center; }
  .hop { padding: 0 6px; font-size: 10.5px; }
  .me { font-size: 11px; }
  .sec { padding-top: 80px; }
  .sec__head p, .hopcard__text p { font-size: 16px; }
  .report__grid, .limits__row, .faq__cols { margin-top: 28px; }
  .report__grid, .faq__cols, .faq__col, .limits__row { gap: 12px; }
  .feat { padding: 22px 16px 16px; }
  .feat > h3, .feat > p { margin-inline: 6px; }
  .mock { padding: 14px; }
  .heat { grid-template-columns: 2.4em repeat(24, minmax(0, 1fr)); gap: 5px 2px; font-size: 11.5px; }
  .heat i { border-radius: 2px; }
  .twins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moves li { grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px; font-size: 12.5px; }
  .dir { width: 34px; }
  .twin > svg { width: 96px; height: 96px; }
  .hopcard { gap: 28px; padding: 26px 16px 16px; }
  .hopcard__text { padding: 0 6px; }
  .trail { padding: 14px; }
  .wallet { grid-template-columns: 22px minmax(0, 1fr); row-gap: 0; }
  .wallet em { grid-column: 2; margin-top: -2px; }
  .wallet p { margin-top: 2px; }
  .xfer { padding-left: 48px; }
  .claim { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 24px; }
  .pair { grid-row: auto; }
  .claim h3 { margin-top: 20px; }
  .faq__cols { grid-template-columns: minmax(0, 1fr); }
  .qa summary { min-height: 64px; padding: 12px 14px 12px 20px; }
  .qa h3 { font-size: 17px; }
  .qa > p { padding: 0 20px 22px; }
  .final { min-height: 460px; margin-top: 80px; padding: 40px 20px; }
  .final__rings { width: 680px; height: 680px; }
  .final__req { max-width: 17em; }
  .foot { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 48px; }
}
@media (max-width: 389px) {
  .rows li { gap: 8px; padding: 0 10px; font-size: 14px; }
  .rows span { font-size: 12px; }
  .moves li { grid-template-areas: "dir sum when" "dir who who" "dir tx tx"; }
  .moves__tx { justify-self: start; }
}
@media (max-width: 359px) {
  .locked span:nth-of-type(2), .rows span { display: none; }
  .facts li { flex-wrap: wrap; gap: 0 12px; padding-block: 7px; }
  .offer .btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .hero *, .hero *::after { transition: none !important; animation: none !important; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --gutter: max(24px, calc((100vw - min(1320px + (100vw - 1600px) * 1.078, 1914px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(44px, 17.6px + 1.65vw, 55px); }
  h2 { font-size: clamp(42px, 23.1px + 1.181vw, 50.4px); }
  .lede { font-size: clamp(17px, 11.9px + 0.3187vw, 19.55px); }
}
/* ---------- end every screen size ---------- */