@import url('../fonts/fonts.css');

:root {
  --void: #07090C; --panel: #0E1217; --panel2: #141A21; --line: #1F2731; --line2: #2A3440;
  --text: #E6EDF3; --soft: #AAB4C0; --muted: #7D8794;
  --lime: #C6FF3D; --green: #2EDB6E;
  --c-tron: #EB0029; --c-evm: #627EEA; --c-btc: #F7931A; --c-usdt: #26A17B; --c-usdc: #2775CA; --orange: #FF8A1F; --red: #FF4D5E;
  --sans: 'Space Grotesk', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--void); color: var(--text); font: 16px/1.55 var(--sans);
  background-image:
    radial-gradient(ellipse 900px 480px at 50% -80px, rgba(198,255,61,.09), transparent 70%);
  /* the address field behind the page is drawn by js/address-field.js */
}
a { color: inherit; }
img, canvas { display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.lime { color: var(--lime); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

/* --- nav --- */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(7,9,12,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -.03em; }
.brand canvas { width: 36px; height: 36px; }
.brand em { font-style: normal; color: var(--lime); }
.links { display: flex; gap: 28px; font-size: 15px; color: var(--soft); }
.links a { text-decoration: none; }
.links a:hover, .links a[aria-current] { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 9px; font: 600 15px var(--sans);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-pri { background: var(--lime); color: #07090C; }
.btn-pri:hover { background: #d4ff6a; }
.btn-ghost { border-color: var(--line2); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: #3a4654; }
.menu-btn { display: none; }

/* --- hero --- */
.hero { position: relative; display: flex; align-items: center; padding: 56px 0 96px;
  min-height: min(calc(100svh - 68px), 960px); }   /* the hero fills the first screen; nav is 68px */
.hero > .wrap { width: 100%; }
/* cue at the bottom of the hero: one thin chevron, slowly drifting */
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 44px;
  color: rgba(198,255,61,.85); transition: color .3s; }
.scroll-cue:hover { color: var(--lime); }
.scroll-cue svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(198,255,61,.45)); animation: drift 3.2s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(-3px); opacity: .75; } 50% { transform: translateY(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
/* radar HUD: viewfinder brackets around the disc, LIVE in the top-left corner,
   and the data feeds read out under the disc (the disc spans ~36-89% of the canvas height) */
.hud { --c: rgba(198,255,61,.38); --arm: 16px; position: absolute; inset: 22% 7% 10% 7%; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--arm) 1px, linear-gradient(var(--c), var(--c)) left top / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) right top / var(--arm) 1px, linear-gradient(var(--c), var(--c)) right top / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) left bottom / var(--arm) 1px, linear-gradient(var(--c), var(--c)) left bottom / 1px var(--arm),
    linear-gradient(var(--c), var(--c)) right bottom / var(--arm) 1px, linear-gradient(var(--c), var(--c)) right bottom / 1px var(--arm);
  background-repeat: no-repeat; }
.hud-live { position: absolute; top: 10px; left: 12px; display: flex; align-items: center; gap: 8px;
  font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--green); text-shadow: 0 0 12px rgba(46,219,110,.5); }
.hud-live .dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.hud-live .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--green); opacity: 0; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.feeds { position: absolute; top: 91.5%; left: 50%; transform: translateX(-50%); display: flex; margin: 0; white-space: nowrap; }
.feed { padding: 0 48px; }
.feed + .feed { border-left: 1px solid var(--line2); }
.feed dt { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.feed dd { margin: 0; display: flex; align-items: center; gap: 7px; font: 12.5px/1 var(--mono); color: var(--soft); }
.feed i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.feed.stale i { background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.feed.stale b { color: var(--orange); }
.feed b { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .hud-live .dot::after { animation: none; } }
h1 { font-size: clamp(42px, 6.2vw, 74px); line-height: 1.04; letter-spacing: -.04em; margin: 0; }
h1 em { font-style: normal; color: var(--lime); }
.lede { font-size: 19px; line-height: 1.65; color: var(--text); font-weight: 400; max-width: 560px; margin: 30px 0 40px; }
.lede .chain { color: var(--text); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(198,255,61,.75);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.lede .chain:hover { text-decoration-color: var(--lime); }
.lede .chk { color: var(--text); font-weight: 600; }            /* what we check: semi-bold, no underline */
.lede .fast { color: var(--lime); font-weight: 600; white-space: nowrap; }   /* the promise */
.hero-side { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-self: center; align-self: start; width: 100%; margin-top: -14.5%; }   /* centres the visible radar (frame to readout) on the text column; the canvas top is empty air */
.hero-radar { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; }
.hero-radar canvas { width: 100%; height: 100%; }

/* --- scanner --- */
.scan { display: flex; gap: 8px; padding: 8px; background: rgba(14,18,23,.92); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 0 0 4px rgba(198,255,61,.05); max-width: 620px; }
.scan:focus-within { border-color: rgba(198,255,61,.6); }
.scan span { align-self: center; padding-left: 10px; color: var(--lime); font-family: var(--mono); }
/* "Try now" sits in the field's top border like a legend: the line breaks around it */
.scan { position: relative; }
.scan .try { position: absolute; top: 0; left: 18px; transform: translateY(-50%); padding: 0 8px; background: #0E1217;
  font: 500 13px/1.4 var(--sans); letter-spacing: .01em; color: var(--lime); }
.scan input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font: 15px var(--mono); padding: 12px 6px; outline: none; }
.scan input::placeholder { color: #5b6672; }
.scan .btn { padding: 12px 22px; }
.scan .btn[disabled] { opacity: .6; cursor: progress; }
.hint { font-size: 13px; color: var(--muted); margin-top: 16px; font-family: var(--mono); }
/* transaction ID pasted: which side of it the visitor is on */
.txside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; max-width: 620px; font: 13px var(--mono); color: var(--muted); }
.txside[hidden] { display: none; }
.txside label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line2); border-radius: 10px; color: var(--soft); cursor: pointer; transition: border-color .2s, background .2s; }
.txside label:has(input:checked) { border-color: rgba(198,255,61,.55); background: rgba(198,255,61,.07); color: var(--text, #e8edf2); }
.txside input { accent-color: var(--lime); margin: 0; }
.txside small { color: var(--muted); font-size: 11px; }
.hint a { color: var(--soft); }

.result { max-width: 620px; margin-top: 18px; display: none; }
.result.show { display: block; }
.term { background: #0A0D11; border: 1px solid var(--line); border-radius: 12px; font: 13.5px/1.85 var(--mono); padding: 16px 20px; color: var(--soft); overflow-x: auto; }
.term .t { color: #55606D; }
.term .ok { color: var(--green); } .term .warn { color: var(--orange); } .term .bad { color: var(--red); }
.term .line { white-space: nowrap; }
.verdict { margin-top: 12px; border: 1px solid var(--line2); border-radius: 14px; padding: 20px 22px; background: var(--panel); display: none; }
.verdict.show { display: block; }
.verdict .top { display: flex; align-items: center; gap: 18px; }
.score { width: 74px; height: 74px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 26px; box-shadow: 0 0 26px -6px currentColor; }
.verdict h3 { margin: 2px 0 0; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.verdict .sub { color: var(--soft); font-size: 15px; }
.verdict ul { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--line); }
.verdict li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.verdict li b { font-weight: 500; }
.verdict .meta { font: 12px var(--mono); color: var(--muted); margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.verdict .note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.lvl-low { color: var(--green); } .lvl-medium { color: var(--orange); } .lvl-high, .lvl-stop { color: var(--red); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 12px var(--mono); letter-spacing: .04em; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.demo-tag { font: 600 11px var(--mono); color: #07090C; background: var(--orange); border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: middle; }
.error { margin-top: 12px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(255,77,94,.4); background: rgba(255,77,94,.08); color: #ffc2c8; font-size: 14.5px; display: none; }
.error.show { display: block; }

/* --- sections --- */
section { padding: 56px 0; }
.kicker { font: 500 13px var(--mono); color: var(--lime); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.kicker::before { content: "// "; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 14px; }
.section-lede { color: var(--soft); max-width: 640px; font-size: 18px; margin: 0 0 32px; }
/* products: a showcase. Left: heading + product tabs (auto-cycling, js/site.js). Right: one stage that
   crossfades between a larger, live-looking preview of each product. */
.showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.ptabs { position: relative; display: grid; margin-top: 12px; padding-left: 2px; }
/* the rail: a hairline down the left; the active item's stretch fills in its colour as the countdown */
.ptab { position: relative; display: grid; text-align: left; padding: 14px 0 14px 26px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.ptab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.pt-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -.5px; border-radius: 2px; background: var(--c);
  box-shadow: 0 0 8px var(--c); transform: scaleY(0); transform-origin: top; opacity: 0; transition: opacity .3s; }
.ptab.on .pt-bar { opacity: 1; animation: ptbar var(--t, 5s) linear forwards; }
.showcase.paused .ptab.on .pt-bar { animation-play-state: paused; }
/* a tab picked by click: its line fills at once and stays full (the cycle is held while the pointer is over it) */
.showcase.picked .ptab.on .pt-bar { animation: ptbar .5s cubic-bezier(.2,.7,.2,1) forwards; animation-play-state: running; }
@keyframes ptbar { to { transform: scaleY(1); } }
.pt-h { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--muted); transition: color .3s; }
.pt-h em { font: 500 12px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--muted); opacity: .7; transition: color .3s, opacity .3s; min-width: 16px; }
.ptab:hover .pt-h { color: var(--soft); }
.ptab.on .pt-h { color: var(--text); }
.ptab.on .pt-h em { color: var(--c); opacity: 1; }
/* description: only the active item shows it, opening smoothly */
.pt-d { display: grid; grid-template-rows: 0fr; padding-left: 30px; font-size: 14.5px; line-height: 1.5; color: var(--soft);
  transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1), opacity .35s, margin .45s; opacity: 0; }
.pt-d > span { overflow: hidden; }
.ptab.on .pt-d { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
/* the custom item sits apart, lighter */
.ptab.extra { margin-top: 14px; }
.ptab.extra::after { content: ""; position: absolute; left: 26px; right: 0; top: -7px; height: 1px; background: var(--line); }
.ptab.extra .pt-h { font-size: 16px; font-weight: 500; }
/* the stage */
/* the stage takes the colour of the product on show */
.stage { --c-rgb: 198,255,61; position: relative; height: 460px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(var(--c-rgb), .08), transparent 70%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 18px 18px, rgba(10,13,17,.9); backdrop-filter: blur(8px); transition: --c-rgb .5s; }
.stage:has(#sc-api.on) { --c-rgb: 46,219,110; } .stage:has(#sc-tg.on) { --c-rgb: 255,138,31; } .stage:has(#sc-custom.on) { --c-rgb: 159,208,255; }
.stage::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-rgb), .5), transparent); }
/* viewfinder corners, like the radar HUD */
.stage::after { --k: rgba(var(--c-rgb), .45); content: ""; position: absolute; inset: 64px 22px 64px; pointer-events: none;
  background: linear-gradient(var(--k), var(--k)) left top / 14px 1px, linear-gradient(var(--k), var(--k)) left top / 1px 14px,
    linear-gradient(var(--k), var(--k)) right top / 14px 1px, linear-gradient(var(--k), var(--k)) right top / 1px 14px,
    linear-gradient(var(--k), var(--k)) left bottom / 14px 1px, linear-gradient(var(--k), var(--k)) left bottom / 1px 14px,
    linear-gradient(var(--k), var(--k)) right bottom / 14px 1px, linear-gradient(var(--k), var(--k)) right bottom / 1px 14px;
  background-repeat: no-repeat; }
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.scene.on { opacity: 1; pointer-events: auto; }
.s-head, .s-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 24px; flex: none; }
.s-head { position: relative; justify-content: center; gap: 12px; border-bottom: 1px solid var(--line); }
.s-head em { min-width: 32px; text-align: center; font: 600 12px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: rgb(var(--c-rgb)); padding: 6px 8px; border-radius: 6px;
  background: rgba(var(--c-rgb), .1); border: 1px solid rgba(var(--c-rgb), .3); box-shadow: 0 0 14px -6px rgba(var(--c-rgb), .8); }
.s-head b { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.s-dots { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; }   /* stays right while the label is centred */
.s-dots i { width: 5px; height: 5px; border-radius: 3px; background: var(--line2); }
.s-dots i.on { width: 16px; background: rgb(var(--c-rgb)); box-shadow: 0 0 8px rgba(var(--c-rgb), .6); }
.s-foot { border-top: 1px solid var(--line); }
.s-foot small { font: 11.5px var(--mono); color: var(--muted); letter-spacing: .02em; }
.s-foot .go { --c: rgb(var(--c-rgb)); }
.s-foot .btn { padding: 8px 14px; font-size: 14px; }
.s-main { flex: 1; display: grid; place-items: center; padding: 26px 40px; }
/* on each switch the preview settles in, then its rows arrive one by one */
.s-main > * { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s ease .05s, transform .7s cubic-bezier(.2,.7,.2,1) .05s; }
.scene.on .s-main > * { opacity: 1; transform: none; }
.go { font: 500 14.5px var(--sans); color: var(--c); text-decoration: none; }
.go span { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.go:hover span { transform: translateX(4px); }
.go.off { color: var(--muted); }
/* telegram preview: a chat window */
.phone { width: 100%; max-width: 330px; border: 1px solid var(--line2); border-radius: 16px; background: rgba(7,9,12,.92); overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0,0,0,.9); }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.ph-top i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--lime), #6f9a10); }
.ph-top b { font-size: 13.5px; } .ph-top small { margin-left: auto; font: 11px var(--mono); color: var(--green); }
.chat { display: grid; gap: 9px; padding: 14px; }
.msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.35; }
.msg.me { justify-self: end; border-bottom-right-radius: 4px; background: rgba(255,138,31,.14); border: 1px solid rgba(255,138,31,.28); font-family: var(--mono); font-size: 12px; color: var(--text); }
.msg.bot { justify-self: start; border-bottom-left-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--line2); color: var(--soft); font-weight: 500; }
.msg.bot span { font-weight: 600; }
.msg.bot small { display: block; margin-top: 3px; font: 11px var(--mono); color: var(--muted); }
.scene .btn span { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.scene .btn:hover span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .scene, .s-main > * { transition: none; } }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.card h3 { margin: 14px 0 6px; font-size: 21px; letter-spacing: -.02em; }
.card p { margin: 0; color: var(--soft); font-size: 15px; }
.ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font: 700 14px var(--mono); }
.ico.g { background: rgba(46,219,110,.12); color: var(--green); }
.ico.o { background: rgba(255,138,31,.12); color: var(--orange); }
.ico.r { background: rgba(255,77,94,.12); color: var(--red); }
.ico.l { background: rgba(198,255,61,.12); color: var(--lime); }
.soon { font: 600 11px var(--mono); color: var(--orange); border: 1px solid rgba(255,138,31,.45); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: 3px; letter-spacing: .04em; }
/* how it works: three cards, each with a small live-looking visual of the step on top */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16,21,27,.92), rgba(10,13,17,.92)); backdrop-filter: blur(8px); transition: border-color .3s, transform .3s; }
.step:hover { border-color: rgba(198,255,61,.28); transform: translateY(-2px); }
.viz { position: relative; height: 156px; padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(198,255,61,.06), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 22px 22px; }
.txt { flex: 1; padding: 36px 28px 30px; text-align: center; }
/* step number: a round badge sitting on the line between the visual and the text */
.txt { position: relative; }
.txt .num { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 600 14px/1 var(--mono); color: var(--lime);
  background: #0D1116; border: 1px solid rgba(198,255,61,.45); box-shadow: 0 0 0 5px rgba(13,17,22,.9), 0 0 18px -4px rgba(198,255,61,.55); }
.step:hover .num { border-color: var(--lime); }
/* on hover a lime line fires out from the badge along the divider, both ways */
.txt::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(198,255,61,0), rgba(198,255,61,.85) 50%, rgba(198,255,61,0));
  transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.step:hover .txt::before { transform: scaleX(1); }
.txt .num { z-index: 1; transition: border-color .3s; }
.txt h4 { margin: 0 0 8px; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.txt p { margin: 0 auto; max-width: 300px; font-size: 14.5px; line-height: 1.6; color: var(--soft); text-wrap: balance; }
/* 01 paste */
.mini-input { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(7,9,12,.8);
  font: 13px var(--mono); color: var(--text); box-shadow: 0 0 0 3px rgba(198,255,61,.04); }
.mini-input .p { color: var(--lime); }
.caret { width: 7px; height: 15px; background: var(--lime); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.det { display: flex; gap: 8px; }
.det span { font: 600 11px/1 var(--mono); letter-spacing: .08em; color: var(--muted); padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; }
.det .on { color: var(--lime); border-color: rgba(198,255,61,.35); background: rgba(198,255,61,.07); }
/* 02 scan */
.viz-scan { gap: 8px; }
.viz-scan .row { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(7,9,12,.6); font: 12.5px var(--mono); color: var(--soft); }
.viz-scan .row b { font-weight: 500; color: var(--green); font-size: 12px; }
.sweep { position: absolute; left: 0; right: 0; top: 0; height: 40px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(198,255,61,.08) 70%, rgba(198,255,61,.5) 98%, transparent);
  animation: sweep 7s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateY(-40px); } 30%, 100% { transform: translateY(170px); } }   /* ~2s pass, then ~5s rest */
/* 03 decide */
.viz-decide { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--line2); stroke-width: 6; }
.ring .fg { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 30; filter: drop-shadow(0 0 4px rgba(255,77,94,.6)); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; letter-spacing: -.03em; }
.verdict-mini { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.verdict-mini span { font-weight: 600; font-size: 17px; }
.verdict-mini small { font: 12px var(--mono); color: var(--muted); }
.scale { position: relative; display: grid; grid-template-columns: 30fr 40fr 30fr 6fr; gap: 3px; margin-top: 8px; }
.scale i { height: 5px; border-radius: 3px; background: var(--green); opacity: .85; }
.scale i:nth-child(2) { background: var(--orange); opacity: .5; } .scale i:nth-child(3) { background: var(--red); opacity: .45; } .scale i:nth-child(4) { background: var(--red); opacity: .8; }
.scale em { position: absolute; top: -4px; width: 2px; height: 13px; border-radius: 1px; background: var(--text); box-shadow: 0 0 6px rgba(230,237,243,.6); }
/* step 3 answers step 2: on the same 7 s loop as the sweep, once its pass is done (~2 s) the ring
   fills, the score counts up to 85 (the real example: lists clear, paid a sanctioned exchange), the marker
   slides to it and the verdict appears; then it rests and resets */
@property --score { syntax: '<integer>'; inherits: false; initial-value: 0; }
.ring b { font-size: 0; counter-reset: score var(--score); --score: 85; animation: score-n 7s ease-out infinite; }
.ring b::after { content: counter(score); font-size: 26px; }
.ring .fg { animation: score-ring 7s ease-out infinite; }
.viz-decide .scale em { animation: score-mark 7s ease-out infinite; }
.verdict-mini span, .verdict-mini small { animation: score-txt 7s ease-out infinite; }
.verdict-mini small { animation-delay: .15s; }
@keyframes score-n    { 0%, 30% { --score: 0; } 46%, 90% { --score: 85; } 100% { --score: 0; } }
@keyframes score-ring { 0%, 30% { stroke-dashoffset: 201; } 46%, 90% { stroke-dashoffset: 30; } 100% { stroke-dashoffset: 201; } }
@keyframes score-mark { 0%, 30% { left: 0; opacity: 0; } 33% { opacity: 1; } 46%, 90% { left: 80%; opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes score-txt  { 0%, 42% { opacity: 0; transform: translateY(4px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret, .sweep, .ring b, .ring .fg, .viz-decide .scale em, .verdict-mini span, .verdict-mini small { animation: none; } .sweep { display: none; } }
/* how it works fills the screen too, and lands right under the sticky nav */
#how, .screen { min-height: calc(100svh - 68px); display: flex; align-items: center; scroll-margin-top: -16px; }   /* html already pads anchors by 84px; this section sits flush under the 68px nav */
#how > .wrap, .screen > .wrap { width: 100%; }
/* soft reveal (js/site.js): fade + slide up, staggered with --d */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.reveal-on [data-reveal].in { opacity: 1; transform: none; }
/* a heading that reveals word by word (Paste. Scan. Decide.): the heading itself stays put, each word
   rises in after the one before, and its lime full stop pops just after the word lands */
.reveal-on h2.words[data-reveal] { opacity: 1; transform: none; }
.words .w { display: inline-block; }
.reveal-on .words[data-reveal] .w { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
.reveal-on .words[data-reveal] .stop { display: inline-block; transform: scale(0); }
.reveal-on .words[data-reveal].in .w { opacity: 1; transform: none; filter: none;
  transition: opacity .6s ease var(--wd), transform .7s cubic-bezier(.2,.7,.2,1) var(--wd), filter .6s ease var(--wd); }
.reveal-on .words[data-reveal].in .stop { transform: none; transition: transform .45s cubic-bezier(.3,1.6,.5,1) calc(var(--wd) + .35s); }
.words .w:nth-child(1) { --wd: var(--d, 0ms); }
.words .w:nth-child(2) { --wd: calc(var(--d, 0ms) + 450ms); }
.words .w:nth-child(3) { --wd: calc(var(--d, 0ms) + 900ms); }
/* touch screens reveal once (js/site.js): quicker, shorter slide, no per-word blur (slow on phones) */
@media (pointer: coarse) {
  .reveal-on [data-reveal] { transform: translateY(14px); transition-duration: .5s, .5s; }
  .reveal-on .words[data-reveal] .w { filter: none; transform: translateY(.3em); }
  .reveal-on .words[data-reveal].in .w { transition: opacity .4s ease var(--wd), transform .45s cubic-bezier(.2,.7,.2,1) var(--wd); }
  .words .w:nth-child(2) { --wd: calc(var(--d, 0ms) + 200ms); }
  .words .w:nth-child(3) { --wd: calc(var(--d, 0ms) + 400ms); }
}
/* how it works: centred head above the symmetric cards */
#how .kicker, #how h2, #how .section-lede { text-align: center; }
/* heading accents: lime full stops, and a lime underline that draws in under the answer */
h2 .stop { font-style: normal; color: var(--lime); }
.mark { position: relative; color: var(--text); white-space: nowrap; }
.mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, var(--lime), rgba(198,255,61,.25)); transform-origin: left; }
.reveal-on [data-reveal] .mark::after { transform: scaleX(0); }
.reveal-on [data-reveal].in .mark::after { transform: scaleX(1); transition: transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0ms) + 450ms); }
.how-cta { display: flex; justify-content: center; margin-top: 48px; }
.how-cta .btn { position: relative; overflow: hidden; padding: 14px 28px; font-size: 16px;
  box-shadow: 0 0 0 0 rgba(198,255,61,0); transition: transform .2s, box-shadow .35s ease; }
/* a soft sheen glides across now and then */
.how-cta .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
  animation: shine 6.5s ease-in-out 1.5s infinite; }
@keyframes shine { 0% { left: -60%; } 18%, 100% { left: 130%; } }
.how-cta .btn:hover { background: var(--lime); box-shadow: 0 0 0 5px rgba(198,255,61,.12); }   /* colour stays put; a dim ring appears instead */
.how-cta .btn:hover::after { animation: none; left: -60%; }
.how-cta .btn:active { transform: scale(.98); box-shadow: 0 0 0 3px rgba(198,255,61,.12); transition-duration: .1s; }
.how-cta .arr { display: inline-block; }
/* the arrow slips out to the right and glides back in from the left */
.how-cta .btn:hover .arr { animation: arr-loop .6s cubic-bezier(.5,0,.2,1); }
@keyframes arr-loop { 0% { transform: none; opacity: 1; } 40% { transform: translateX(12px); opacity: 0; }
  41% { transform: translateX(-12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .how-cta .btn:hover .arr { animation: none; } }
@media (prefers-reduced-motion: reduce) { .how-cta .btn::after { animation: none; display: none; } }
#how .section-lede { margin-left: auto; margin-right: auto; margin-bottom: 40px; }
/* data sources: a registry table of what is live, and a short roadmap of what comes next */
.src-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.src-head .section-lede { margin-bottom: 0; }
.src-count { display: flex; align-items: center; gap: 14px; flex: none; padding: 14px 0 6px 28px; border-left: 1px solid var(--line); }
.src-count b { font-size: 56px; line-height: .9; font-weight: 600; letter-spacing: -.04em; color: var(--green); text-shadow: 0 0 24px rgba(46,219,110,.35); }
.src-count span { font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* the sources as live feed panels: a console-like box per source with its real numbers (js/site.js fills them) */
.src-feeds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feed-p { position: relative; display: flex; flex-direction: column; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,26,33,.92), rgba(11,14,18,.92)); transition: border-color .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.feed-p:hover { border-color: rgba(198,255,61,.32); transform: translateY(-2px); }
/* a thin lit edge along the top, and faint scanlines for the console feel */
.feed-p::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,255,61,.5), transparent); opacity: .5; transition: opacity .35s; }
.feed-p:hover::before { opacity: 1; }
.feed-p::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }
.fp-top { display: flex; align-items: center; gap: 12px; }
.ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--lime); flex: none;
  background: rgba(198,255,61,.06); border: 1px solid rgba(198,255,61,.18); transition: background .35s, border-color .35s, box-shadow .35s; }
.ic svg { width: 17px; height: 17px; }
.feed-p:hover .ic { background: rgba(198,255,61,.1); border-color: rgba(198,255,61,.4); box-shadow: 0 0 18px -6px rgba(198,255,61,.6); }
.feed-p .by { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* status pill, top right: green when synced in the last day, orange when stale, pulsing when live */
.st { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 999px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: rgba(46,219,110,.08); border: 1px solid rgba(46,219,110,.22); }
.st em { font-style: normal; }
.st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.feed-p.stale .st { color: var(--orange); background: rgba(255,138,31,.08); border-color: rgba(255,138,31,.25); }
.is-live .st i { animation: st-ping 1.6s ease-out infinite; }
@keyframes st-ping { 0% { box-shadow: 0 0 0 0 rgba(46,219,110,.7); } 100% { box-shadow: 0 0 0 7px rgba(46,219,110,0); } }
.feed-p h3 { margin: 14px 0 4px; font-size: 20px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.feed-p p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--soft); max-width: 420px; }
/* the big readout */
.fp-num { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 10px; }
.fp-num .chips { margin: 0 0 0 auto; align-self: center; }
.fp-num b { font: 600 40px/1 var(--sans); letter-spacing: -.035em; color: var(--text); font-variant-numeric: tabular-nums; }
.fp-num span { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.is-live .fp-num b { color: var(--green); text-shadow: 0 0 22px rgba(46,219,110,.3); }
/* split bar: how the count breaks down (chains, or frozen vs released) */
.split-bar { display: flex; gap: 3px; }
.split-bar span { min-width: 96px; }
.split-bar span:last-child small { text-align: right; }
.split-bar i { display: block; height: 6px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 10px -2px rgba(198,255,61,.5); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
/* one color per chain, matched by the chips above */
.split-bar [data-chain="tron"] i { background: var(--c-tron); box-shadow: 0 0 10px -2px rgba(235,0,41,.5); }
.split-bar [data-chain="evm"] i { background: var(--c-evm); box-shadow: 0 0 10px -2px rgba(98,126,234,.5); }
.split-bar [data-chain="btc"] i { background: var(--c-btc); box-shadow: 0 0 10px -2px rgba(247,147,26,.5); }
.split-bar [data-chain] small { padding-left: 13px; position: relative; }
.split-bar [data-chain] small::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 2px; background: var(--c-tron); }
.split-bar [data-chain="evm"] small::before { background: var(--c-evm); }
.split-bar [data-chain="btc"] small::before { background: var(--c-btc); }
.split-bar span:last-child[data-chain] small { padding-left: 0; }
.split-bar span:last-child[data-chain] small::before { position: static; display: inline-block; margin: 0 6px 1px 0; vertical-align: middle; }
.split-bar [data-part="tether_eth"] i { background: var(--c-usdt); box-shadow: 0 0 10px -2px rgba(38,161,123,.5); }
.split-bar [data-part="circle_eth"] i { background: var(--c-usdc); box-shadow: 0 0 10px -2px rgba(39,117,202,.5); }
.feed-wide { grid-column: 1 / -1; }
.src-all { display: inline-block; margin-left: 4px; font: 13px var(--mono); color: var(--lime); text-decoration: none; border-bottom: 1px solid rgba(198,255,61,.35); }
.src-all:hover { border-bottom-color: var(--lime); }
.split-bar [data-part="ransomware"] i { background: #FF4D5E; box-shadow: 0 0 10px -2px rgba(255,77,94,.5); }
.split-bar [data-part="stolen"] i { background: #FF6B7A; box-shadow: 0 0 10px -2px rgba(255,107,122,.5); }
.split-bar [data-part="scam"] i { background: #FF8A1F; box-shadow: 0 0 10px -2px rgba(255,138,31,.5); }
.split-bar [data-part="mixer"] i { background: #B98CFF; box-shadow: 0 0 10px -2px rgba(185,140,255,.5); }
.split-bar [data-part="freeze_evasion"] i { background: #3DD9C5; box-shadow: 0 0 10px -2px rgba(61,217,197,.5); }
.split-bar [data-part="gambling"] i { background: #FFC94D; box-shadow: 0 0 10px -2px rgba(255,201,77,.5); }
.split-bar span.off i { background: var(--line2); box-shadow: none; }
.split-bar small { display: block; margin-top: 7px; font: 11px var(--mono); color: var(--muted); white-space: nowrap; letter-spacing: .04em; }
.split-bar small b { font-weight: 500; color: var(--soft); }
.reveal-on .src-feeds[data-reveal] .split-bar i { transform: scaleX(0); }
.reveal-on .src-feeds[data-reveal].in .split-bar i { transform: none; transition-delay: .4s; }
/* foot: 14-day sync log (one cell per day, lit when a sync ran) + freshness bar */
.fp-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); }
.feed-p .split-bar + .fp-foot { margin-top: 14px; }
.synclog { display: flex; align-items: center; gap: 10px; }
.sl-cells { display: flex; gap: 3px; }
.sl-cells i { width: 7px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.04); border: 1px solid var(--line2); }
.sl-cells i.on { background: var(--lime); border-color: var(--lime); box-shadow: 0 0 6px -1px rgba(198,255,61,.7); }
.sl-lbl, .fresh { font: 11px var(--mono); color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.fresh { display: inline-flex; align-items: center; gap: 9px; }
.fb { width: 56px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.fb i { display: block; height: 100%; width: var(--fresh, 100%); background: var(--green); border-radius: 2px; }
.fresh b { font-weight: 500; color: var(--text); }
.feed-p.stale .fb i { background: var(--orange); }
.feed-p.stale .fresh b { color: var(--orange); }
/* chain chips, bottom left of every panel */
.chips { display: flex; gap: 6px; flex: none; }
.chips b { padding: 4px 8px; border-radius: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; color: var(--soft); border: 1px solid var(--line2); background: rgba(255,255,255,.02); }
.chips b[data-c="tron"] { color: #FF4A5F; border-color: rgba(235,0,41,.4); background: rgba(235,0,41,.06); }
.chips b[data-c="evm"] { color: var(--c-evm); border-color: rgba(98,126,234,.3); background: rgba(98,126,234,.05); }
.chips b[data-c="btc"] { color: var(--c-btc); border-color: rgba(247,147,26,.3); background: rgba(247,147,26,.05); }
/* live panels: a live graphic instead of a sync log */
.fp-live { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 14px; }
.fp-live .fp-num { margin: 0; flex: none; }
.fp-live .fp-num b { font-size: 30px; }
/* live USDT: blocks stream into a "now" marker, the read happens at the chain tip */
.chainviz { position: relative; flex: 1; min-width: 60px; height: 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.cv-track { position: absolute; right: 14px; top: 9px; display: flex; gap: 8px; animation: cv-glide 1.6s cubic-bezier(.5,0,.2,1) infinite; }
.cv-track i { position: relative; flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(46,219,110,.35); background: rgba(46,219,110,.06); }
.cv-track i + i::before { content: ""; position: absolute; left: -9px; top: 5px; width: 8px; height: 1px; background: rgba(46,219,110,.3); }
.cv-track i:last-child { border-color: var(--green); background: rgba(46,219,110,.35); box-shadow: 0 0 10px rgba(46,219,110,.6); }
.cv-now { position: absolute; right: 8px; top: 3px; width: 24px; height: 24px; border: 1.5px solid var(--green); border-radius: 6px; box-shadow: 0 0 12px rgba(46,219,110,.45); animation: cv-ping 1.6s ease-out infinite; }
@keyframes cv-glide { 0% { transform: translateX(20px); } 30%, 100% { transform: none; } }
@keyframes cv-ping { 0%, 20% { opacity: 1; } 100% { opacity: .55; } }
/* who paid this wallet: senders flow into the wallet (right); one sender is flagged */
.hops { flex: 1; min-width: 60px; height: 34px; overflow: visible; }
.hops .hp-lines path { fill: none; stroke: rgba(46,219,110,.4); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; animation: hp-flow 1.4s linear infinite; }
.hops .hp-hot { fill: none; stroke: var(--orange); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 40 400; animation: hp-hot 2.8s ease-in infinite; filter: drop-shadow(0 0 3px rgba(255,138,31,.8)); }
.hops .hp-nodes circle { fill: #0E1217; stroke: var(--green); stroke-width: 1.4; }
.hops .hp-flag { fill: var(--orange); filter: drop-shadow(0 0 4px rgba(255,138,31,.9)); }
.hops .hp-ring { fill: none; stroke: var(--orange); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: hp-ring 2.8s ease-out infinite; }
.hops .hp-me { fill: rgba(46,219,110,.12); stroke: var(--green); stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(46,219,110,.6)); }
.hops .hp-me-dot { fill: var(--green); }
@keyframes hp-flow { to { stroke-dashoffset: -16; } }
@keyframes hp-hot { 0% { stroke-dashoffset: 40; opacity: 0; } 10% { opacity: 1; } 55%, 100% { stroke-dashoffset: -112; opacity: 0; } }
@keyframes hp-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hops .hp-lines path, .hops .hp-ring { animation: none; } .hops .hp-hot { animation: none; stroke-dasharray: none; } }
/* our blocklist: a lookup sweeps the list and lands on a flagged entry */
.lookup { position: relative; flex: 1; min-width: 60px; height: 30px; display: flex; flex-direction: column; justify-content: space-between; padding: 1px 0; }
.lookup i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.11); }
.lookup i.hit { position: relative; background: rgba(198,255,61,.25); animation: lk-hit 2.8s ease-out infinite; }
.lookup i.hit::after { content: ""; position: absolute; right: -14px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px rgba(198,255,61,.8); animation: lk-dot 2.8s ease-out infinite; }
.lk-sweep { position: absolute; left: -4px; right: -4px; top: 0; height: 2px; background: var(--green); box-shadow: 0 0 8px rgba(46,219,110,.8); border-radius: 1px; animation: lk-sweep 2.8s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes lk-sweep { 0% { transform: translateY(-2px); opacity: 0; } 8% { opacity: 1; } 45%, 70% { transform: translateY(16px); opacity: 1; } 85%, 100% { transform: translateY(16px); opacity: 0; } }
@keyframes lk-hit { 0%, 40% { background: rgba(198,255,61,.25); box-shadow: none; } 48%, 75% { background: var(--lime); box-shadow: 0 0 10px rgba(198,255,61,.6); } 100% { background: rgba(198,255,61,.25); box-shadow: none; } }
@keyframes lk-dot { 0%, 40% { transform: scale(0); } 50% { transform: scale(1.3); } 58%, 80% { transform: scale(1); } 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .cv-track, .cv-now, .lookup i.hit, .lookup i.hit::after, .lk-sweep { animation: none; } .lk-sweep { transform: translateY(16px); } .lookup i.hit { background: var(--lime); } .is-live .st i { animation: none; } }
/* panels arrive one by one with the reveal */
.reveal-on .src-feeds[data-reveal] .feed-p { opacity: 0; transform: translateY(10px); }
.reveal-on .src-feeds[data-reveal].in .feed-p { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(2) { transition-delay: .12s; } .reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(3) { transition-delay: .24s; }
.reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(4) { transition-delay: .36s; }
.reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(5) { transition-delay: .48s; } .reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(6) { transition-delay: .6s; }
.reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(7) { transition-delay: .72s; } .reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(8) { transition-delay: .84s; } .reveal-on .src-feeds[data-reveal].in .feed-p:nth-child(9) { transition-delay: .96s; }
/* for developers: points + a code window with language tabs and a separate response pane */
.dev { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
.dev > * { min-width: 0; }   /* long code lines scroll inside the window instead of widening the column */
.dev .section-lede { margin-bottom: 30px; }
.dev-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
.dev-points li { display: flex; gap: 16px; align-items: flex-start; }
.dev-points b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dev-points span:not(.ic) { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.dev-points li:hover .ic { background: rgba(198,255,61,.1); border-color: rgba(198,255,61,.4); box-shadow: 0 0 18px -6px rgba(198,255,61,.6); }
.dev-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.dev-cta .arr { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.dev-cta .btn-pri:hover .arr { transform: translateX(4px); }
/* platforms row */
.os { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.os-l { flex-basis: 100%; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.os-g { display: inline-flex; align-items: center; gap: 6px; }
.os-g.linux { margin-right: 4px; }
.os-g b { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--mono); color: var(--text); padding: 6px 10px; border: 1px solid var(--line2); border-radius: 7px; }
.os-g.linux b { color: var(--lime); border-color: rgba(198,255,61,.3); background: rgba(198,255,61,.06); }
.os-g b svg { width: 15px; height: 15px; }
.os-g em { font: 11.5px var(--mono); font-style: normal; color: var(--soft); }
.os-g em + em::before { content: "·"; margin-right: 6px; color: var(--line2); }
.term-win { position: relative; border: 1px solid var(--line2); border-radius: 18px; overflow: hidden; background: rgba(10,13,17,.95); backdrop-filter: blur(8px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(198,255,61,.03); }
.term-win::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,255,61,.45), transparent); }
.tw-bar { display: flex; align-items: center; gap: 16px; padding: 0 18px; height: 50px; border-bottom: 1px solid var(--line); }
.tw-dots { display: flex; gap: 6px; } .tw-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); }
.tw-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.tw-tabs button { padding: 6px 12px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 500 12px var(--mono); cursor: pointer; transition: color .2s, background .2s; }
.tw-tabs button:hover { color: var(--soft); }
.tw-tabs button.on { color: var(--text); background: rgba(198,255,61,.1); box-shadow: inset 0 0 0 1px rgba(198,255,61,.25); }
.tw-ep { margin-left: auto; display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--soft); }
.tw-ep b { font-weight: 700; font-size: 10.5px; color: #07090C; background: var(--lime); padding: 3px 6px; border-radius: 4px; }
.tw-code, .tw-res pre { margin: 0; padding: 20px 22px; font: 13px/1.75 var(--mono); color: var(--soft); white-space: pre; overflow-x: auto; }
.tw-code { display: none; min-height: 158px; }
.tw-code.on { display: block; animation: twin .35s ease; }
@keyframes twin { from { opacity: 0; transform: translateY(4px); } }
.tw-res { border-top: 1px solid var(--line); background: rgba(255,255,255,.015); }
.tw-status { display: flex; justify-content: space-between; padding: 14px 22px 0; font: 11.5px var(--mono); color: var(--muted); letter-spacing: .04em; }
.tw-status .ok { display: inline-flex; align-items: center; gap: 8px; color: var(--green); }
.tw-status .ok i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.tw-res pre { padding-top: 10px; }
.term-win .c { color: #55606D; } .term-win .k { color: #9fd0ff; } .term-win .s { color: #e8c58a; } .term-win .v { color: var(--lime); }
.term-win .n { color: var(--orange); } .term-win .kw { color: #c59bff; }
@media (prefers-reduced-motion: reduce) { .tw-code.on { animation: none; } }
.code { background: #0A0D11; border: 1px solid var(--line); border-radius: 12px; font: 13.5px/1.75 var(--mono); padding: 18px 22px; color: var(--soft); overflow-x: auto; white-space: pre; }
.code .c { color: #55606D; } .code .k { color: var(--lime); } .code .s { color: #e8c58a; }
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }

/* --- pricing --- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; }
.plan.hot { border-color: var(--lime); box-shadow: 0 0 34px rgba(198,255,61,.1); }
.plan .name { font: 600 12.5px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.plan.hot .name { color: var(--lime); }
.plan .amt { font-size: 40px; font-weight: 700; letter-spacing: -.03em; margin: 8px 0 2px; }
.plan .amt small { font-size: 15px; color: var(--muted); font-weight: 500; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 22px; font-size: 14.5px; color: var(--soft); flex: 1; }
.plan li { padding: 4px 0; }
.plan li::before { content: "→ "; color: var(--lime); font-family: var(--mono); }
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.faq h4 { margin: 0 0 6px; font-size: 17px; }
.faq p { margin: 0; color: var(--soft); font-size: 15px; }

/* --- docs --- */
.docs { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding-top: 48px; }
.toc { position: sticky; top: 92px; align-self: start; font-size: 14.5px; }
.toc a { display: block; padding: 5px 0; color: var(--soft); text-decoration: none; }
.toc a:hover { color: var(--lime); }
.docs h2 { font-size: 30px; margin-top: 40px; scroll-margin-top: 90px; }
.docs h2:first-child { margin-top: 0; }
.docs p, .docs li { color: var(--soft); }
.docs table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 12px 0 20px; }
.docs th, .docs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs th { font: 600 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.docs code { font: 13.5px var(--mono); color: var(--lime); }
/* legal pages reuse the docs layout */
.legal h1 { margin: 6px 0 4px; font-size: 44px; letter-spacing: -.03em; }
.legal-date { margin: 0 0 8px; font: 12px var(--mono); color: var(--muted); }
.legal-draft { display: inline-block; margin: 0 0 18px; padding: 6px 10px; border-radius: 6px; font: 12px var(--mono); color: var(--orange) !important; background: rgba(255,138,31,.08); border: 1px solid rgba(255,138,31,.25); }
.legal article { max-width: 760px; min-width: 0; }
.legal h2 { font-size: 22px; margin-top: 36px; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--lime); }
.legal th { width: 1%; white-space: nowrap; }
.legal table tr:first-child th + th { width: auto; }
/* legal: full data-source register, grouped */
.legal .src-table th { width: auto; white-space: normal; }
.legal .src-table td:first-child { font-weight: 600; color: var(--text, #e8edf2); width: 26%; }
.legal .src-table td:last-child { width: 30%; }
.legal .src-table tr.grp td { padding-top: 22px; font: 600 12px var(--mono); color: var(--lime); text-transform: uppercase; letter-spacing: .06em; width: auto; }
@media (max-width: 720px) {
  .legal .src-table, .legal .src-table tbody, .legal .src-table tr, .legal .src-table td { display: block; width: auto !important; }
  .legal .src-table tr:first-child { display: none; }
  .legal .src-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .legal .src-table td { border: 0; padding: 2px 0; }
  .legal .src-table td:last-child { color: var(--muted); font-size: 13.5px; }
  .legal .src-table tr.grp { border: 0; padding-bottom: 0; }
}
.ph { color: var(--orange); background: rgba(255,138,31,.1); border-radius: 3px; padding: 0 3px; }
.method { font: 700 12px var(--mono); padding: 2px 7px; border-radius: 4px; background: rgba(198,255,61,.12); color: var(--lime); margin-right: 6px; }
.method.get { background: rgba(46,219,110,.12); color: var(--green); }

/* --- faq (home): heading left, accordion right --- */
.faq-sec { padding: 96px 0 104px; }
.faq2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-head { position: sticky; top: 110px; }
.faq-head .section-lede { font-size: 16px; line-height: 1.8; }
.faq-head .f-mail { font-size: 18px; }
.qas { overflow: hidden; }   /* height is animated by js/site.js */
/* folded: a peek at the first questions fading out, with a button to show them all */
.qas { border-top: 1px solid var(--line2); }
.faq-fold.folded .qas { height: 236px; cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
.faq-fold.folded .qa summary { pointer-events: none; }   /* a click anywhere in the peek unfolds the list */
.faq-toggle { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 6px auto 0; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--line2); background: rgba(14,18,23,.9); color: var(--text); font: 500 14.5px var(--sans); cursor: pointer;
  transition: border-color .25s, box-shadow .25s, color .2s; }
.faq-fold.folded .faq-toggle { margin-top: -22px; }   /* sits on the fade */
.faq-toggle:hover { border-color: rgba(198,255,61,.45); box-shadow: 0 0 0 4px rgba(198,255,61,.07); }
.faq-toggle .ft-hide { display: none; }
.faq-toggle[aria-expanded="true"] .ft-show { display: none; }
.faq-toggle[aria-expanded="true"] .ft-hide { display: inline; }
.faq-toggle[aria-expanded="true"] { margin-top: 24px; color: var(--soft); }
/* chevron that flips */
.faq-toggle i { width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid var(--lime); border-bottom: 1.5px solid var(--lime);
  transform: rotate(45deg); transition: transform .35s cubic-bezier(.2,.7,.2,1), margin .35s; }
.faq-toggle[aria-expanded="true"] i { transform: rotate(-135deg); margin-top: 4px; }
.faq-toggle:hover i { animation: nudge .9s ease-in-out infinite; }
.faq-toggle[aria-expanded="true"]:hover i { animation: none; }
@keyframes nudge { 50% { translate: 0 2px; } }
.faq-fold { display: flex; flex-direction: column; }
.qa { border-bottom: 1px solid var(--line); background: linear-gradient(rgba(7,9,12,.6), rgba(7,9,12,.6)); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--soft); transition: color .2s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover, .qa[open] summary { color: var(--text); }
/* plus that turns into a minus */
.qa summary i { position: relative; flex: none; width: 14px; height: 14px; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; border-radius: 1px;
  background: var(--muted); transition: transform .35s cubic-bezier(.2,.7,.2,1), background .2s; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: var(--lime); }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa-a p { margin: 0; padding: 0 48px 24px 4px; font-size: 15.5px; line-height: 1.65; color: var(--soft); }
.qa-a a { color: var(--text); }
.qa-a { overflow: hidden; }   /* height is animated by js/site.js */
.qa.closing summary { color: var(--soft); }
.qa.closing summary i::before, .qa.closing summary i::after { background: var(--muted); }
.qa.closing summary i::after { transform: rotate(90deg); }
/* --- footer --- */
footer { position: relative; overflow: hidden; margin-top: 40px; padding: 0; color: var(--muted); font-size: 14px; }
footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line2) 20%, rgba(198,255,61,.4) 50%, var(--line2) 80%, transparent); }
footer { background: var(--void); }   /* solid: the page clearly ends here */
.f-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 40px 0 0; }
footer .brand { color: var(--text); }
.f-links { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.f-links a { color: var(--soft); text-decoration: none; font-size: 15px; transition: color .2s; }
.f-links a:hover { color: var(--lime); }
.f-row2 { align-items: flex-end; padding: 22px 0 36px; }
.f-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.f-legal a { font-size: 13.5px; color: var(--muted); text-decoration: none; transition: color .2s; }
.f-legal a:hover { color: var(--lime); }
.f-mail { font-size: 20px; letter-spacing: -.01em; color: var(--text); text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: background-size .4s cubic-bezier(.2,.7,.2,1), color .2s; }
.f-mail:hover { color: var(--lime); background-size: 100% 1px; }
.f-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 6px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.f-live { display: inline-flex; align-items: center; gap: 8px; }
.f-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.f-live b { font-weight: 500; color: var(--soft); }
.f-live.stale i { background: var(--orange); box-shadow: 0 0 6px var(--orange); } .f-live.stale b { color: var(--orange); }
/* big faint wordmark that fades into the page bottom */
.f-mark { position: absolute; left: 0; right: 0; bottom: -.16em; z-index: 0; text-align: center; font-weight: 700; font-size: clamp(90px, 19vw, 280px);
  line-height: 1; letter-spacing: -.06em; white-space: nowrap; color: transparent; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, rgba(198,255,61,.09), rgba(198,255,61,.015) 80%); -webkit-background-clip: text; background-clip: text; }   /* sits behind the footer rows */
footer > .wrap { position: relative; z-index: 1; padding-bottom: 28px; }

/* --- responsive --- */
@media (max-width: 960px) {
  .hero .wrap, .split { grid-template-columns: 1fr; }
  .hero-side { order: -1; padding-bottom: 34px; margin-top: -10px; }   /* room for the feeds under the disc */
  .hero-radar { max-width: 340px; }
  .cards, .plans { grid-template-columns: 1fr 1fr; }
  .showcase { grid-template-columns: 1fr; gap: 32px; }
  .dev { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-head { position: static; }
  .faq-sec { padding: 64px 0; }
  .src-head { flex-direction: column; align-items: flex-start; }
  .src-feeds { grid-template-columns: 1fr; }
  /* five categories don't fit one proportional bar on a phone: show them as a two-column legend */
  .feed-wide .split-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .feed-wide .split-bar span { min-width: 0; }
  .feed-wide .split-bar span:last-child small { text-align: left; }
  .fp-num, .fp-live, .fp-foot { flex-wrap: wrap; }
  .fp-num .chips { margin-left: 0; flex-basis: 100%; }
  .fp-live { gap: 12px; }
  .fp-live .chips { flex-basis: 100%; }
  .sl-lbl { display: none; }
  .src-head { padding: 0; }
  .src-count { border-left: 0; padding-left: 0; }
  .stage { height: 440px; }
  .s-main { padding: 20px; }
  .steps3 { grid-template-columns: 1fr; }
    .docs { grid-template-columns: 1fr; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 720px) {
  .links, .nav-cta .btn-ghost { display: none; }
  /* menu button (2026-10-15, Simon's pick): three equal white lines, no frame; turns into an × while open */
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-btn .bars { position: relative; width: 22px; height: 16px; }
  .menu-btn .bars i { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s, top .3s; }
  .menu-btn .bars i:nth-child(1) { top: 0; }
  .menu-btn .bars i:nth-child(2) { top: 7px; }
  .menu-btn .bars i:nth-child(3) { top: 14px; }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .hero { padding-top: 28px; padding-bottom: 76px; min-height: calc(100svh - 68px); }   /* the welcome fills the first screen; the next section starts below the fold */
  #how, .screen { min-height: 0; }
  .scroll-cue { bottom: 14px; }
  .lede { margin: 24px 0 36px; font-size: 16px; line-height: 1.65; }   /* breathing room between headline, text and scan box */
  .hint { font: 12px/1.5 var(--sans); margin-top: 18px; }   /* sans, so the line fits one row on a phone */
  .hint a { white-space: nowrap; }
  .hero-radar { max-width: 240px; }
  .hud { --arm: 11px; }
  .hud-live { top: 7px; left: 8px; font-size: 9.5px; gap: 6px; }
  .feed { padding: 0 26px; }
  .feed dt { font-size: 9px; }
  .feed dd { font-size: 11.5px; }
  .scan { flex-wrap: wrap; }
  .scan span:not(.try) { display: none; }
  .scan input { flex-basis: 100%; padding: 12px 10px; }
  .scan .btn { flex: 1; }
  .term { font-size: 12.5px; padding: 14px 16px; }
  .tw-ep { display: none; }
  .tw-bar { padding: 0 12px; gap: 10px; }
  .tw-dots { display: none; }
  .tw-tabs { overflow-x: auto; scrollbar-width: none; }
  .tw-tabs button { padding: 6px 9px; white-space: nowrap; }
  .tw-code, .tw-res pre { font-size: 12px; padding: 16px; }
  .term .ts { display: none; }
  .cards, .plans, .faq { grid-template-columns: 1fr; }
  .f-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .f-links { gap: 10px 22px; }
  .f-bottom { flex-direction: column; }
  /* phone polish (2026-10-14) */
  /* hero: the radar becomes a large, faded backdrop behind the headline (top right, partly off-screen),
     without its HUD and readouts */
  .hero { overflow: hidden; }
  .hero .wrap > div:first-child { position: relative; z-index: 1; }
  .hero-side { position: absolute; top: -24vw; left: 22vw; width: 118vw; margin: 0; padding: 0; z-index: 0; pointer-events: none; }
  .hero-radar { max-width: none; opacity: .7; }   /* its soft round edge is drawn in the canvas (js/hero-radar.js) */
  .hero-side .hud, .hero-side .feeds { display: none; }
  .hero h1, .hero .lede { text-shadow: 0 2px 18px rgba(7,9,12,.85); }
  .feed-p { padding: 16px 16px 14px; }
  .feed-p h3 { margin-top: 12px; font-size: 18px; }
  .feed-p p { font-size: 13px; }
  .fp-num { margin: 10px 0 8px; gap: 8px; }
  .fp-num > b { font-size: 32px; }
  .fp-live .fp-num > b { font-size: 26px; }
  .fp-foot .synclog { display: none; }                      /* the 14-day log is a desktop detail; freshness stays */
  .fp-foot { padding-top: 10px; justify-content: flex-end; }
  .feed-p .split-bar + .fp-foot { margin-top: 10px; }
  .src-feeds { gap: 12px; }
  .src-head { margin-bottom: 24px; gap: 18px; }
  .tw-code, .tw-res pre, .code { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* How it works on phones: the three steps become one compact numbered timeline (no animated
     previews), so "Compare plans" sits right under them instead of three screens down */
  #how .section-lede { margin-bottom: 26px; }
  .steps3 { gap: 0; padding: 22px 20px 4px; border: 1px solid var(--line); border-radius: 16px;
    background: linear-gradient(180deg, rgba(16,21,27,.92), rgba(10,13,17,.92)); backdrop-filter: blur(8px); }
  .step { flex-direction: row; border: 0; border-radius: 0; background: none; backdrop-filter: none; overflow: visible; }
  .step:hover { transform: none; }
  .step .viz { display: none; }
  .txt { padding: 0 0 22px 52px; text-align: left; }
  .txt .num { left: 0; top: 0; transform: none; }
  .txt::before { display: none; }
  .step:not(:last-child) .txt::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 6px; width: 1px;
    background: linear-gradient(rgba(198,255,61,.45), rgba(198,255,61,.08)); }   /* the line joining the numbers */
  .txt h4 { margin: 6px 0 4px; font-size: 18px; }
  .txt p { margin: 0; max-width: none; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
  .how-cta { margin-top: 20px; }
  .how-cta .btn { width: 100%; justify-content: center; }   /* wrap long lines instead of cutting them off */
  .docs .toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 -24px; padding: 0 24px 4px; }
  .docs .toc a { flex: none; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 13.5px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sr { position: absolute; left: -9999px; }
/* grid children may shrink below their content (long addresses, code) */
.hero .wrap > *, .split > *, .docs > * { min-width: 0; }
html { scroll-padding-top: 84px; }
/* touch screens: no backdrop blur. Re-blurring the moving background field on every scroll frame
   makes the nav and panels judder on phones; near-opaque fills look the same there. */
@media (pointer: coarse) {
  .nav { background: rgba(7,9,12,.95); }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* homepage: the wheel/trackpad jumps a whole block at a time (hero, how, products, sources, api, faq).
   Desktop with a mouse/trackpad only; touch devices (phones, tablets, any width or orientation) scroll freely. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  html:has(.hero) { scroll-snap-type: y mandatory; }
  .hero, #how, .screen, .faq-sec { scroll-snap-align: start; scroll-margin-top: -16px; }   /* 84px scroll padding - 16 = flush under the 68px nav */
  main ~ footer { scroll-snap-align: end; }   /* the page bottom stays reachable */
}

/* --- accounts: sign up, log in, my account (templates; js/auth.js) --- */
.auth-page { min-height: 100svh; display: flex; flex-direction: column; }
.auth-page main { flex: 1; }
.nav-q { font-size: 14px; color: var(--muted); }
.links .m-only { display: none; }
.auth { padding: 56px 0 72px; }
.auth-grid { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 72px; align-items: center; }
.auth-pitch h1 { margin: 0 0 16px; font-size: clamp(36px, 4.6vw, 54px); line-height: 1.02; letter-spacing: -.035em; }
.auth-pitch h1 em { font-style: normal; color: var(--lime); }
.perks { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
.perks li { display: flex; gap: 14px; align-items: flex-start; }
.perks b { display: block; font-weight: 600; }
.perks small { display: block; color: var(--muted); font-size: 14px; }
.pk-ic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--lime); background: rgba(198,255,61,.08); border: 1px solid rgba(198,255,61,.22); }
.pk-ic svg { width: 14px; height: 14px; }
/* daily quota: three cells, lit = a check left */
.quota { display: inline-flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14,18,23,.8); font: 12px var(--mono); color: var(--muted); }
.q-lbl { text-transform: uppercase; letter-spacing: .14em; }
.q-cells { display: flex; gap: 5px; }
.q-cells i { width: 22px; height: 10px; border-radius: 3px; background: var(--line); }
.q-cells i.on { background: var(--green); box-shadow: 0 0 8px -1px rgba(46,219,110,.7); }
.q-txt b { color: var(--text); font-weight: 500; }
.quota.big { padding: 0; border: 0; background: none; font-size: 14px; margin: 6px 0 12px; }
.quota.big .q-cells i { width: 44px; height: 14px; border-radius: 4px; }
.quota.big .q-txt b { font: 600 28px var(--sans); }

/* the card */
.auth-card { position: relative; padding: 32px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,26,33,.95), rgba(11,14,18,.95)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.auth-card::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,255,61,.6), transparent); }
.auth-solo .auth-card { max-width: 420px; margin: 0 auto; }
.auth-card h2 { font-size: 28px; margin: 0 0 4px; }
.auth-card > form > .muted, .auth-done .muted { margin: 0 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-tg { width: 100%; background: #229ED9; color: #fff; }
.btn-tg:hover { background: #2aabe6; }
.btn-tg svg { width: 18px; height: 18px; }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* fields */
.field { display: block; margin-bottom: 16px; }
.field > span:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 14px; font-weight: 500; color: var(--soft); }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.f-aside { font-weight: 400; color: var(--muted); text-decoration: none; }
.f-aside:hover { color: var(--lime); }
.field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(7,9,12,.7); color: var(--text); font: 15px var(--sans); outline: none; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder { color: #5b6672; }
.field input:focus { border-color: rgba(198,255,61,.55); box-shadow: 0 0 0 3px rgba(198,255,61,.1); }
.field.bad input { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,77,94,.1); }
.pw { position: relative; display: block; }
.pw input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.pw-toggle:hover, .pw-toggle[aria-pressed="true"] { color: var(--lime); }
.pw-toggle svg { width: 18px; height: 18px; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.pw-meter i { height: 3px; border-radius: 2px; background: var(--line); transition: background .25s; }
.pw-meter[data-s="1"] i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-s="2"] i:nth-child(-n+2) { background: var(--orange); }
.pw-meter[data-s="3"] i:nth-child(-n+3) { background: var(--lime); }
.pw-meter[data-s="4"] i { background: var(--green); }
.pw-hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 14px; color: var(--soft); cursor: pointer; }
.check input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--lime); }
.check.bad span { color: var(--red); }
.form-error { min-height: 0; margin: -6px 0 14px; font-size: 14px; color: var(--red); }
.form-error:empty { margin: 0; }
.form-error .ok { color: var(--green); }
.btn.loading { color: transparent; position: relative; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(7,9,12,.35); border-top-color: #07090C; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alt { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.alt a, .link-btn { color: var(--lime); text-decoration: none; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.link-btn:disabled { color: var(--muted); cursor: default; }
/* after sign-up */
.auth-done { text-align: center; padding: 12px 0; animation: done-in .5s cubic-bezier(.2,.7,.2,1); }
.done-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; color: var(--green);
  background: rgba(46,219,110,.1); border: 1px solid rgba(46,219,110,.35); box-shadow: 0 0 30px -6px rgba(46,219,110,.6); }
.done-ic svg { width: 30px; height: 30px; }
.done-email { color: var(--text); font-weight: 500; }
@keyframes done-in { from { opacity: 0; transform: translateY(10px); } }

/* my account */
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.acct-head h1 { margin: 0 0 6px; font-size: clamp(32px, 4vw, 44px); letter-spacing: -.03em; }
.acct-head h1 .stop { font-style: normal; color: var(--lime); }
.acct-head p { margin: 0; }
.badge-plan { padding: 3px 8px; border-radius: 6px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(198,255,61,.3); }
.acct-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.acct-card { display: flex; flex-direction: column; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(20,26,33,.92), rgba(11,14,18,.92)); }
.acct-card.wide { margin-bottom: 16px; }
.acct-card h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; }
.acct-card .btn-block { margin-top: auto; }
.acct-card .soon { font: 500 10px var(--mono); letter-spacing: .1em; color: var(--orange); border: 1px solid rgba(255,138,31,.4); border-radius: 5px; padding: 2px 6px; }
.small { font-size: 13.5px; }
.acct-card p.small { margin: 0 0 16px; }
.plan-now { margin: 0 0 16px; display: flex; flex-direction: column; }
.plan-now b { font-size: 28px; letter-spacing: -.02em; }
.plan-now span { color: var(--muted); font-size: 14px; }
.ac-row { display: flex; justify-content: space-between; align-items: baseline; }
.empty { display: grid; justify-items: center; gap: 14px; padding: 28px 0 12px; text-align: center; }
.empty p { margin: 0; }
.empty-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; border: 1px dashed var(--line2); }
.acct-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.acct-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.saved { color: var(--green); }

.auth-foot { padding: 22px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.auth-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.auth-foot span:last-child { display: flex; gap: 20px; }
.auth-foot a { text-decoration: none; }
.auth-foot a:hover { color: var(--text); }
.tpl-note { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 999px; z-index: 20;
  font: 11px var(--mono); letter-spacing: .06em; color: var(--orange); background: rgba(7,9,12,.9); border: 1px solid rgba(255,138,31,.35); white-space: nowrap; }

@media (max-width: 900px) {
  .auth-grid { grid-template-columns: 1fr; gap: 40px; }
  .auth-pitch .section-lede { margin-bottom: 24px; }
  .acct-grid, .acct-form { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .auth-page .nav-cta .btn-ghost { display: inline-flex; }
  .nav-q { display: none; }
  .auth { padding: 32px 0 64px; }
  .auth-card { padding: 24px 20px; }
  .auth-pitch { order: 2; }
  .acct-head { flex-direction: column; align-items: flex-start; }
  .tpl-note { position: static; transform: none; display: block; white-space: normal; text-align: center; width: auto; margin: 0 16px 20px; border-radius: 10px; }   /* in the flow, so it never covers the form */
}
/* scanner, logged out: a prompt to sign up or log in instead of running the check */
.gate { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 14px 16px; max-width: 620px;
  border: 1px solid rgba(198,255,61,.35); border-radius: 12px; background: linear-gradient(rgba(198,255,61,.06), rgba(198,255,61,.06)), rgba(10,13,17,.94); font-size: 14.5px; color: var(--soft); }
.gate[hidden] { display: none; }
/* entrance (js/check.js opens the space smoothly first): the box rises in, then the text, then each
   button, and the lime border gives one soft pulse */
.gate.in { animation: gate-in .45s cubic-bezier(.2,.7,.2,1) both, gate-glow 1.1s ease-out .45s; }
.gate.in .gate-txt { animation: gate-item .45s cubic-bezier(.2,.7,.2,1) .12s both; }
.gate.in .gate-cta .btn { animation: gate-item .4s cubic-bezier(.2,.7,.2,1) .24s both; }
.gate.in .gate-cta .btn + .btn { animation-delay: .32s; }
@keyframes gate-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes gate-item { from { opacity: 0; transform: translateY(8px); } }
@keyframes gate-glow { 0% { box-shadow: 0 0 0 0 rgba(198,255,61,.4); } 100% { box-shadow: 0 0 0 12px rgba(198,255,61,0); } }
@media (prefers-reduced-motion: reduce) { .gate.in, .gate.in .gate-txt, .gate.in .gate-cta .btn { animation: none; } }
.gate b { color: var(--text); font-weight: 600; }
.gate-cta { display: flex; gap: 8px; flex: none; }
.gate-cta .btn { padding: 9px 14px; font-size: 14px; }
@media (max-width: 720px) { .gate { flex-direction: column; align-items: stretch; } .gate-cta .btn { flex: 1; } }

/* phone polish 2 (2026-10-15) */
.m-only-inline { display: none; }
@media (max-width: 720px) {
  /* data-source panels: long publisher lines wrap onto 2–3 lines; give them room */
  .feed-p .by { line-height: 1.5; letter-spacing: .1em; }
  /* account header: "Scan" instead of "Scan a wallet" so Log out fits */
  .d-only { display: none; }
  .m-only-inline { display: inline; }
  /* API docs: 3-column tables become cards: code + points on one line, the meaning below */
  .docs table.stack, .docs table.stack tbody, .docs table.stack tr, .docs table.stack td { display: block; width: 100%; }
  .docs table.stack tr:first-child { display: none; }
  .docs table.stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .docs table.stack td { border: 0; padding: 2px 0; }
  .docs table.stack td:nth-child(1), .docs table.stack td:nth-child(2) { display: inline; width: auto; }
  .docs table.stack td:nth-child(2) { margin-left: 8px; font: 500 12px var(--mono); color: var(--muted); }
  .docs table.stack td:nth-child(2)::before { content: "· "; }
  .docs table.stack td:nth-child(3) { margin-top: 6px; }
  .docs code { overflow-wrap: anywhere; }
}

/* phone menu (2026-10-15): full screen under the header, built by site.js */
.mm { display: none; }
@media (max-width: 720px) {
  .nav-cta:has(.menu-btn) .btn-pri { display: none; }  /* pages with the menu: Sign up / Log in live in it on phones */
  html.mm-open, html.mm-open body { overflow: hidden; } /* the page underneath stays put */
  html.mm-open .nav { position: fixed; top: 0; left: 0; right: 0; background: var(--void); }   /* body overflow:hidden breaks sticky: pin the header (and its close button) to the screen */
  .mm { position: fixed; inset: 68px 0 0; z-index: 9; display: block; overflow: hidden; background: var(--void);
    opacity: 0; transition: opacity .25s; }
  .mm[hidden] { display: none; }
  .mm.in { opacity: 1; }
  /* the radar behind: rings, a lime glow and a sweep turning once per 6 s, like the logo */
  .mm-radar { position: absolute; width: 150vw; aspect-ratio: 1; right: -75vw; bottom: -60vw; border-radius: 50%; pointer-events: none;
    background: repeating-radial-gradient(circle, transparent 0 calc(12.5% - 1px), rgba(198,255,61,.12) calc(12.5% - 1px) 12.5%),
      radial-gradient(circle, rgba(198,255,61,.09), transparent 65%);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%); mask-image: radial-gradient(circle, #000 55%, transparent 71%); }
  .mm-sweep { position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 300deg, rgba(198,255,61,.05) 310deg, rgba(198,255,61,.32) 359deg, transparent 360deg);
    animation: mm-sweep 6s linear infinite; }
  @keyframes mm-sweep { to { transform: rotate(1turn); } }
  .mm-in { position: relative; height: 100%; display: flex; flex-direction: column; padding: 22px 24px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; }
  .mm-kick { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; }
  .mm-links { display: flex; flex-direction: column; }
  .mm-link { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line);
    color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .mm-n { font: 500 12px var(--mono); color: var(--lime); opacity: .8; min-width: 20px; }
  .mm-t { font: 600 clamp(26px, 8vw, 32px)/1.1 var(--sans); letter-spacing: -.02em; }
  .mm-arr { margin-left: auto; font-size: 20px; color: var(--muted); transition: transform .2s, color .2s; }
  .mm-link:active .mm-arr, .mm-link:hover .mm-arr { color: var(--lime); transform: translateX(4px); }
  .mm-link[aria-current] .mm-t { color: var(--lime); }
  .mm-link[aria-current] .mm-n { opacity: 1; }
  .mm-foot { margin-top: auto; padding-top: 28px; }
  .mm-pitch { margin: 0 0 12px; font-size: 14px; color: var(--soft); }
  .mm-pitch b { color: var(--text); font-weight: 600; }
  .mm-cta { display: flex; gap: 10px; }
  .mm-cta .btn { flex: 1; padding: 14px 18px; }
  /* Log in sits over the radar: a solid panel and a bright border keep it readable */
  .mm-cta .btn-ghost { background: var(--panel2); border-color: #3A4654; color: var(--text); }
  .mm-cta .btn-ghost:active { background: #1B232C; border-color: var(--soft); }
  /* entrance: rows slide in one after another */
  .mm .mm-kick, .mm .mm-link, .mm .mm-foot { opacity: 0; transform: translateY(14px); }
  .mm.in .mm-kick, .mm.in .mm-link, .mm.in .mm-foot { opacity: 1; transform: none;
    transition: opacity .45s, transform .55s cubic-bezier(.2,.7,.2,1); transition-delay: calc(60ms + var(--i, 0) * 55ms); }
  .mm.in .mm-kick { transition-delay: 0ms; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .mm-sweep { animation: none; }
  .mm, .mm .mm-kick, .mm .mm-link, .mm .mm-foot { transition: none !important; opacity: 1; transform: none; }
}

/* How it works, redone (2026-10-15): the risk first, steps as benefits, live proof, a real result */
.how-hook { max-width: 640px; text-wrap: balance; }
.how-hook b { color: var(--text); font-weight: 600; }
.proof { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0 0; padding: 0; }
.proof li { padding: 9px 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,9,12,.55); text-align: center; }
.proof b { display: block; font: 600 16px/1.1 var(--mono); color: var(--lime); letter-spacing: -.02em; }
.proof span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.3; color: var(--muted); }
.res-mini { margin: 16px auto 0; max-width: 300px; padding: 12px 14px; border: 1px solid rgba(255,77,94,.35); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,77,94,.08), rgba(255,77,94,.02)); text-align: left; }
.rm-top { display: flex; align-items: baseline; gap: 10px; }
.rm-top span { font: 600 13px var(--mono); }
.rm-top b { font: 700 20px/1 var(--mono); color: var(--red); }
.rm-top small { margin-left: auto; font: 10.5px var(--mono); color: var(--muted); }
.res-mini p { margin: 6px 0 0; font-size: 13px; color: var(--text); }
.res-mini ul { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--text); }
.res-mini li::marker { color: var(--red); }
.sample { max-width: 760px; margin: 28px auto 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,13,17,.85); }
.sample summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--lime); display: flex; justify-content: space-between; }
.sample summary::-webkit-details-marker { display: none; }
.sample summary span { transition: transform .25s; }
.sample[open] summary span { transform: rotate(90deg); }
.sample-body { padding: 0 20px 18px; }
.sb-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font: 13px var(--mono); }
.sb-head .lvl-high { font-weight: 600; }
.sb-reasons { list-style: none; margin: 0; padding: 0; }
.sb-reasons li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.sb-reasons .pts { flex: none; min-width: 42px; height: fit-content; padding: 2px 0; border-radius: 6px; text-align: center;
  font: 600 12px var(--mono); color: #07090C; background: var(--red); }
.sb-reasons .pts.info { color: var(--muted); background: none; border: 1px solid var(--line2); }
.sb-verdict { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(255,77,94,.07); font-size: 14px; line-height: 1.55; }
.how-cta { flex-direction: column; align-items: center; }
.how-sub { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.how-sub a { color: var(--soft); }
@media (max-width: 720px) {
  .how-hook { font-size: 15px; }
  .proof b { font-size: 14px; }
  .proof span { font-size: 10.5px; }
  .res-mini { margin-left: 0; }
  .sample { margin-top: 16px; }
  .sample summary { padding: 14px 16px; }
  .sample-body { padding: 0 16px 16px; }
  .sb-reasons li { font-size: 13px; }
  .how-cta { margin-top: 16px; }
}
.viz-scan .row.hit { border-color: rgba(255,77,94,.4); background: rgba(255,77,94,.06); }
.viz-scan .row.hit b { color: var(--red); }

/* How it works on phones (2026-10-15, Simon's pick): a quiet number column. Small grey mono 01 02 03 on
   the left, titles beside them, thin dividers between the steps; no badges, glow or connecting line. */
@media (max-width: 720px) {
  .steps3 { counter-reset: st; padding-top: 6px; }
  .steps3 .step { counter-increment: st; }
  .steps3 .step:not(:last-child) { border-bottom: 1px solid var(--line); }
  .steps3 .txt { padding: 16px 0 16px 40px; }
  .steps3 .txt .num { top: 19px; width: auto; height: auto; font-size: 0; background: none; border: 0; box-shadow: none; }
  .steps3 .txt .num::before { content: counter(st, decimal-leading-zero); font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
  .steps3 .step:not(:last-child) .txt::after { display: none; }
  .steps3 .txt h4 { margin-top: 0; }
  .steps3 .res-mini { margin-left: -40px; max-width: none; }   /* the example card uses the full width */
  .rm-top { white-space: nowrap; }
}

/* How it works = one live check, played out (2026-10-15, concept 1). site.js runs the timeline:
   paste (address types in, chain detected) → scan (15 source chips light up, one red hit) → decide
   (verdict, score counts to 85). .is-done = the finished state (no JS, reduced motion, before it starts). */
.lc { max-width: 760px; margin: 0 auto; }
.lc-stages { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lc-stages li { position: relative; padding: 0 0 10px; font: 600 15px var(--sans); color: var(--muted); transition: color .3s; }
.lc-stages li b { margin-right: 8px; font: 500 11px var(--mono); color: inherit; }
.lc-stages li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--line2); }
.lc-stages li::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--lime); z-index: 1;
  transition: width .5s cubic-bezier(.2,.7,.2,1); }
.lc-stages li.on { color: var(--text); }
.lc-stages li.on b { color: var(--lime); }
.lc-stages li.on::before, .lc-stages li.past::before { width: 100%; }
.lc-stages li.past { color: var(--soft); }
.lc-win { position: relative; padding: 18px; border: 1px solid var(--line2); border-radius: 16px;
  background: linear-gradient(180deg, rgba(16,21,27,.95), rgba(10,13,17,.95)); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.lc-in { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 10px;
  background: rgba(7,9,12,.85); font: 14px var(--mono); color: var(--text); }
.lc-in .p { color: var(--lime); }
.lc-caret { width: 7px; height: 16px; background: var(--lime); animation: blink 1.1s steps(1) infinite; }
.lc-chain { margin-left: auto; padding: 4px 8px; border-radius: 6px; font: 600 11px var(--mono); letter-spacing: .06em;
  color: #fff; background: var(--c-tron); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; }
.lc-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lc-src span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; font: 500 11.5px var(--mono); color: var(--muted);
  transition: color .2s, border-color .2s, background .2s; }
.lc-src span.ok { color: var(--green); border-color: rgba(46,219,110,.3); background: rgba(46,219,110,.06); }
.lc-src span::before { content: "✓ "; opacity: 0; transition: opacity .2s; }
.lc-src span.ok::before { opacity: 1; }
.lc-src span.bad { color: #fff; border-color: var(--red); background: rgba(255,77,94,.22); box-shadow: 0 0 14px -2px rgba(255,77,94,.6); }
.lc-src span.bad::before { content: "✗ "; opacity: 1; }
.lc-count { margin-top: 12px; font: 12px var(--mono); color: var(--muted); }
.lc-count b { color: var(--text); font-weight: 600; }
.lc-res { margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(255,77,94,.45); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,77,94,.12), rgba(255,77,94,.03));
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
.lc-score { display: flex; align-items: baseline; gap: 8px; }
.lc-score span { font: 600 14px var(--mono); }
.lc-score b { margin-left: auto; font: 700 30px/1 var(--mono); color: var(--red); }
.lc-score small { font: 12px var(--mono); color: var(--muted); }
.lc-bar { position: relative; height: 5px; margin: 10px 0 10px; border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0 30%, var(--orange) 30% 70%, var(--red) 70%); opacity: .35; }
.lc-bar i { position: absolute; top: -4px; left: 85%; width: 3px; height: 13px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px #fff; }
.lc-res p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); font-weight: 500; }
.lc-res p span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--soft); }
/* the finished state */
.lc.is-done .lc-chain, .lc.is-chain .lc-chain { opacity: 1; transform: none; }
.lc.is-done .lc-res, .lc.is-result .lc-res { opacity: 1; transform: none; }
.lc.is-done .lc-caret { display: none; }
@media (max-width: 720px) {
  .lc-stages li { font-size: 14px; text-align: center; }
  .lc-stages li b { margin-right: 6px; }
  .lc-win { padding: 14px; }
  .lc-in { font-size: 13px; }
  .lc-src span { font-size: 11px; padding: 5px 7px; }
  .lc-score b { font-size: 26px; }
}

/* iPhone Safari zooms the page into any field under 16px when it is tapped; 16px on touch screens stops that */
@media (pointer: coarse) { .scan input, .field input, input, textarea, select { font-size: 16px; } }

/* Data sources on phones (js/site.js adds .fold): one row per source, tap to unfold */
.fp-chev { display: none; }
@media (max-width: 720px) {
  .src-feeds.fold { gap: 8px; }
  .fold .feed-p { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fold .feed-p:not(.open) { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 12px; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .fold .feed-p:not(.open) .fp-top, .fold .feed-p:not(.open) .fp-live { display: contents; }
  .fold .feed-p:not(.open) :is(.by, p, .split-bar, .fp-foot, .chips, .fp-num span, .hops, .chainviz, .lookup) { display: none; }
  .fold .feed-p:not(.open) .ic { grid-column: 1; grid-row: 1; width: 32px; height: 32px; }
  .fold .feed-p:not(.open) h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 15px; line-height: 1.25; }
  .fold .feed-p:not(.open) .fp-num { grid-column: 3; grid-row: 1; margin: 0; }
  .fold .feed-p:not(.open) .fp-num > b { font-size: 18px; letter-spacing: -.02em; }
  .fold .feed-p:not(.open) .st { grid-column: 4; grid-row: 1; margin: 0; padding: 0; border: 0; background: none; }
  .fold .feed-p:not(.open) .st em { display: none; }
  .fold .fp-chev { display: block; grid-column: 5; grid-row: 1; width: 8px; height: 8px; margin: -4px 2px 0;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .3s; }
  .fold .feed-p.open { border-color: rgba(198,255,61,.32); }
  .fold .feed-p.open .fp-chev { margin: 4px 2px 0 4px; transform: rotate(-135deg); border-color: var(--lime); }
  .fold .feed-p.open > :not(.fp-top) { animation: done-in .4s cubic-bezier(.2,.7,.2,1) .05s both; }
}

/* Data sources head on phones: link gets its own breathing room, the 15-sources count sits centred
   between two hairlines as a divider before the list */
@media (max-width: 720px) {
  .src-head { align-items: stretch; gap: 0; margin-bottom: 20px; }
  .src-all { display: none; }   /* the full source list stays reachable from the footer / legal page */
  .src-head > div:first-child { text-align: center; }
  .src-head .section-lede { margin-inline: auto; }
  .src-count { justify-content: center; gap: 14px; margin: 30px 0 0; padding: 0; }
  .src-count::before, .src-count::after { content: ""; flex: 1; height: 1px; max-width: 72px; }
  .src-count::before { margin-right: 6px; background: linear-gradient(90deg, transparent, var(--line2)); }
  .src-count::after { margin-left: 6px; background: linear-gradient(90deg, var(--line2), transparent); }
}

/* FAQ: a help card under the heading (email + all sources), and an open question gets a lime edge */
.faq-help { position: relative; margin-top: 28px; padding: 20px 22px; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,26,33,.92), rgba(11,14,18,.92)); }
.faq-help::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(198,255,61,.5), transparent); }
.faq-help b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.faq-help b { margin-bottom: 16px; }
.fh-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-cta .btn { padding: 10px 16px; font-size: 14.5px; }
.fh-cta .btn-pri span { transition: transform .25s; }
.fh-cta .btn-pri:hover span { transform: translateX(3px); }
.qa { position: relative; transition: background .3s; }
.qa::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--lime);
  transform: scaleY(0); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.qa[open]:not(.closing)::before { transform: scaleY(1); }
.qa[open]:not(.closing) { background: linear-gradient(90deg, rgba(198,255,61,.045), transparent 70%), linear-gradient(rgba(7,9,12,.6), rgba(7,9,12,.6)); }
.qa summary, .qa-a p { padding-left: 16px; }

/* FAQ on phones: centred head like the other blocks, full-width help card, roomier rows */
@media (max-width: 720px) {
  .faq-head { text-align: center; }
  .faq-help { text-align: center; margin-top: 22px; padding: 20px 18px; }
  .fh-cta .btn { flex: 1; }
  .qa summary { padding: 20px 4px 20px 14px; font-size: 16.5px; gap: 16px; }
  .qa-a p { padding: 0 20px 22px 14px; font-size: 15px; }
}

/* Footer on phones (option A, chosen 2026-10-16): centred — logo, links as two short lines with
   dots, plain sync status, then Terms · Legal · © on one line over the wordmark.
   The rows dissolve (display: contents) so their parts can be reordered and wrapped. */
@media (max-width: 720px) {
  footer > .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; text-align: center; padding-bottom: 7vw; }
  footer .f-row, footer .f-row2, footer .f-bottom { display: contents; }
  footer .brand { order: 1; flex-basis: 100%; justify-content: center; margin-top: 40px; }
  .f-links { order: 2; flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-top: 18px; }
  .f-links a { padding: 7px 0; font-size: 15px; color: var(--soft); }
  .f-links a:active { color: var(--lime); }
  .f-links a + a::before { content: "·"; margin: 0 12px; color: var(--line2); }
  .f-links a:nth-child(n+4) { order: 3; }
  .f-links a:nth-child(4)::before { content: none; }
  .f-links::after { content: ""; order: 2; flex-basis: 100%; height: 0; }   /* line break after the third link */
  footer .f-mail { display: none; }   /* the FAQ card has "Email us" */
  .f-live { order: 3; flex-basis: 100%; justify-content: center; margin-top: 16px; font: 12.5px var(--mono); }
  .f-legal { order: 4; gap: 0; margin-top: 44px; }
  .f-legal a { font-size: 13px; }
  .f-legal a + a::before, footer .f-bottom > span:first-child::before { content: "·"; margin: 0 10px; color: var(--line2); }
  footer .f-bottom > span:first-child { order: 5; font-size: 13px; }
  .f-mark { font-size: 20.5vw; bottom: -.12em; }
}

/* Products head on phones: centred like the other blocks (the tabs below stay left-aligned) */
@media (max-width: 720px) {
  .sc-left > .kicker, .sc-left > h2, .sc-left > .section-lede { text-align: center; }
  .sc-left > .section-lede { margin-inline: auto; }
}

/* --- Products showcase scenes (chosen 2026-10-16 from product-lab): result card with gauge, API
   dashboard, Telegram result + PDF, white-label report. js/site.js adds .play to the scene on show,
   which starts its animations, and counts [data-to] numbers up. --- */
.rc, .db { width: 100%; max-width: 430px; }
.stage .s-main:has(.rc, .db, .rp) { padding: 18px 22px; }
.rp { width: 100%; }
/* gauge */
.gauge, .pg-g { position: relative; width: 140px; flex: none; }
.gauge svg, .pg-g svg { display: block; width: 100%; overflow: visible; }
.g-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; stroke-linecap: round; }
.g-arc { fill: none; stroke: var(--red); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.play .g-arc { stroke-dashoffset: 15; transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .3s; }
.g-n { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font: 600 30px/1 var(--sans); color: var(--red); letter-spacing: -.03em; }
.gauge .g-n { top: auto; bottom: 22px; font-size: 32px; }
.gauge { padding-bottom: 0; }
.g-l { display: block; margin-top: 8px; text-align: center; font: 600 10px var(--mono); letter-spacing: .14em; color: var(--red); }

/* 01 result card */
.rc { border: 1px solid var(--line2); border-radius: 14px; background: rgba(7,9,12,.92); padding: 14px 16px; }
.rc-top { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--soft); }
.rc-net { color: var(--red); border: 1px solid rgba(255,77,94,.35); padding: 1px 6px; border-radius: 4px; font-size: 10.5px; }
.rc-mid { display: flex; gap: 16px; align-items: center; margin: 12px 0 10px; }
.rc .gauge { width: 118px; }
.rc-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--soft); }
.rc-why li { display: flex; gap: 8px; align-items: flex-start; }
.rc-why em { flex: none; font: 600 10.5px var(--mono); font-style: normal; padding: 2px 5px; border-radius: 4px; color: #07090C; }
.rc-why em.r { background: var(--red); } .rc-why em.o { background: var(--orange); } .rc-why em.i { background: var(--line2); color: var(--soft); }
.rc-bar { display: flex; height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.rc-bar i, .tc-bar i, .pg-bars i { width: 0; }
.play .rc-bar i, .play .tc-bar i { width: var(--w); transition: width .9s cubic-bezier(.2,.7,.2,1) 1.6s; }
.rc-bar i.r { background: var(--red); } .rc-bar i.o { background: var(--orange); }
.rc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.rc-foot small { font: 11px var(--mono); color: var(--muted); }
.chip-pdf { font: 600 11.5px var(--mono); color: var(--lime); border: 1px solid rgba(198,255,61,.35); background: rgba(198,255,61,.07); padding: 5px 9px; border-radius: 6px; }

/* 02 dashboard */
.db { border: 1px solid var(--line2); border-radius: 14px; background: rgba(7,9,12,.92); padding: 14px; display: grid; gap: 12px; }
.db-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.db-tiles div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); }
.db-tiles small { display: block; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.db-tiles b { font: 600 20px/1.3 var(--sans); color: var(--text); letter-spacing: -.02em; } .db-tiles b.o { color: var(--orange); } .db-tiles b span { font-size: 11px; color: var(--muted); margin-left: 2px; }
.db-chart { display: flex; align-items: flex-end; gap: 5px; height: 70px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.db-chart i { flex: 1; height: 0; border-radius: 3px 3px 0 0; background: rgba(46,219,110,.35); }
.db-chart i.now { background: var(--green); box-shadow: 0 0 12px rgba(46,219,110,.5); }
.play .db-chart i { height: var(--h); transition: height .7s cubic-bezier(.2,.7,.2,1); }
.db-chart i:nth-child(n) { transition-delay: calc(var(--i, 0) * 40ms); }
.db-log { display: grid; gap: 6px; }
.db-log div { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font: 11px var(--mono); color: var(--soft); padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.025); }
.db-log code { color: var(--green); }
.db-log small { color: var(--muted); }
.lv { font-weight: 600; font-size: 10px; padding: 2px 6px; border-radius: 4px; color: #07090C; }
.lv.g { background: var(--green); } .lv.r { background: var(--red); } .lv.o { background: var(--orange); }

/* 03 telegram */
.tg { max-width: 330px; margin: 0 auto; }
.tg .chat { gap: 7px; padding: 10px 12px; }
.tg .msg { padding: 7px 11px; }
.stage .s-main:has(.tg) { padding-top: 10px; padding-bottom: 10px; }
.tg .ph-top { display: flex; align-items: center; gap: 8px; }
.langs { margin-left: auto; display: flex; gap: 4px; }
.langs em { font: 600 9.5px var(--mono); font-style: normal; padding: 2px 5px; border-radius: 4px; color: var(--muted); border: 1px solid var(--line2); }
.langs em.on { color: #07090C; background: var(--orange); border-color: var(--orange); }
.tg .msg { opacity: 0; transform: translateY(8px); }
.play .tg .msg { opacity: 1; transform: none; transition: opacity .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.play .tg .msg:nth-child(1) { transition-delay: .2s; }
.play .tg .typing { animation: typing-out 1.3s steps(1) .7s both; }
@keyframes typing-out { 0% { opacity: 1; } 100% { opacity: 0; height: 0; padding: 0; margin: 0; border: 0; } }
.typing { display: flex; gap: 4px; width: 46px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.play .tg .card { transition-delay: 2s; } .play .tg .file { transition-delay: 2.7s; }
.tg .card { min-width: 200px; }
.tc-h { display: flex; justify-content: space-between; gap: 12px; } .tc-h b { color: var(--text); }
.tc-bar { height: 5px; margin: 7px 0 2px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.tc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--orange), var(--red)); }
.play .tc-bar i { transition-delay: 2.3s; }
.file { display: flex; gap: 10px; align-items: center; }
.f-ic { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: rgba(255,77,94,.15); border: 1px solid rgba(255,77,94,.4); font: 700 9.5px var(--mono); color: var(--red); }
.file b { display: block; font: 600 12px var(--mono); color: var(--text); }

/* + white-label report */
.rp { position: relative; height: 300px; display: grid; place-items: center; }
.pg { position: absolute; width: 210px; height: 280px; border-radius: 6px; background: #f4f6f8; box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); }
.p3, .p2 { background: #dfe4ea; }
.p3 { transform: rotate(-8deg) translate(-24px, 6px); } .p2 { transform: rotate(-4deg) translate(-12px, 3px); }
.play .p3 { animation: fan3 .9s cubic-bezier(.2,.7,.2,1) both; } .play .p2 { animation: fan2 .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fan3 { from { transform: none; } } @keyframes fan2 { from { transform: none; } }
.p1 { padding: 12px; color: #1b2430; font-size: 8px; display: flex; flex-direction: column; gap: 8px; transform: rotate(2deg); }
.pg-h { display: flex; justify-content: space-between; align-items: center; }
.logo-slot { font: 700 7.5px var(--mono); letter-spacing: .1em; color: #6b7a8c; border: 1px dashed #9aa8b8; padding: 4px 6px; border-radius: 4px; }
.play .logo-slot { animation: logo-pop 2.6s ease 1s infinite; }
@keyframes logo-pop { 0%, 100% { border-color: #9aa8b8; color: #6b7a8c; } 30%, 60% { border-color: #2f6fde; color: #2f6fde; background: rgba(47,111,222,.08); } }
.pg-h small { color: #6b7a8c; font-size: 6.5px; }
.pg-addr { font: 600 8px var(--mono); padding: 5px 6px; background: #e8ecf1; border-radius: 3px; }
.pg-row { display: flex; gap: 8px; align-items: center; padding: 6px; border: 1px solid #f3b4b9; border-radius: 4px; background: #fff5f5; }
.pg-g { width: 64px; } .pg-g .g-bg { stroke: #e1e6ec; } .pg-g b { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 700 14px var(--sans); color: #d93b4a; }
.play .pg-g .g-arc { transition-delay: .6s; }
.pg-rec { font-size: 7.5px; line-height: 1.4; } .pg-rec b { color: #d93b4a; }
.pg-rec i { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: #e1e6ec; } .pg-rec i + i { width: 70%; }
.pg-bars { display: grid; gap: 4px; } .pg-bars span { display: flex; height: 7px; border-radius: 2px; overflow: hidden; background: #e1e6ec; }
.pg-bars i.r { background: #d93b4a; } .pg-bars i.g { background: #2ca85a; } .pg-bars i.x { background: #c9d0d8; }
.play .pg-bars i { width: var(--w); transition: width .8s cubic-bezier(.2,.7,.2,1) 1s; }
.pg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .pg-grid i { height: 22px; border-radius: 3px; background: #e8f5ec; border: 1px solid #bfe3cb; }
.pg-grid i.bad { background: #fff0f1; border-color: #f3b4b9; }
.stamp { position: absolute; right: 8%; bottom: 12%; font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9fd0ff; border: 1.5px solid #9fd0ff; padding: 5px 9px; border-radius: 6px; transform: rotate(-8deg) scale(1.6); opacity: 0; background: rgba(7,9,12,.85); }
.play .stamp { opacity: 1; transform: rotate(-8deg); transition: opacity .3s ease 1.6s, transform .4s cubic-bezier(.3,1.6,.5,1) 1.6s; }

@media (max-width: 480px) { .rc .gauge { width: 96px; } .rc-why { font-size: 11.5px; } .db-log span { display: none; } .db-log div { grid-template-columns: 1fr auto auto; } }
@media (prefers-reduced-motion: reduce) {
  .play .g-arc, .play .rc-bar i, .play .tc-bar i, .play .db-chart i, .play .tg .msg, .play .pg-bars i, .play .stamp { transition: none; }
  .play .p3, .play .p2, .play .logo-slot, .typing i { animation: none; } .tg .typing { display: none; }
}
@media (max-width: 720px) {
  .s-foot { padding: 0 18px; }
  .s-foot .go, .s-foot .btn { white-space: nowrap; flex: none; }
  .s-foot small { text-align: right; font-size: 11px; }
}

/* Developers on phones (chosen 2026-10-16: "code first, checklist"): centred head, the code window
   straight after it, then the buttons (the three points are hidden on phones). "Works on" sits centred at the end. */
@media (max-width: 720px) {
  .dev { display: flex; flex-direction: column; gap: 0; }
  .dev-left { display: contents; }
  .dev .kicker { order: 1; text-align: center; }
  .dev h2 { order: 2; text-align: center; }
  .dev .section-lede { order: 3; text-align: center; margin: 0 auto 26px; }
  .dev-right { order: 4; }
  .dev-points { display: none; }
  .dev-right { margin-bottom: 26px; }
  .dev-cta { order: 6; justify-content: center; width: 100%; }
  .dev-cta .btn { flex: 1; }
  .dev .os { order: 7; justify-content: center; width: 100%; margin-top: 26px; padding-top: 20px; }   /* "Works on", centred under the buttons */
  .os-l { text-align: center; }
  .os-g.linux { flex-basis: 100%; justify-content: center; margin: 0 0 2px; }
}

/* --- sign-up extras, password reset and welcome (2026-10-16, from account-lab) --- */
.env-ic { position: relative; width: 72px; height: 72px; margin: 4px auto 18px; display: grid; place-items: center; border-radius: 22px; color: var(--lime);
  background: rgba(198,255,61,.07); border: 1px solid rgba(198,255,61,.3); }
.env-ic svg { width: 38px; }
.env-ic i { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); animation: env-ping 1.8s ease-out infinite; }
@keyframes env-ping { 0% { box-shadow: 0 0 0 0 rgba(198,255,61,.55); } 100% { box-shadow: 0 0 0 12px rgba(198,255,61,0); } }
.mail-apps { display: flex; gap: 8px; margin: 4px 0 14px; } .mail-apps .btn { flex: 1; padding: 10px 12px; font-size: 14px; }
.auth-done .alt { margin: 8px 0 0; }
.resend-t { color: var(--muted); font-size: 12.5px; }
.demo-link { margin-top: 20px; }
.back-link { display: inline-block; margin-bottom: 14px; font-size: 14px; color: var(--soft); text-decoration: none; } .back-link:hover { color: var(--lime); }
.form-ok { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(46,219,110,.3); border-radius: 10px; background: rgba(46,219,110,.06); font-size: 14px; line-height: 1.5; color: var(--soft); }
.welcome-card { text-align: center; }
.ok-ic { width: 64px; height: 64px; margin: 4px auto 16px; display: grid; place-items: center; border-radius: 50%; color: #07090C; background: var(--green); box-shadow: 0 0 30px rgba(46,219,110,.45); animation: done-in .5s cubic-bezier(.2,.7,.2,1); }
.ok-ic svg { width: 30px; }
.use-q { margin: 24px 0 10px; font-size: 15px; } .use-q small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.use-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.use-chips button { padding: 8px 14px; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--soft); font: 14px var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.use-chips button:hover { border-color: rgba(198,255,61,.45); }
.use-chips button[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #07090C; font-weight: 600; }

/* Welcome page while the confirmation link is checked (2026-10-16) */
.wl-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 0 10px; }
.wl-wait .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--lime); animation: wl-spin .8s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
.wl-bad h2 { margin-top: 4px; }
.form-error a, .form-error button.link-btn { color: inherit; text-decoration: underline; }
.wl-wait[hidden], .wl-ok[hidden], .wl-bad[hidden] { display: none; }

/* Sign-up: the free pass (2026-10-16, Simon picked option A). Tilts with the mouse; js/auth.js puts the typed email on it. */
.auth-pitch .section-lede{margin-bottom:30px}
.pass-wrap{perspective:1000px;max-width:460px}
.pass{position:relative;aspect-ratio:1.62;border-radius:22px;padding:24px 26px;overflow:hidden;transform-style:preserve-3d;transition:transform .25s ease-out;
  background:radial-gradient(120% 140% at 0% 0%,#1d2a12 0%,#0f1410 45%,#0a0d0c 100%);border:1px solid rgba(198,255,61,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 0 80px rgba(198,255,61,.08);display:flex;flex-direction:column}
.pass-holo{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 20%,rgba(198,255,61,.16) 28%,rgba(46,219,110,.12) 34%,rgba(98,126,234,.14) 42%,transparent 50% 70%,rgba(247,147,26,.10) 78%,transparent 86%);
  mix-blend-mode:screen;animation:holo 9s linear infinite;pointer-events:none}
@keyframes holo{to{transform:rotate(360deg)}}
.pass-glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.14),transparent 45%);pointer-events:none}
.pass-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.pass-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px}.pass-brand img{width:28px;height:28px}.pass-brand em{font-style:normal;color:var(--lime)}
.pass-kind{font:700 12px var(--mono);letter-spacing:.22em;color:#07090C;background:var(--lime);padding:5px 10px;border-radius:7px}
.pass-mid{display:flex;align-items:center;justify-content:space-between;margin:auto 0;position:relative}
.pass-big{display:flex;align-items:center;gap:14px}.pass-big b{font-size:84px;line-height:.9;letter-spacing:-.05em;color:var(--lime);text-shadow:0 0 30px rgba(198,255,61,.35)}
.pass-big span{font:600 15px var(--mono);letter-spacing:.06em;color:var(--soft);text-transform:uppercase;line-height:1.35}
.pass-holes{display:flex;gap:10px}.pass-holes i{width:26px;height:26px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(198,255,61,.6),inset 0 -3px 0 rgba(0,0,0,.25);animation:pop .5s cubic-bezier(.3,1.6,.5,1) backwards}
.pass-holes i:nth-child(2){animation-delay:.12s}.pass-holes i:nth-child(3){animation-delay:.24s}
@keyframes pop{from{transform:scale(0)}}
.pass-bot{display:flex;justify-content:space-between;align-items:flex-end;position:relative;border-top:1px dashed rgba(198,255,61,.25);padding-top:12px}
.pass-bot small{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pass-bot b{font:600 16px var(--mono);color:var(--text)}.pass-email{display:block;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pass-r{text-align:right}
.pass-chains{position:absolute;right:26px;top:64px;display:flex;align-items:center;gap:0}.pass-chains i{width:12px;height:12px;border-radius:50%;background:var(--c);margin-left:-3px;box-shadow:0 0 0 2px #0e130f}
.pass-chains span{margin-left:8px;font:500 11px var(--mono);color:var(--muted);letter-spacing:.06em}
@media (max-width:720px){.pass-big b{font-size:64px}.pass-holes i{width:20px;height:20px}.pass-chains{display:none}}
@media (prefers-reduced-motion:reduce){.pass-holo{animation:none}}