/* Opaque's upgrade pages (unseen.html, post-quantum.html): the site's dark ground and
   one orange mark, huge type, small quiet text, and motion that shows one idea each. */
/* Opaque Unseen: the site's dark ground and one orange mark. Motion shows one thing,
   a request losing its sender on the way to the RPC. */
:root {
  --ink: #070608; --surface: #0d0b0f; --raised: #151117; --lift: #231d26;
  --cream: #f4efe9; --muted: #aaa19b; --faint: #746b66;
  --line: rgba(244, 239, 233, 0.12); --orange: #ff7a18; --soft: #ffa052; --tint: rgba(255, 122, 24, 0.12);
  --display: "Poppins", system-ui, sans-serif; --mark: "Quicksand", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5.5vw, 88px); --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 400 17px/1.6 var(--display); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--soft); outline-offset: 3px; border-radius: 6px; }
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.display { margin: 0; font: 800 1em/0.92 var(--display); letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }
.eyebrow { margin: 0; color: var(--orange); font: 700 13px/1 var(--mark); letter-spacing: 0.16em; text-transform: uppercase; }
.lede { max-width: 34em; margin: 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; font: 600 15px/1 var(--display); text-decoration: none; white-space: nowrap; transition: transform 0.25s var(--ease), background-color 0.25s, border-color 0.25s; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: var(--soft); }
.btn--ghost { border: 1px solid rgba(244, 239, 233, 0.28); }
.btn--ghost:hover { border-color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; border-bottom: 1px solid var(--line); background: rgba(7, 6, 8, 0.84); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { display: block; width: auto; height: 28px; }
.brand span { padding-left: 12px; border-left: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.top .btn { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: 40px 72px; overflow: hidden; }
.hero__copy { display: grid; gap: 26px; position: relative; z-index: 1; }
.pill { text-decoration: none; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 13px; }
.pill b { flex: none; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--orange); color: var(--ink); font: 700 11px/1 var(--mark); letter-spacing: 0.12em; text-transform: uppercase; }
.hero h1 { font-size: clamp(48px, 6.4vw, 108px); }
.hero h1 em { color: var(--orange); font-style: normal; }
.hero__stage { position: relative; min-width: 0; height: min(66svh, 600px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(120% 90% at 70% 40%, rgba(255, 122, 24, 0.07), transparent 60%), var(--surface); overflow: hidden; }
.hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__log { position: absolute; top: 14px; right: 14px; width: min(46%, 270px); padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 6, 8, 0.78); font: 12px/1.7 var(--mono); color: var(--muted); }
.stage__log p { margin: 0 0 6px; color: var(--faint); font: 700 10px/1 var(--mark); letter-spacing: 0.14em; text-transform: uppercase; }
.stage__log ol { margin: 0; padding: 0; list-style: none; height: 8.5em; overflow: hidden; }
.stage__log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: logIn 0.4s var(--ease); }
.stage__log li span { color: var(--cream); }
.stage__log--left { left: 14px; right: auto; width: min(48%, 250px); }
.stage__note { position: absolute; left: 16px; top: 14px; max-width: 40%; color: var(--soft); font-size: 12px; line-height: 1.4; }
@keyframes logIn { from { opacity: 0; transform: translateY(6px); } }

/* sections */
section { padding-block: clamp(72px, 11vw, 150px); }
.head { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(36px, 5vw, 64px); }
.head h2 { font-size: clamp(40px, 6vw, 88px); }

/* who sees what */
.views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.view { display: grid; gap: 18px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.view--now { border-color: rgba(255, 122, 24, 0.45); background: linear-gradient(180deg, rgba(255, 122, 24, 0.08), transparent 70%), var(--surface); }
.view h3 { margin: 0; font: 600 20px/1.2 var(--display); }
.view .tag { color: var(--faint); font: 700 11px/1 var(--mark); letter-spacing: 0.14em; text-transform: uppercase; }
.view--now .tag { color: var(--orange); }
.view svg { width: 100%; height: auto; }
.view .flow { fill: none; stroke: rgba(244, 239, 233, 0.35); stroke-width: 2; stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; }
.view--now .flow { stroke: var(--orange); }
.view .node { fill: var(--raised); stroke: rgba(244, 239, 233, 0.4); stroke-width: 1.5; }
.view--now .node { stroke: var(--soft); }
.view text { fill: var(--muted); font: 600 11px var(--display); }
.seen { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--ink); font: 12.5px/1.6 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.seen b { color: var(--orange); font-weight: 600; }
.seen i { color: var(--cream); font-style: normal; }
.view p.verdict { margin: 0; color: var(--cream); font-weight: 500; }
@keyframes dash { to { stroke-dashoffset: -28; } }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.step { display: grid; gap: 14px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.step.on { opacity: 1; transform: none; }
.step:nth-child(2) { transition-delay: 0.1s; } .step:nth-child(3) { transition-delay: 0.2s; } .step:nth-child(4) { transition-delay: 0.3s; }
.step .n { color: var(--orange); font: 700 13px/1 var(--mark); letter-spacing: 0.14em; }
.step h3 { margin: 0; font: 600 20px/1.2 var(--display); }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.step svg { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--ink); }
.step code { font: 12px var(--mono); color: var(--soft); }
.s-ink { fill: var(--ink); } .s-raised { fill: var(--raised); } .s-line { fill: none; stroke: rgba(244, 239, 233, 0.3); stroke-width: 1.5; }
.s-or { fill: var(--orange); } .s-orl { fill: none; stroke: var(--orange); stroke-width: 2; }
.s-txt { fill: var(--muted); font: 600 10px var(--display); } .s-mono { fill: var(--soft); font: 10px var(--mono); }
.on .pin-hash { animation: type 2.4s steps(18) 0.4s both; }
.on .pin-check { animation: pop 0.5s var(--ease) 2.6s both; }
.on .box-in { animation: grow 0.8s var(--ease) both; } .on .box-in2 { animation: grow 0.8s var(--ease) 0.35s both; } .on .box-in3 { animation: grow 0.8s var(--ease) 0.7s both; }
.on .keys-block { animation: blink 1.6s ease-in-out 1.4s infinite; }
.on .hop { animation: hop 3.6s var(--ease) infinite; }
.on .peel1 { animation: peel 3.6s linear infinite; } .on .peel2 { animation: peel2 3.6s linear infinite; } .on .peel3 { animation: peel3 3.6s linear infinite; }
.on .reply { stroke-dasharray: 220; animation: reply 2.6s var(--ease) infinite; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes grow { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes hop { 0% { transform: translateX(0); } 30% { transform: translateX(78px); } 60% { transform: translateX(156px); } 90%, 100% { transform: translateX(234px); } }
@keyframes peel { 0%, 27% { opacity: 1; r: 18px; } 33%, 100% { opacity: 0; r: 26px; } }
@keyframes peel2 { 0%, 57% { opacity: 1; r: 13px; } 63%, 100% { opacity: 0; r: 21px; } }
@keyframes peel3 { 0%, 87% { opacity: 1; r: 8px; } 93%, 100% { opacity: 0; r: 16px; } }
@keyframes reply { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
.step svg * { transform-box: fill-box; transform-origin: center; }

/* what goes through */
.through { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { display: grid; gap: 12px; align-content: start; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.card .when { justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--tint); color: var(--soft); font: 700 11px/1 var(--mark); letter-spacing: 0.1em; text-transform: uppercase; }
.card h3 { margin: 0; font: 600 22px/1.2 var(--display); }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* numbers */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.num { display: grid; gap: 8px; padding: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 28px); border-left: 1px solid var(--line); }
.num:first-child { border-left: 0; padding-left: 0; }
.num b { font: 800 clamp(40px, 5.4vw, 76px)/1 var(--display); letter-spacing: -0.04em; color: var(--cream); }
.num b small { font-size: 0.45em; color: var(--orange); letter-spacing: 0; }
.num > span { color: var(--muted); font-size: 14px; }

/* limits + credit */
.limits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.limits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.limits li { padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); font-size: 15px; }
.limits li b { display: block; margin-bottom: 4px; color: var(--cream); font-weight: 600; }
.credit { display: grid; gap: 18px; align-content: start; }
/* Why now, the page's argument: on an orange-lit panel, its point in orange. */
.limits--why { position: relative; padding: clamp(28px, 5vw, 64px); border: 1px solid rgba(255, 122, 24, 0.45); border-radius: 28px; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 122, 24, 0.22), transparent 60%), radial-gradient(80% 80% at 100% 100%, rgba(255, 122, 24, 0.12), transparent 60%), var(--surface); box-shadow: 0 30px 90px -40px rgba(255, 122, 24, 0.45); }
.limits--why .eyebrow { color: var(--orange); }
.limits--why h2 em { color: var(--orange); font-style: normal; }
.limits--why .credit p:not(.eyebrow) { color: var(--cream); font-size: clamp(16px, 1.4vw, 19px); }
.limits--why li { border-color: rgba(255, 122, 24, 0.28); border-left: 3px solid var(--orange); background: rgba(7, 6, 8, 0.55); }
.limits--why li b { color: var(--soft); }
/* What it doesn't hide: the caveats, on a redacted panel; each says what stays visible. */
.limits--honest { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); padding: clamp(28px, 5vw, 64px); border: 1px dashed rgba(255, 122, 24, 0.5); border-radius: 28px; background: repeating-linear-gradient(135deg, rgba(255, 122, 24, 0.05) 0 2px, transparent 2px 16px), var(--surface); }
.limits--honest .credit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 18px clamp(24px, 5vw, 72px); }
.limits--honest .credit .eyebrow { grid-column: 1 / -1; color: var(--orange); }
.limits--honest h2 em { color: var(--orange); font-style: normal; }
.limits--honest .credit p:not(.eyebrow) { color: var(--cream); font-size: clamp(16px, 1.4vw, 19px); }
.limits--honest ul { grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: caveat; }
.limits--honest li { counter-increment: caveat; display: grid; align-content: start; gap: 10px; padding: 22px; border-color: rgba(255, 122, 24, 0.22); background: rgba(7, 6, 8, 0.7); }
.limits--honest li::before { content: counter(caveat, decimal-leading-zero); color: var(--orange); font: 800 34px/1 var(--display); letter-spacing: -0.03em; }
.limits--honest li b { margin: 0; }
.limits--honest .tag { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--tint); color: var(--soft); font: 700 11px/1.2 var(--mark); letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 1180px) { .limits--honest ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .limits--honest ul, .limits--honest .credit { grid-template-columns: minmax(0, 1fr); } }
.credit p { margin: 0; color: var(--muted); }
.credit a { color: var(--soft); text-underline-offset: 3px; }

.final { text-align: center; }
.final h2 { font-size: clamp(56px, 10vw, 160px); }
.final .lede { margin: 26px auto 36px; }
.final .actions { justify-content: center; }
footer { padding-block: 32px; border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--muted); }

/* rise in */
.rise { opacity: 0; transform: translateY(18px); animation: rise 0.9s var(--ease) both; animation-delay: calc(var(--d, 0) * 0.09s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* post-quantum.html: one feature per section, copy beside a stage that shows it */
.feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feature--flip .feature__copy { order: 2; }
.feature__copy { display: grid; gap: 22px; align-content: start; }
.feature__copy h2 { font-size: clamp(36px, 4.6vw, 72px); }
.feature__copy .lede b { color: var(--cream); font-weight: 500; }
.feature__stage { position: relative; min-width: 0; min-height: 460px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(110% 80% at 30% 20%, rgba(255, 122, 24, 0.06), transparent 60%), var(--surface); overflow: hidden; }
.feature__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.facts li { position: relative; padding-left: 22px; color: var(--muted); font-size: 15px; }
.facts li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.facts b { color: var(--cream); font-weight: 600; }
.facts a { color: var(--soft); text-underline-offset: 3px; }
.stage__caption { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; color: var(--faint); font-size: 12px; line-height: 1.4; text-align: center; pointer-events: none; }
.vault { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid rgba(255, 122, 24, 0.45); border-radius: 16px; background: rgba(7, 6, 8, 0.86); }
.vault b { color: var(--orange); font: 800 30px/1 var(--display); letter-spacing: -0.03em; }
.vault span { color: var(--muted); font-size: 13px; line-height: 1.3; max-width: 15em; }

/* the ENS stage: a name card, an ECDSA attack that reverts, a FORS+C write that lands */
.ens { display: grid; gap: 14px; align-content: center; padding: clamp(18px, 3vw, 32px); }
.ens__card { position: relative; display: grid; gap: 8px; padding: 22px 24px; border: 1px solid rgba(255, 122, 24, 0.4); border-radius: 20px; background: linear-gradient(160deg, rgba(255, 122, 24, 0.1), transparent 55%), var(--raised); }
.ens__tag { color: var(--faint); font: 700 11px/1 var(--mark); letter-spacing: 0.14em; text-transform: uppercase; }
.ens__name { font: 800 clamp(24px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ens__row { color: var(--muted); font: 13px/1.5 var(--mono); }
.ens__row i { color: var(--faint); font: 600 12px var(--display); font-style: normal; margin-right: 6px; }
.ens__uses { color: var(--orange); font-style: normal; font-weight: 700; }
.ens__seal { position: absolute; top: 18px; right: 18px; padding: 5px 10px; border-radius: 999px; background: var(--orange); color: var(--ink); font: 700 11px/1 var(--mark); letter-spacing: 0.1em; text-transform: uppercase; }
.ens__attack, .ens__ok { position: relative; display: grid; gap: 6px; padding: 16px 124px 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); overflow: hidden; }
.ens__who { color: var(--faint); font: 700 11px/1 var(--mark); letter-spacing: 0.12em; text-transform: uppercase; }
.ens__ok .ens__who { color: var(--soft); }
.ens code, .swap__attack code { display: block; color: var(--cream); font: 12.5px/1.5 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ens__stamp { position: absolute; right: 14px; top: 50%; padding: 6px 12px; border: 2px solid var(--orange); border-radius: 10px; color: var(--orange); font: 800 14px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; transform: translateY(-50%) rotate(-8deg); background: rgba(7, 6, 8, 0.9); }
.ens__stamp--ok { border-color: var(--soft); background: var(--orange); color: var(--ink); transform: translateY(-50%) rotate(0); }
.on .ens__attack code { animation: ensType 7s steps(34) infinite; }
.on .ens__attack .ens__stamp { animation: ensSlam 7s var(--ease) infinite; }
.on .ens__attack { animation: ensShake 7s ease-in-out infinite; }
.on .ens__ok code { animation: ensType2 7s steps(34) infinite; }
.on .ens__ok .ens__stamp { animation: ensDone 7s var(--ease) infinite; }
.on .ens__ok { animation: ensGlow 7s ease-in-out infinite; }
@keyframes ensType { 0% { clip-path: inset(0 100% 0 0); } 22%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes ensSlam { 0%, 24% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(2.2); } 29%, 92% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes ensShake { 0%, 27% { transform: none; } 29% { transform: translateX(-6px); } 31% { transform: translateX(5px); } 33% { transform: translateX(-3px); } 35%, 100% { transform: none; } }
@keyframes ensType2 { 0%, 40% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes ensDone { 0%, 62% { opacity: 0; transform: translateY(-50%) scale(0.6); } 67%, 92% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
@keyframes ensGlow { 0%, 62% { border-color: var(--line); } 67%, 92% { border-color: rgba(255, 122, 24, 0.6); } 100% { border-color: var(--line); } }

/* the swap stage: a v4 pool trading, and the frame transaction that did it */
.swap { display: grid; grid-template-rows: auto auto; gap: 8px; align-content: center; padding: clamp(18px, 3vw, 32px); }
.pool { width: 100%; max-width: 420px; height: auto; justify-self: center; }
.pool__ring { fill: none; stroke: rgba(244, 239, 233, 0.12); stroke-width: 14; }
.pool__flow { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 4 14; stroke-linecap: round; opacity: 0.9; }
.on .pool__flow { animation: poolFlow 1.4s linear infinite; }
.pool__tok circle { fill: var(--raised); stroke: rgba(244, 239, 233, 0.45); stroke-width: 1.5; }
.pool__tok--b circle { stroke: var(--soft); }
.pool__tok text { fill: var(--cream); font: 700 12px var(--display); text-anchor: middle; }
.pool__mid { fill: var(--cream); font: 800 16px var(--display); text-anchor: middle; text-transform: uppercase; letter-spacing: -0.02em; }
.pool__fee { fill: var(--faint); font: 600 10px var(--display); text-anchor: middle; }
.pool__dot { fill: var(--orange); }
.pool__dot--b { fill: var(--soft); }
@keyframes poolFlow { to { stroke-dashoffset: -36; } }
.tx { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--ink); }
.tx__head { color: var(--faint); font: 700 11px/1 var(--mark); letter-spacing: 0.12em; text-transform: uppercase; }
.tx__frame { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); min-width: 0; }
.tx__frame b { flex: none; width: 4.6em; font: 700 12px/1.3 var(--mark); letter-spacing: 0.08em; color: var(--cream); }
.tx__frame span { min-width: 0; color: var(--muted); font: 12px/1.4 var(--mono); overflow-wrap: anywhere; }
.tx__frame--v { border-color: rgba(255, 122, 24, 0.5); }
.tx__frame--v b { color: var(--orange); }
.tx__frame--x { background: transparent; border-style: dashed; }
.tx__frame--x b, .tx__frame--x span { color: var(--faint); }
.tx__frame--x::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--orange); transform-origin: left; transform: scaleX(1); }
.on .tx__frame { animation: txIn 6s var(--ease) infinite both; }
.on .tx__frame:nth-of-type(2) { animation-delay: 0.5s; }
.on .tx__frame:nth-of-type(3) { animation-delay: 1s; }
.on .tx__frame--x::after { animation: txStrike 6s var(--ease) 1s infinite both; }
@keyframes txIn { 0% { opacity: 0; transform: translateY(10px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes txStrike { 0%, 14% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }

.swap__attack { padding-right: 168px; }
.swap__attack .ens__stamp { text-transform: none; letter-spacing: 0; font-size: 13px; }
.facts code { color: var(--soft); font: 13px var(--mono); }

/* what you can do now: a table of links */
.table { display: grid; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--surface); }
.trow { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 20px 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; text-decoration: none; transition: background-color 0.2s; }
.trow:first-child { border-top: 0; }
a.trow:hover { background: var(--raised); }
a.trow:hover span:first-child b { color: var(--orange); }
.trow b { color: var(--cream); font-weight: 600; transition: color 0.2s; }
.trow span:last-child { color: var(--soft); }
.trow--head { padding-block: 14px; background: var(--ink); color: var(--faint); font: 700 11px/1.4 var(--mark); letter-spacing: 0.14em; text-transform: uppercase; }
.trow--head span:last-child { color: var(--faint); }

/* unseen.html, "What goes through it": each card's picture, played once it is on screen */
.art { width: 100%; height: auto; border-radius: 16px; background: var(--ink); }
.art text { fill: var(--muted); font: 600 9.5px var(--display); }
.art .a-strong { fill: var(--cream); font-size: 10.5px; }
.art .a-mono { fill: var(--soft); font: 10px var(--mono); }
.art .a-field, .art .a-box { fill: var(--raised); stroke: rgba(244, 239, 233, 0.25); stroke-width: 1.2; }
.art .a-line { fill: none; stroke: rgba(244, 239, 233, 0.2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.art .a-hop { fill: var(--raised); stroke: var(--soft); stroke-width: 1.4; }
.art .a-go { fill: var(--orange); }
.art .a-back { fill: var(--soft); opacity: 0; }
.art-note { margin: 0; color: var(--faint); font-size: 13px; }
.art-note b { color: var(--orange); font-weight: 700; }
.on .art--ens .a-type { animation: aType 6s steps(16) infinite; }
.on .art--ens .a-go { animation: aGo 6s var(--ease) infinite; }
.on .art--ens .a-back { animation: aBack 6s var(--ease) infinite; }
.on .art--ens .a-sees { animation: aSees 6s infinite; }
.on .art--ens .a-result { animation: aResult 6s infinite; }
@keyframes aType { 0% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0); } }
@keyframes aGo { 0%, 18% { transform: none; opacity: 1; } 46% { transform: translateX(206px); opacity: 1; } 48%, 100% { transform: translateX(206px); opacity: 0; } }
@keyframes aBack { 0%, 48% { opacity: 0; transform: none; } 50% { opacity: 1; transform: none; } 78% { opacity: 1; transform: translateX(-206px); } 80%, 100% { opacity: 0; transform: translateX(-206px); } }
@keyframes aSees { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aResult { 0%, 78% { opacity: 0; } 82%, 96% { opacity: 1; } 100% { opacity: 0; } }
.art .a-track { fill: var(--raised); stroke: rgba(244, 239, 233, 0.3); transition: fill 0.4s 0.4s, stroke 0.4s 0.4s; }
.art .a-knob { fill: var(--cream); transition: transform 0.4s var(--ease) 0.4s, fill 0.4s 0.4s; }
.on .art .a-track { fill: var(--orange); stroke: var(--orange); }
.on .art .a-knob { transform: translateX(20px); fill: var(--ink); }
.art--acct .a-go { opacity: 0; }
.on .art--acct .a-call { animation: aCall 3.6s infinite both; }
.on .art--acct .a-go { animation: aFly 3.6s var(--ease) infinite both; }
.on .art--acct .a-c2 { animation-delay: 1.2s; }
.on .art--acct .a-c3 { animation-delay: 2.4s; }
@keyframes aCall { 0%, 40%, 100% { opacity: 0.35; } 8%, 30% { opacity: 1; } }
@keyframes aFly { 0% { transform: none; opacity: 0; } 6% { opacity: 1; } 34% { transform: translateX(64px); opacity: 1; } 38%, 100% { transform: translateX(64px); opacity: 0; } }
.art--way .a-servers { opacity: 0.35; }
.art--way .a-strike { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-dasharray: 150; }
.art--way .a-off { fill: var(--orange); font-weight: 700; }
.art--way .a-step { fill: var(--raised); stroke: var(--soft); stroke-width: 1.4; }
.art--way .a-note { fill: var(--orange); }
.on .art--way .a-servers { animation: aDim 8s infinite; }
.on .art--way .a-strike { animation: aStrike 8s var(--ease) infinite; }
.on .art--way .a-off { animation: aOff 8s infinite; }
.on .art--way .a-s1 { animation: aLight1 8s infinite; }
.on .art--way .a-s3 { animation: aLight3 8s infinite; }
.on .art--way .a-note { animation: aNote 8s var(--ease) infinite; }
@keyframes aDim { 0%, 6% { opacity: 1; } 14%, 96% { opacity: 0.35; } 100% { opacity: 1; } }
@keyframes aStrike { 0%, 6% { stroke-dashoffset: 150; } 14%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 150; } }
@keyframes aOff { 0%, 10% { opacity: 0; } 16%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aLight1 { 0%, 18% { fill: var(--raised); } 22%, 96% { fill: var(--orange); } 100% { fill: var(--raised); } }
@keyframes aLight3 { 0%, 82% { fill: var(--raised); } 86%, 96% { fill: var(--orange); } 100% { fill: var(--raised); } }
@keyframes aNote { 0%, 18% { opacity: 0; transform: none; } 22%, 68% { opacity: 1; transform: none; } 86% { opacity: 1; transform: translateX(220px); } 92%, 100% { opacity: 0; transform: translateX(240px); } }

/* post-quantum.html #stealth-flow: a stealth payment, five scenes; the shown one is .is-on */
.sflow { display: grid; gap: 22px; padding-block-start: 0; }
.sflow__title { margin: 0; font: 600 clamp(22px, 2.4vw, 32px)/1.2 var(--display); }
.sflow__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.sflow__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; align-content: start; }
.sflow__steps button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--muted); font: 500 15px/1.3 var(--display); text-align: left; cursor: pointer; transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.sflow__steps button b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); font: 700 13px/1 var(--mark); }
.sflow__steps button:hover { color: var(--cream); }
.sflow__steps button[aria-selected="true"] { border-color: rgba(255, 122, 24, 0.55); background: linear-gradient(90deg, rgba(255, 122, 24, 0.1), transparent 70%), var(--surface); color: var(--cream); }
.sflow__steps button[aria-selected="true"] b { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.sflow__stage { display: grid; gap: 12px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(110% 80% at 70% 10%, rgba(255, 122, 24, 0.06), transparent 60%), var(--surface); min-width: 0; }
.sflow__svg { width: 100%; height: auto; border-radius: 16px; background: var(--ink); }
.sflow__cap { margin: 0; min-height: 4.8em; color: var(--muted); font-size: 15px; }
.sflow__cap a { color: var(--soft); text-underline-offset: 3px; }
.sflow__cap b { color: var(--cream); font-weight: 600; }
.sflow__note { margin: 0; max-width: 60em; color: var(--faint); font-size: 13px; }
.sf-step { opacity: 0; transition: opacity 0.35s; }
.sf-step.is-on { opacity: 1; }
.sflow__svg text { fill: var(--muted); font: 600 12px var(--display); }
.sflow__svg .sf-t { fill: var(--cream); font-size: 14px; }
.sflow__svg .sf-s { fill: var(--muted); font-size: 12px; }
.sflow__svg .sf-m { fill: var(--soft); font: 12px var(--mono); }
.sflow__svg .sf-c { fill: var(--ink); font: 700 12px var(--display); }
.sflow__svg .sf-tag { fill: var(--faint); font: 600 11px var(--mono); }
.sflow__svg .sf-tag2 { fill: var(--orange); font-weight: 700; }
.sf-node { fill: var(--raised); stroke: rgba(244, 239, 233, 0.4); stroke-width: 1.5; }
.sf-node--me { stroke: var(--orange); stroke-width: 2; }
.sf-node--dim { opacity: 0.4; }
.sf-box { fill: var(--raised); stroke: rgba(244, 239, 233, 0.28); stroke-width: 1.3; }
.sf-box--hot { stroke: var(--orange); }
.sf-chip { fill: var(--orange); }
.sf-chip2 { fill: var(--raised); stroke: rgba(244, 239, 233, 0.18); }
.sf-hit { stroke: var(--orange); stroke-width: 1.8; }
.sf-path { fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-dasharray: 5 5; }
.sf-secret { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 2 6; }
.sf-lock rect { fill: var(--orange); }
.sf-lock path { fill: none; stroke: var(--orange); stroke-width: 2.2; }
.sf-ring { fill: none; stroke: rgba(244, 239, 233, 0.22); stroke-width: 1.4; }
.sf-dot { fill: var(--raised); stroke: var(--soft); stroke-width: 1.2; }
.sf-coin circle { fill: var(--orange); }
.sf-coin { opacity: 0; }
.sf-scan { fill: rgba(255, 122, 24, 0.1); stroke: rgba(255, 122, 24, 0.5); opacity: 0; }
.sflow__svg g, .sflow__svg rect, .sflow__svg circle, .sflow__svg path, .sflow__svg text { transform-box: fill-box; transform-origin: center; }
/* base styles are each scene's last frame, so reduced motion shows the outcome */
.sf-fly1 { transform: translate(270px, 30px); }
.sf-fly4 { transform: translateX(56px); }
.is-on .sf-fly1 { animation: sfFly1 1.6s var(--ease) 0.3s both; }
.is-on .sf-glow1 { animation: sfGlow 0.8s var(--ease) 1.8s both; }
.is-on .sf-draw { stroke-dasharray: 160; animation: sfDraw 1s var(--ease) 0.2s both; }
.is-on .sf-pop1 { animation: sfPop 0.5s var(--ease) 1s both; }
.is-on .sf-pop2 { animation: sfPop 0.5s var(--ease) 1.5s both; }
.is-on .sf-secret { animation: sfSecret 0.9s var(--ease) 1.5s both; }
.is-on .sf-pop3 { animation: sfPop 0.6s var(--ease) 2.4s both; }
.is-on .sf-coin { animation: sfCoin 1.4s var(--ease) 0.8s both; }
.is-on .sf-dot--me { animation: sfBlink 0.8s ease-in-out 0.2s 2; }
.is-on .sf-fly4 { animation: sfFly4 1.4s var(--ease) 0.4s both; }
.is-on .sf-glow4 { animation: sfGlow 0.8s var(--ease) 1.8s both; }
.is-on .sf-scan { animation: sfScan 2.8s linear 0.3s both; }
.is-on .sf-tag { animation: sfPop 0.3s var(--ease) both; }
.is-on .sf-tag0 { animation-delay: 0.5s; } .is-on .sf-tag1 { animation-delay: 1.05s; } .is-on .sf-tag2 { animation-delay: 1.6s; } .is-on .sf-tag3 { animation-delay: 2.15s; } .is-on .sf-tag4 { animation-delay: 2.7s; }
.is-on .sf-hit { animation: sfGlow 0.6s var(--ease) 1.6s both; }
.is-on .sf-draw5 { stroke-dasharray: 40; animation: sfDraw5 0.6s var(--ease) 3.2s both; }
.is-on .sf-pop5 { animation: sfPop 0.6s var(--ease) 3.6s both; }
@keyframes sfFly1 { from { transform: none; } to { transform: translate(270px, 30px); } }
@keyframes sfFly4 { from { transform: none; opacity: 1; } to { transform: translateX(56px); opacity: 1; } }
@keyframes sfGlow { from { stroke: rgba(244, 239, 233, 0.28); } to { stroke: var(--orange); } }
@keyframes sfDraw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes sfDraw5 { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes sfSecret { from { stroke-dashoffset: 400; stroke-dasharray: 400; } to { stroke-dashoffset: 0; stroke-dasharray: 400; } }
@keyframes sfPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sfCoin { 0% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translateX(66px); } 100% { opacity: 0; transform: translateX(70px); } }
@keyframes sfBlink { 50% { fill: var(--orange); } }
@keyframes sfScan { 0% { opacity: 1; transform: none; } 92% { opacity: 1; transform: translateY(136px); } 100% { opacity: 0; transform: translateY(136px); } }
.contrast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.contrast__row { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contrast__row--pq { border-color: rgba(255, 122, 24, 0.45); }
.contrast__who { color: var(--faint); font: 700 11px/1.3 var(--mark); letter-spacing: 0.12em; text-transform: uppercase; }
.contrast__row--pq .contrast__who { color: var(--orange); }
.contrast svg { width: 100%; height: auto; }
.contrast p { margin: 0; color: var(--muted); font-size: 14px; }
.c-dot { fill: var(--raised); stroke: rgba(244, 239, 233, 0.45); stroke-width: 1.2; }
.c-link { fill: none; stroke: var(--cream); stroke-width: 1.3; stroke-dasharray: 280; opacity: 0.75; }
.c-fail { fill: none; stroke: var(--orange); stroke-width: 1.3; stroke-dasharray: 280; stroke-dashoffset: 150; }
.c-x { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; }
.contrast.on .c-link { animation: cLink 4.4s var(--ease) infinite both; }
.contrast.on .c-fail { animation: cFail 4.4s var(--ease) infinite both; }
.contrast.on .c-x { animation: cX 4.4s var(--ease) infinite both; }
.contrast.on .c-link1, .contrast.on .c-fail1 { animation-delay: 0.25s; }
.contrast.on .c-link2, .contrast.on .c-fail2 { animation-delay: 0.5s; }
.contrast.on .c-link3, .contrast.on .c-fail3 { animation-delay: 0.75s; }
@keyframes cLink { 0% { stroke-dashoffset: 280; opacity: 0.75; } 40%, 88% { stroke-dashoffset: 0; opacity: 0.75; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cFail { 0% { stroke-dashoffset: 280; opacity: 1; } 36% { stroke-dashoffset: 150; opacity: 1; } 62%, 100% { stroke-dashoffset: 150; opacity: 0; } }
@keyframes cX { 0%, 34% { opacity: 0; } 40%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* post-quantum.html: three tries at one thing, 10 s a loop (#names, #guard) */
.trio .ens__attack, .trio .ens__ok { padding-right: 160px; }
.trio .ens__stamp { text-transform: none; letter-spacing: 0; font-size: 13px; }
.trio__then { color: var(--soft); font: 12px/1.5 var(--mono); }
.on.trio .ens__attack, .on.trio .ens__ok { animation: none; }
.on.trio .trio__r1 code { animation: tType1 10s steps(34) infinite; }
.on.trio .trio__r1 .ens__stamp { animation: tSlam1 10s var(--ease) infinite; }
.on.trio .trio__r2 code { animation: tType2 10s steps(34) infinite; }
.on.trio .trio__r2 .ens__stamp { animation: tSlam2 10s var(--ease) infinite; }
.on.trio .trio__r3 { animation: tGlow 10s ease-in-out infinite; }
.on.trio .trio__r3 code { animation: tType3 10s steps(34) infinite; }
.on.trio .trio__r3 .ens__stamp { animation: tDone 10s var(--ease) infinite; }
.on.trio .trio__then { animation: tThen 10s var(--ease) infinite; }
@keyframes tType1 { 0% { clip-path: inset(0 100% 0 0); } 12%, 100% { clip-path: inset(0); } }
@keyframes tType2 { 0%, 30% { clip-path: inset(0 100% 0 0); } 42%, 100% { clip-path: inset(0); } }
@keyframes tType3 { 0%, 60% { clip-path: inset(0 100% 0 0); } 72%, 100% { clip-path: inset(0); } }
@keyframes tSlam1 { 0%, 13% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(2.2); } 17%, 94% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes tSlam2 { 0%, 43% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(2.2); } 47%, 94% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translateY(-50%) rotate(-8deg) scale(1); } }
@keyframes tDone { 0%, 73% { opacity: 0; transform: translateY(-50%) scale(0.6); } 77%, 94% { opacity: 1; transform: translateY(-50%) scale(1); } 100% { opacity: 0; transform: translateY(-50%) scale(1); } }
@keyframes tThen { 0%, 79% { opacity: 0; } 84%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tGlow { 0%, 73% { border-color: var(--line); } 77%, 94% { border-color: rgba(255, 122, 24, 0.6); } 100% { border-color: var(--line); } }
/* #names: the ENSv2 tree a lookup walks */
.tree { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--ink); }
.tree text { fill: var(--cream); font: 600 10.5px var(--display); }
.tree .t-label { fill: var(--faint); font: 700 9px var(--mark); letter-spacing: 0.08em; }
.tree .t-small { fill: var(--muted); font-size: 9.5px; }
.tree .t-edge { fill: none; stroke: rgba(244, 239, 233, 0.22); stroke-width: 1.5; stroke-dasharray: 4 5; }
.tree .t-node { fill: var(--raised); stroke: rgba(244, 239, 233, 0.3); stroke-width: 1.2; }
.tree .t-node--pq { stroke: var(--orange); stroke-width: 1.8; }
.tree .t-lock { fill: var(--orange); }
.tree .t-lock-text { fill: var(--ink); font-weight: 700; font-size: 9px; }
.tree .t-lock-sub { font-weight: 600; font-size: 8.5px; }
.tree .t-go { fill: var(--orange); }
.tree .t-result { fill: var(--soft); font: 11px var(--mono); }
.on .tree .t-go { animation: tWalk 8s var(--ease) infinite; }
.on .tree .t-result { animation: tResult 8s infinite; }
@keyframes tWalk { 0%, 6% { transform: none; opacity: 1; } 18%, 22% { transform: translateX(86px); } 32%, 36% { transform: translateX(177px); } 46%, 50% { transform: translateX(270px); opacity: 1; } 54%, 100% { transform: translateX(270px); opacity: 0; } }
@keyframes tResult { 0%, 50% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .hero__stage { height: 440px; }
  .views, .through { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .limits { grid-template-columns: minmax(0, 1fr); }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .num:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__copy { order: 0; }
  .feature__stage { min-height: 420px; }
  .sflow__grid, .contrast { grid-template-columns: minmax(0, 1fr); }
  .sflow__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sflow__steps button { justify-content: center; padding: 10px 6px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .brand span { display: none; }
  .stage__log { width: 58%; }
  .stage__note { display: none; }
  .trow { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 18px; }
  .trow--head { display: none; }
  .vault { left: 16px; right: 16px; }
  .stage__log--left ol { height: 3.4em; }
  .ens__attack, .ens__ok { padding-right: 96px; }
  .swap__attack { padding-right: 140px; }
  .trio .ens__attack, .trio .ens__ok { padding-right: 128px; }
  .trio .ens__stamp { font-size: 11.5px; }
  .trio code { white-space: normal; overflow-wrap: anywhere; }
  .sflow__steps button span { display: none; }
  .ens__stamp { right: 10px; padding: 5px 9px; font-size: 12px; }
  .pill { padding-right: 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .step { opacity: 1; transform: none; }
}

/* ethglobal-mumbai.html: the chapter nav under the hero, and Unseen's stage as a chapter */
.hero--chapter { min-height: auto; padding-block: clamp(72px, 11vw, 150px); }
.hero--chapter h2 { font-size: clamp(44px, 6vw, 96px); }
.hero--chapter h2 em, .final h2 em { color: var(--orange); font-style: normal; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 64px); }


/* The site's own floating nav (site/style.css), on ethglobal-mumbai.html */
:root { --nav-h: 88px; }
/* ── nav: a floating bar, its menus open into panels below it ─────────── */
.nav {
  position: sticky; top: 0; z-index: 30;
  height: var(--nav-h);
  padding: 12px max(12px, calc(var(--gutter) - 20px), env(safe-area-inset-right, 0px)) 0 max(12px, calc(var(--gutter) - 20px), env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.nav__bar {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  height: 64px; padding: 0 10px 0 20px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--raised); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
/* The bar waits out the opening, like the hero's own buttons, and slides in as the ring steps aside. */
.js:has(.hero:not(.show-rest)) .nav__bar { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.brand { flex: none; }
.brand img { width: auto; height: 26px; }
.menu { display: flex; gap: 4px; margin-left: auto; }
.menu__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: none; color: var(--muted); font: 500 15px var(--display); cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}
.menu__trigger:hover, .menu__trigger[aria-expanded="true"] { color: var(--cream); background: rgba(244, 239, 233, 0.06); }
.menu__trigger svg { width: 10px; height: 6px; transition: transform 0.25s var(--ease); }
.menu__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__cta { margin-left: 12px; }

/* ── the updates bell: a native popover under the bar ─────────────────── */
.bell {
  position: relative; display: inline-grid; place-content: center; flex: none;
  width: 40px; height: 40px; margin-left: 8px; border: 0; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer; transition: color 0.2s, background-color 0.2s;
}
.bell:hover, .bell:focus-visible { color: var(--cream); background: rgba(244, 239, 233, 0.06); }
.bell svg { width: 21px; height: 21px; }
.bell__dot {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; box-sizing: content-box;
  border: 2px solid var(--raised); border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 0 rgba(255, 122, 24, 0.6); animation: beacon 2.4s infinite;
}
.bell.is-read .bell__dot { display: none; }
.updates {
  inset: calc(var(--nav-h) + 6px) max(12px, calc(var(--gutter) - 20px)) auto auto;
  width: min(380px, calc(100vw - 24px)); margin: 0; padding: 16px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--raised); color: var(--cream); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.updates:popover-open { animation: drop 0.25s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.updates__label { margin: 2px 2px 12px; color: var(--faint); font: 700 12px/1 var(--mark); letter-spacing: 0.14em; text-transform: uppercase; }
.updates__item {
  display: flex; gap: 14px; padding: 14px; border: 1px solid rgba(255, 122, 24, 0.24); border-radius: 14px;
  background: linear-gradient(120deg, rgba(255, 122, 24, 0.16), rgba(255, 122, 24, 0.03)); color: inherit; text-decoration: none;
}
.updates__mark { display: grid; flex: none; width: 42px; height: 42px; padding: 6px; border-radius: 12px; background: var(--orange); }
.updates__mark svg { width: 100%; height: 100%; }
.updates__item > span:last-child { display: grid; gap: 4px; }
.updates__item time { color: var(--faint); font-size: 12px; }
.updates__item b { font: 600 15px/1.3 var(--display); }
.updates__item small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.updates__item em { margin-top: 4px; color: var(--orange); font: normal 600 13px var(--display); }
.updates__item:hover em { color: var(--soft); }
.menu__toggle { display: none; }
.menu__heading { display: none; }

.menu__sheet { position: absolute; left: 0; right: 0; top: calc(100% + 10px); }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 28px; border: 1px solid var(--line); border-radius: 22px;
  background: var(--raised); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(0.985); transform-origin: top center;
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
}
.menu__panel[data-open] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.menu__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.menu__col { display: grid; align-content: start; gap: 2px; }
.menu__label { margin: 0 0 10px 16px; color: var(--faint); font: 700 11px/1 var(--mark); letter-spacing: 0.16em; text-transform: uppercase; }
.menu__link { display: grid; gap: 3px; padding: 12px 16px; border-radius: 12px; text-decoration: none; transition: background-color 0.2s; }
.menu__link strong { color: var(--cream); font: 500 16px/1.3 var(--display); transition: color 0.2s; }
.menu__link span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.menu__link:hover { background: rgba(244, 239, 233, 0.05); }
.menu__link:hover strong { color: var(--soft); }
.menu__popular { display: grid; align-content: start; gap: 10px; padding: 20px 18px 18px; border-radius: 16px; background: var(--ink); }
.menu__popular .menu__label { margin-left: 4px; }
.menu__card {
  display: grid; gap: 4px; padding: 18px 20px; border-radius: 14px;
  background: linear-gradient(135deg, var(--orange), #ff9a4d); color: var(--ink); text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.menu__card strong { font: 600 17px/1.3 var(--display); }
.menu__card span { font-size: 14px; opacity: 0.78; }
.menu__card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 122, 24, 0.25); }
.menu__card--dark { background: var(--surface); color: var(--cream); border: 1px solid var(--line); }
.menu__card--dark:hover { box-shadow: none; border-color: rgba(255, 122, 24, 0.45); }
/* An open panel's links arrive one after another. */
.menu__panel[data-open] :is(.menu__link, .menu__card) { animation: menu-in 0.45s var(--ease) both; animation-delay: calc(var(--i, 0) * 28ms + 40ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 860px) {
  :root { --nav-h: 76px; }
  .nav__bar { height: 60px; padding: 0 8px 0 16px; border-radius: 16px; }
  .menu { display: none; }
  .bell { margin-left: auto; }
  .nav__cta { margin-left: 8px; }
  .menu__toggle { flex: none; }
  .menu__toggle {
    display: inline-grid; place-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: 4px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  }
  .menu__toggle span { width: 18px; height: 1.5px; border-radius: 2px; background: var(--cream); transition: transform 0.25s var(--ease); }
  .menu__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .menu__sheet {
    display: none; top: calc(100% + 8px);
    max-height: calc(100svh - var(--nav-h) - 20px); overflow-y: auto;
    padding: 8px; border: 1px solid var(--line); border-radius: 18px;
    background: var(--raised); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  }
  .nav[data-sheet] .menu__sheet { display: block; animation: menu-in 0.25s var(--ease) both; }
  .menu__panel { position: static; padding: 12px 4px; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .menu__heading { display: block; margin: 4px 16px 12px; color: var(--cream); font: 600 20px var(--display); }
  .menu__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.btn--small { min-height: 40px; padding: 0 18px; font-size: 14px; }
.badge { margin-left: 6px; padding: 3px 7px; border-radius: 6px; background: var(--orange); color: var(--ink); font: 700 10px/1 var(--mark); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; }
.menu__link .badge { color: var(--ink); }
@media (max-width: 420px) { .nav__bar { gap: 4px; } .nav__cta { padding: 0 14px; } }

/* ethglobal-mumbai.html: the landing page's "Go private." banner and its two cards (site/style.css
   .final and .duo). .final is taken on this page, so the banner is .go here. */
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: #221b24; }
@keyframes spin { to { transform: rotate(360deg); } }
.can-reveal [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.can-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* At the top of the page, so the panel fills the first screen under the nav. */
.go { padding: 8px clamp(12px, 2vw, 32px) clamp(24px, 4vw, 64px); }
.go__panel {
  --t: 0;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(calc(100svh - var(--nav-h) - 16px), 940px);
  display: grid; place-items: center; align-content: center; text-align: center;
  padding: 80px var(--gutter) 96px;
  border: 1px solid rgba(255, 122, 24, 0.2); border-radius: 36px;
  background: radial-gradient(80% 60% at 50% 115%, rgba(255, 122, 24, 0.42), transparent 70%), #0f0b0d;
}
.go__ring { width: min(100%, 560px); height: clamp(180px, 26vh, 300px); pointer-events: none; }
.go__copy { position: relative; z-index: 1; display: grid; gap: 32px; justify-items: center; }
.go__title { font-size: clamp(64px, 10vw, 184px); }
.fine { margin: 0; color: var(--faint); font: 700 12px/1.4 var(--mark); letter-spacing: 0.14em; text-transform: uppercase; text-wrap: balance; }
.go__note, .go__phone { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
.go__note {
  left: 3%; top: 26%;
  width: clamp(240px, 22vw, 340px); aspect-ratio: 1.586;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 22px 24px;
  border-radius: 22px; text-align: left; color: var(--ink);
  background: linear-gradient(135deg, #ffb46e, var(--orange) 45%, #b84a00);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(calc(var(--t) * -90px)) rotate(calc(-24deg + var(--t) * 10deg));
}
.go__note-top, .go__note-foot { display: flex; justify-content: space-between; align-items: center; }
.go__note-top img { display: block; width: auto; height: 18px; filter: brightness(0); }
.go__note em { font: 700 10px/1 var(--mark); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.go__note-ring { align-self: center; width: 64px; }
.go__note-ring svg { display: block; width: 100%; animation: spin 20s linear infinite; }
.go__note-foot b { font: 700 26px/1 var(--mark); }
.go__phone { right: 3%; bottom: -18%; transform: translateY(calc(var(--t) * -110px)) rotate(calc(14deg - var(--t) * 8deg)); }
.go__phone .phone { --pw: clamp(220px, 19vw, 280px); }

/* The wallet's home screen, from the landing page's phone. */
.phone {
  position: relative; flex: none;
  width: var(--pw); aspect-ratio: 9 / 19.2;
  padding: calc(var(--pw) * 0.028);
  border: 2px solid #2c2730; border-radius: calc(var(--pw) * 0.14);
  background: rgb(22 19 24); box-shadow: 0 40px 90px rgb(0 0 0 / 0.55);
  font-size: calc(var(--pw) / 23); line-height: 1.35; text-align: left; user-select: none;
}
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.115); background: #0b090c; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0b090c; }
.screen__status, .screen__tabs { position: relative; z-index: 1; background: #0b090c; }
.screen__status { display: flex; justify-content: space-between; align-items: center; padding: 1.1em 1.9em 0.5em; font-size: 0.8em; }
.screen__status b { font-weight: 600; }
.screen__bars { display: flex; align-items: flex-end; gap: 0.2em; }
.screen__bars i { width: 0.26em; border-radius: 1px; background: var(--cream); }
.screen__bars i:nth-child(1) { height: 0.4em; } .screen__bars i:nth-child(2) { height: 0.6em; } .screen__bars i:nth-child(3) { height: 0.8em; } .screen__bars i:nth-child(4) { height: 1em; }
.screen__body { flex: 1; min-height: 0; padding: 0.6em 1.2em 0; }
.screen b { font-weight: 600; }
.screen small { color: var(--muted); font-size: 0.75em; }
.screen em { font-style: normal; }
.screen__account { display: flex; align-items: center; gap: 0.6em; }
.screen__account > span:nth-child(2), .screen__card > span, .screen__list li > span { display: grid; line-height: 1.3; }
.screen__account em { margin-left: auto; color: var(--muted); }
.screen__mark { display: grid; flex: none; width: 2.3em; height: 2.3em; padding: 0.3em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0.2em rgba(255, 122, 24, 0.12); }
.screen__mark svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.screen__eyebrow { margin: 1.5em 0 0; color: var(--muted); font: 700 0.72em/1 var(--mark); letter-spacing: 0.12em; text-transform: uppercase; }
.screen__balance { margin: 0.25em 0 0; font: 600 2.6em/1 var(--display); letter-spacing: -0.03em; }
.screen__balance small { font-size: 0.42em; letter-spacing: 0; }
.screen__hint { margin: 0.5em 0 0; color: var(--soft); font-size: 0.8em; }
.screen__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45em; margin-top: 1.3em; }
.screen__actions span { display: grid; justify-items: center; gap: 0.25em; padding: 0.75em 0 0.65em; border-radius: 0.8em; background: #18141a; font-size: 0.76em; }
.screen__actions i { color: var(--orange); font-size: 1.35em; font-style: normal; }
.screen__card { display: flex; align-items: center; margin-top: 0.9em; padding: 0.85em 1em; border-radius: 0.9em; background: #18141a; }
.screen__card em { margin-left: auto; padding: 0.45em 0.9em; border-radius: 0.6em; background: #272028; font-size: 0.8em; }
.screen__head { margin: 1.3em 0 0.3em; font-weight: 600; }
.screen__head em { color: var(--muted); }
.screen__list { margin: 0; padding: 0; list-style: none; }
.screen__list li { display: flex; align-items: center; gap: 0.75em; padding: 0.55em 0; }
.screen__list li > span:last-child { margin-left: auto; text-align: right; }
.screen__list b { font-weight: 500; font-size: 0.95em; }
.coin { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--orange); color: var(--ink); font: 700 0.9em/1 var(--mark); font-style: normal; }
.coin--dark { background: #241d26; color: var(--soft); }
.screen__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; padding: 0.7em 0.4em 1.5em; border-top: 1px solid rgba(244, 239, 233, 0.06); color: var(--muted); font-size: 0.66em; }
.screen__tabs span { display: grid; justify-items: center; gap: 0.2em; }
.screen__tabs i { font-size: 1.55em; font-style: normal; }
.screen__tabs .is-on { color: var(--cream); }
.screen__fab { align-self: center; justify-self: center; display: grid; width: 4.6em; height: 4.6em; margin-top: -2.2em; padding: 0.7em; border-radius: 50%; background: var(--orange); box-shadow: 0 0.8em 1.6em rgba(255, 122, 24, 0.35); }
.screen__fab svg { width: 100%; height: 100%; animation: spin 14s linear infinite; }

/* Two cards to start from, before the footer. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0 clamp(12px, 2vw, 32px) clamp(48px, 6vw, 96px); }
.duo__card { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 24px; min-height: 520px; padding: clamp(32px, 4vw, 56px); border-radius: 32px; }
.duo__card h2 { max-width: 8.5em; font-size: clamp(40px, 4.6vw, 76px); }
.duo__card p { max-width: 26rem; margin: 0; font-size: 18px; }
.duo__card .btn { justify-self: start; margin-top: 8px; }
.duo__card--orange { background: var(--orange); color: var(--ink); }
.duo__card--orange p { color: rgba(7, 6, 8, 0.75); }
.duo__card--dark { border: 1px solid var(--line); background: var(--surface); }
.duo__card--dark p { color: var(--muted); }
.duo__art { position: absolute; z-index: -1; right: -14%; bottom: -26%; width: 60%; aspect-ratio: 1; pointer-events: none; animation: spin 48s linear infinite; }
.duo__art svg { display: block; width: 100%; height: 100%; }
.duo__card--dark .duo__art { opacity: 0.45; animation-direction: reverse; }
@media (max-width: 1180px) { .go__note, .go__phone { display: none; } }
@media (max-width: 960px) { .duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .duo__card { min-height: 460px; } }

/* Keep MetaMask: the heading over its two cards. */
.keep { display: grid; gap: 14px; padding-block: clamp(48px, 8vw, 96px) 8px; }
.keep p { margin: 0; color: var(--muted); max-width: 40em; }
.keep .eyebrow { color: var(--orange); }
.keep h2 em { color: var(--orange); font-style: normal; }