/* hoodhunt.io blog. Self-contained: tokens, type and the bar / footer / button styles are copied from the landing's site.css
   (web/src/site/site.css) so the blog reads as the same site. Fonts and images are the landing's own files at /fonts and /brand. */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap }
@font-face { font-family: 'Michroma'; src: url('/fonts/michroma-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap }

:root, html[data-theme=night] {
  --bg: #050506; --panel: #0B0B0E; --raised: #141418; --line: #1C1C22; --line-2: #2C2C35;
  --text: #F2F3F6; --text-2: #BEC2CA; --muted: #868B95;
  --purple: #9945FF; --green: #14F195; --neg: #FF4D6D;
  --pri-bg: #F2F3F6; --pri-fg: #050506;
  --tile: radial-gradient(110% 70% at 0% 0%, rgba(242, 243, 246, .06), transparent 55%), linear-gradient(180deg, #131418, #0A0B0D);
  --inset: rgba(5, 5, 6, .45);
  --f-text: 'General Sans', -apple-system, system-ui, sans-serif;
  --f-head: 'Unbounded', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', Menlo, 'SF Mono', Consolas, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.2, .75, .1, 1);
  --nav: 64px;
  color-scheme: dark;
}
html[data-theme=paper] {
  --bg: #F5F5F7; --panel: #FFFFFF; --raised: #ECECF0; --line: #E2E2E8; --line-2: #CDCDD5;
  --text: #0A0A0C; --text-2: #2E3038; --muted: #62646E;
  --purple: #7B3FE4; --green: #0B9F62; --neg: #D93A5C;
  --pri-bg: #0A0A0C; --pri-fg: #FFFFFF;
  --tile: radial-gradient(110% 70% at 0% 0%, #FFFFFF, transparent 55%), linear-gradient(180deg, #FCFCFD, #EFEFF2);
  --inset: rgba(245, 245, 247, .7);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-padding-top: var(--nav); -webkit-text-size-adjust: 100%; background: var(--bg) }
body { margin: 0; color: var(--text); font: 400 16px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; overflow-wrap: break-word }
p, li, td, th { text-wrap: pretty }
p { margin: 0 }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 999px }
::selection { background: var(--text); color: var(--bg) }
/* the landing's film grain, so the dark never reads flat */
body::after { content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
html[data-theme=paper] body::after { opacity: .07; mix-blend-mode: multiply }

.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding-inline: var(--gut) }

/* buttons: every control is a pill (as on the landing) */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; border-radius: 999px; font: 500 15px var(--f-text); white-space: nowrap; transition: background .2s, border-color .2s, opacity .2s, transform .3s var(--ease) }
.btn.sm { height: 38px; padding: 0 18px; font-size: 14px }
.btn:active { transform: scale(.98) }
.btn.pri { background: var(--pri-bg); color: var(--pri-fg) }
.btn.pri:hover { opacity: .88 }
.btn.alt { border: 1px solid var(--line-2); color: var(--text) }
.btn.alt:hover { border-color: var(--muted) }

/* top bar */
.tb { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line) }
.tb-in { max-width: 1480px; height: 100%; margin: 0 auto; padding-inline: var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px }
.tb-in > .wm { justify-self: start }
.wm { font: 400 14px 'Michroma', var(--f-text); letter-spacing: .18em; color: var(--text); white-space: nowrap }
.tb-nav { display: flex; gap: 28px }
.tb-nav a { font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color .2s }
.tb-nav a:hover { color: var(--text) }
.tb-act { display: flex; align-items: center; gap: 10px; justify-self: end; grid-column: 3 }
.ico { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: var(--text-2); border: 1px solid var(--line-2); transition: color .2s, border-color .2s }
.ico:hover { color: var(--text); border-color: var(--muted) }
.ico svg { width: 18px; height: 18px }
.ico .moon, html[data-theme=paper] .ico .sun { display: none }
html[data-theme=paper] .ico .moon { display: block }
@media (max-width: 900px) { .tb-join { display: none } }
@media (max-width: 760px) { .tb-nav { display: none } }
@media (max-width: 560px) { :root { --nav: 58px } .tb-in { gap: 12px } .wm { font-size: 12.5px } .tb-act .btn.sm { padding: 0 14px; font-size: 13.5px } }

main { padding: calc(var(--nav) + clamp(40px, 6vw, 88px)) var(--gut) 0; --col: 700px; --mark: color-mix(in srgb, var(--text) 46%, transparent); --mark-dim: color-mix(in srgb, var(--text) 13%, transparent); --sol: linear-gradient(90deg, var(--purple), var(--green)) }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap }
.g { color: var(--green) }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
.kick { display: flex; align-items: center; gap: 12px; font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.kick a { color: var(--text-2); padding-bottom: 2px; border-bottom: 1px solid var(--line-2); transition: color .2s, border-color .3s }
.kick a:hover { color: var(--text); border-color: var(--text) }
.kick a + span::before { content: '/'; margin-right: 12px; color: var(--line-2) }

/* article: a wide header and figures, the text in one reading column */
.post { max-width: 880px; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--text-2) }
.post > * { max-width: var(--col); margin-inline: auto }
.post > .hero, .post > .fig { max-width: none }
.hero { position: relative; padding: 26px 0 30px; border-bottom: 1px solid var(--line) }
.hero::before { content: ''; position: absolute; left: 0; top: 0; width: 56px; height: 2px; border-radius: 2px; background: var(--sol) }
.hero h1 { margin-top: 20px; max-width: 17em; font: 500 clamp(31px, 5vw, 58px)/1.06 var(--f-head); letter-spacing: -.04em; color: var(--text) }
.stand { margin-top: 22px; max-width: 37em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text-2) }
.by { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 28px; font: 400 12.5px var(--f-mono); color: var(--muted) }
.by > * { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line-2) }
.by > :last-child { padding-right: 0; margin-right: 0; border-right: 0 }
.by a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px }
.by a:hover { text-decoration-color: var(--text) }
.by time { color: var(--text-2) }
.short { margin-top: 32px; padding: 20px 24px 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--tile) }
.short-h { font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.short ol { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: k }
.short li { padding: 13px 0; font-size: 16.5px; line-height: 1.5; color: var(--text) }
.short li + li { border-top: 1px solid var(--line) }

.post h2 { margin-top: 2.4em; font: 500 clamp(21px, 2.4vw, 27px)/1.2 var(--f-head); letter-spacing: -.03em; color: var(--text) }
.post h3 { margin-top: 2em; font: 600 20px/1.3 var(--f-text); color: var(--text) }
.post > p, .post > ul, .post > ol, .post > .tbl { margin-top: 1.15em }
.short + p { margin-top: 2em }
.post strong { font-weight: 600; color: var(--text) }
.post > p a, .post > ul a, .post > ol a, .post td a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s }
.post > p a:hover, .post > ul a:hover, .post > ol a:hover { text-decoration-color: var(--text) }
.post > ul { padding-left: 1.4em }
.post > ul > li { padding-left: .25em }
.post > ul > li + li { margin-top: .55em }
.post > ul > li::marker { color: var(--muted) }
/* numbered methods read as step cards */
.post > ol { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 8px }
.post > ol > li { counter-increment: s; position: relative; padding: 14px 20px 14px 62px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); font-size: .95em; line-height: 1.55 }
.post > ol > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 20px; top: 18px; font: 500 12.5px var(--f-mono); letter-spacing: .04em; color: var(--muted) }
.post .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--tile) }
.post .tbl table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 15px; line-height: 1.45 }
.post .tbl th, .post .tbl td { padding: 13px 18px; text-align: left; vertical-align: top }
.post .tbl th { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.post .tbl td { border-top: 1px solid var(--line); color: var(--text) }
.post .tbl td:first-child { color: var(--muted) }
.post .risk { margin-top: 3em; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--muted) }
@media (max-width: 560px) { .post { font-size: 17px; line-height: 1.65 } .post > ol > li { padding: 13px 16px 13px 50px } .post > ol > li::before { left: 16px } .short { padding-inline: 18px } }

/* ---------- figures: graphite tiles, silver marks, mono labels ---------- */
.fig { margin: 2.3em auto; padding: 22px 24px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--tile); container-type: inline-size; overflow: hidden; line-height: 1.45 }
.fig-h { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.fig-t { margin-top: 12px; max-width: 30em; font: 500 clamp(17px, 2.2vw, 22px)/1.25 var(--f-head); letter-spacing: -.025em; color: var(--text); text-wrap: balance }
.fig-b { margin-top: 24px }
.fig figcaption { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty }
.fig dl, .th dl { margin: 0 } .fig dd, .th dd { margin: 0 }
.lg { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 16px; font-size: 12.5px; color: var(--muted) }
.lg span { display: inline-flex; align-items: center; gap: 8px }
.ring, .disc { flex: none; width: 11px; height: 11px; border-radius: 50% }
.ring { border: 2px solid var(--mark); background: var(--panel) }
.disc { background: var(--text) } .disc.dim { background: var(--mark-dim) }
.vd { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); font: 500 12px var(--f-mono) }
.vd-copy { color: var(--green) } .vd-watch { color: var(--purple) } .vd-check, .vd-skip { color: var(--muted) }
html[data-theme=night] .vd-watch { color: #B987FF }

/* funnel: tick bars, linear scale */
.bar { display: block; position: relative; height: 14px; background: var(--mark-dim); -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px); mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px) }
.bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: max(2px, calc(var(--w) * 100%)); background: var(--mark); transform-origin: left; transition: transform 1.1s var(--ease) .15s }
.fn { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.fn li { display: grid; grid-template-columns: 24px minmax(0, 16.5em) minmax(40px, 1fr) 62px; gap: 12px; align-items: center; font-size: 14px; color: var(--text-2) }
.fn-n { font: 400 12px var(--f-mono); color: var(--muted) }
.fn b { text-align: right; font-size: 13px; font-weight: 500; color: var(--text-2) }
.fn .end, .fn .end b { color: var(--text) } .fn .end .bar::after { background: var(--text) }
@container (max-width: 600px) { .fn { gap: 12px } .fn li { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 6px } .fn b { grid-column: 3; grid-row: 1 } .fn .bar { grid-column: 2 / -1; grid-row: 2 } }

/* score check: two columns */
.scw { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 20px 40px; align-items: end }
.sc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 230px }
.sc > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px }
.sc b { font: 500 clamp(26px, 8cqw, 40px)/1 var(--f-head); letter-spacing: -.035em; color: var(--muted) }
.sc .on b { color: var(--text) }
.sc .col { width: 100%; height: calc(var(--h) * 74%); background: var(--mark-dim); transform-origin: bottom; transition: transform 1.1s var(--ease) .15s; -webkit-mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 7px); mask: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 7px) }
.sc .on .col { background: var(--text) }
.sc span { font-size: 12.5px; color: var(--muted); text-align: center }
.sc-d div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px }
.sc-d dt { color: var(--muted) } .sc-d dd { color: var(--text); text-align: right }
@container (max-width: 600px) { .scw { grid-template-columns: 1fr } .sc { height: 200px } }

/* dumbbell rows (wallet versus copy) and fee ranges share one row grid: label, track, value */
.gp, .fe { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.gp li, .fe li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 112px; gap: 16px; align-items: center; min-height: 28px }
.fe li { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 15em); min-height: 34px }
.gp-a { font-size: 12.5px; color: var(--text-2) }
.gp-v { font-size: 12.5px; text-align: right; color: var(--muted) } .gp-v em { font-style: normal } .gp-v b { font-weight: 500; color: var(--text) }
.gp-t, .fe-t { padding-inline: 7px }
.gp-t > div, .fe-t > div { position: relative; height: 28px; background: linear-gradient(var(--line), var(--line)) 0 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 100% 0 / 1px 100% no-repeat }
.gp-t i, .fe-t i { position: absolute; top: 50% }
.gp-t .ring, .gp-t .disc { left: calc(var(--x) * 100%); transform: translate(-50%, -50%) }
.gp-t .ln { left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); height: 2px; margin-top: -1px; background: var(--mark) }
.ax > div > div, li.ax .gp-t > div, li.ax .fe-t > div { background: none; height: 18px }
li.ax span[style] { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); font: 400 12px var(--f-mono); color: var(--muted) }
.fe-l { font-size: 14px; font-weight: 500; color: var(--text) }
.fe-v { font-size: 13px; color: var(--muted) } .fe-v em { font-style: normal } .fe-v b { font-weight: 500; color: var(--text); margin-right: 4px }
.fe-t .rg { left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); height: 10px; margin-top: -5px; border-radius: 2px; background: var(--text) }
.fe-t .pt { left: calc(var(--x) * 100%); width: 4px; height: 18px; margin: -9px 0 0 -2px; border-radius: 1px; background: var(--text) }
.fe-t .pt.alt { background: var(--mark) }
.fe .na .fe-t { visibility: hidden }
@container (max-width: 560px) {
  .gp li, .fe li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-top: 6px }
  .gp-t, .fe-t { grid-column: 1 / -1; grid-row: 2 }
  li.ax > span { display: none } li.ax .gp-t, li.ax .fe-t { grid-row: 1 }
  .fe .na .fe-t { display: none } .fe .na { padding-bottom: 6px }
}

/* lollipops: one stem per wallet */
.sp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: 210px }
.sp-y { display: flex; flex-direction: column; justify-content: space-between; padding-top: 2px; font: 400 12px var(--f-mono); color: var(--muted); text-align: right }
.sp-c { display: flex; align-items: flex-end; height: 100%; padding-top: 8px; border-bottom: 1px solid var(--line-2) }
.sp-c i { flex: 1; height: 100%; display: flex; justify-content: center; align-items: flex-end }
.sp-c b { position: relative; display: block; width: 2px; height: max(2px, calc(var(--h) * 100%)); background: currentColor; transform-origin: bottom; transition: transform 1.1s var(--ease) calc(.1s + var(--h) * .5s) }
.sp-c b::before { content: ''; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor }
.sp-c .c { color: var(--text) } .sp-c .w { color: color-mix(in srgb, var(--text) 30%, var(--panel)) }
.fig .lg .disc.dim { background: color-mix(in srgb, var(--text) 30%, var(--panel)) }

/* cards inside a figure: the two wallets, the wallet record, the flows */
.cps, .wc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.cp, .wc-g > div, .fl-lane, .fl-row li { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--inset) }
.cp-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text) }
.cp-k { margin-top: 8px; font-size: 13px; color: var(--muted) }
.cp dl { margin-top: 18px; display: grid; gap: 14px }
.cp dt { font-size: 12.5px; color: var(--muted) }
.cp dd { margin-top: 3px; font: 500 clamp(24px, 6cqw, 36px)/1.1 var(--f-head); letter-spacing: -.035em; color: var(--text); white-space: nowrap }
.cp dd.g, .wc dd.g, .th dd.g { color: var(--green) }
.cp-r { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted) }
.cp-r b { font-weight: 500; color: var(--text); margin-left: 4px }
.wc-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--text) }
.wc-top p { display: flex; align-items: center; gap: 10px } .wc-top .m { font-size: 13px; color: var(--muted) }
.wc-g { margin-top: 16px }
.wc-g > .key { border-color: var(--line-2) }
.wc-k { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.wc dl { margin-top: 8px }
.wc dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 14px }
.wc dl div + div { border-top: 1px solid var(--line) }
.wc dt { color: var(--text-2) } .wc dd { font: 500 13.5px var(--f-mono); color: var(--text) }
.wc .key dl div:first-child { display: block; padding-bottom: 14px } .wc .key dl div:first-child dd { margin-top: 4px; font: 500 clamp(30px, 8cqw, 46px)/1.05 var(--f-head); letter-spacing: -.04em }
@container (max-width: 560px) { .cps, .wc-g { grid-template-columns: 1fr } }

/* stat callouts */
.st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.st-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.st > div { padding-right: 18px } .st > div + div { padding-left: 20px; border-left: 1px solid var(--line) }
.st b { display: block; font: 500 clamp(24px, 5cqw, 42px)/1.05 var(--f-head); letter-spacing: -.04em; color: var(--text-2); white-space: nowrap }
.st-4 b { font-size: clamp(20px, 3.5cqw, 30px) }
.st .end b { color: var(--text) }
.st span { display: block; margin-top: 10px; font-size: 14px; color: var(--text) }
.st small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted) }
@container (max-width: 600px) {
  .st, .st-4 { grid-template-columns: 1fr 1fr; gap: 20px 0 } .st b, .st-4 b { font-size: 24px }
  .st > div:nth-child(odd) { padding-left: 0; border-left: 0 }
  .st:not(.st-4) > div:last-child { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line) } .st:not(.st-4) > div:last-child b { font-size: 34px }
}

/* step diagrams */
.fl { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: start }
.fl-lane { position: relative }
.fl-lane.acc { border-color: var(--line-2) }
.fl-lane.acc::before { content: ''; position: absolute; left: 20px; top: -1px; width: 56px; height: 2px; border-radius: 2px; background: var(--sol) }
.fl-h { margin-bottom: 16px; font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.fl ol { list-style: none; margin: 0; padding: 0; counter-reset: f; display: grid }
.fl li { counter-increment: f; position: relative; padding: 2px 0 18px 40px; font-size: 14.5px; line-height: 1.4; color: var(--text) }
.fl li:last-child { padding-bottom: 0 }
.fl li::before { content: counter(f); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 12px var(--f-mono); color: var(--text-2) }
.fl li::after { content: ''; position: absolute; left: 12px; top: 28px; bottom: 4px; width: 1px; background: var(--line-2) }
.fl li:last-child::after { content: none }
.fl li b { display: block; font-weight: 500 } .fl li span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted) }
.fl-row { grid-template-columns: 1fr }
.fl-row .fl-lane { padding: 0; border: 0; background: none }
.fl-row ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px }
.fl-row li, .fl-row li:last-child { padding: 54px 18px 18px }
.fl-row li::before { left: 18px; top: 16px }
.fl-row li::after { left: 50px; right: -13px; top: 28px; bottom: auto; width: auto; height: 1px }
@container (max-width: 640px) { .fl { grid-template-columns: 1fr } .fl-row ol { grid-auto-flow: row } .fl-row li::after { content: none } .fl-row li, .fl-row li:last-child { padding: 16px 18px 16px 58px } .fl-row li::before { top: 16px } }

/* figures draw in once on reveal; still when motion is reduced or there is no script */
.js [data-rv] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .9s var(--ease) }
.js [data-rv].in { opacity: 1; transform: none }
.js [data-rv]:not(.in) .bar::after { transform: scaleX(0) }
.js [data-rv]:not(.in) .sc .col, .js [data-rv]:not(.in) .sp-c b { transform: scaleY(0) }
@media (prefers-reduced-motion: reduce) { .js [data-rv] { opacity: 1; transform: none; transition: none } .js [data-rv] .bar::after, .js [data-rv] .sc .col, .js [data-rv] .sp-c b { transform: none !important; transition: none } }

/* call to action: the landing's panel, compact */
.cta { max-width: 880px; margin: clamp(56px, 7vw, 88px) auto 0; padding: clamp(36px, 5vw, 56px) 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(70% 90% at 50% 130%, color-mix(in srgb, var(--text) 9%, transparent), transparent 70%), var(--panel) }
.cta h2 { font: 500 clamp(22px, 3vw, 34px)/1.1 var(--f-head); letter-spacing: -.035em; max-width: 16em }
.cta p { font-size: 16.5px; color: var(--text-2) }
.cta .btn { margin-top: 10px }

/* cards: every article carries its own small visual */
.more { max-width: 1180px; margin: clamp(56px, 7vw, 88px) auto 0 }
.more > h2 { font: 500 clamp(20px, 2.2vw, 26px)/1.2 var(--f-head); letter-spacing: -.03em }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px }
.card { display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line); background: var(--tile); overflow: hidden; transition: border-color .25s, transform .35s var(--ease) }
.card:hover { border-color: var(--line-2); transform: translateY(-3px) }
.card-v { display: flex; flex-direction: column; justify-content: center; height: 204px; margin: 10px 10px 0; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--inset); overflow: hidden; container-type: inline-size }
.card-t { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 18px }
.card-k { font: 500 12px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.card h2, .card h3 { font: 500 16.5px/1.3 var(--f-head); letter-spacing: -.02em }
.card-d { flex: 1; font-size: 14px; line-height: 1.5; color: var(--muted) }
.meta { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 12px var(--f-mono); color: var(--muted) }
.card .meta span:first-child { color: var(--text-2) }
/* the small visuals */
.th { width: 100%; line-height: 1.35 }
.th .sc { height: 150px; max-width: 260px; margin: 0 auto; gap: 12px } .th .sc b { font-size: 24px } .th .sc span { font-size: 12px }
.th-big b { display: block; font: 500 clamp(22px, 9cqw, 30px)/1.05 var(--f-head); letter-spacing: -.04em; white-space: nowrap } .th-big span { display: block; margin: 5px 0 12px; font-size: 12.5px; color: var(--muted) }
.th .fn { gap: 5px } .th .fn li { grid-template-columns: minmax(0, 1fr) 54px; gap: 10px } .th .fn-n, .th .fn-l { display: none } .th .fn .bar { height: 8px; grid-column: auto; grid-row: auto } .th .fn b { font-size: 12px; grid-column: auto; grid-row: auto }
.th .lg { margin-bottom: 8px; gap: 2px 14px; font-size: 12px }
.gp.mini li { grid-template-columns: minmax(0, 1fr); min-height: 18px; padding: 0 } .gp.mini .gp-a, .gp.mini .gp-v { display: none } .gp.mini .gp-t { grid-column: auto; grid-row: auto } .gp.mini .gp-t > div { height: 18px }
.th .sp-c { height: 64px }
.th-pair { display: grid; gap: 14px } .th-pair b { display: block; font: 500 clamp(21px, 8.5cqw, 28px)/1.05 var(--f-head); letter-spacing: -.04em; white-space: nowrap } .th-pair b.g { color: var(--green) } .th-pair span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted) }
.th-card > p { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px }
.th-card dl { margin-top: 14px } .th-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px } .th-card dt { color: var(--muted) } .th-card dd { font: 500 13px var(--f-mono) }
.fe.mini li { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; min-height: 28px; padding: 0 } .fe.mini .fe-v em { display: none } .fe.mini .fe-v b { margin: 0; font-size: 12px } .fe.mini .fe-t { grid-column: auto; grid-row: auto } .fe.mini .fe-l { font-size: 13px } .fe.mini .fe-t > div { height: 26px }
.th-flow { list-style: none; margin: 0; padding: 0; counter-reset: f; display: grid; gap: 0 }
.th-flow li { counter-increment: f; position: relative; padding: 0 0 14px 36px } .th-flow li:last-child { padding-bottom: 0 }
.th-flow li::before { content: counter(f); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 12px var(--f-mono); color: var(--text-2) }
.th-flow li::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: var(--line-2) } .th-flow li:last-child::after { content: none }
.th-flow b { font-size: 14px; font-weight: 500; margin-right: 8px } .th-flow span { font-size: 12.5px; color: var(--muted) }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr } }

/* list page */
.list { max-width: 1180px; margin: 0 auto }
.list h1 { margin-top: 18px; max-width: 15em; font: 500 clamp(31px, 4.8vw, 60px)/1.05 var(--f-head); letter-spacing: -.04em }
.lead { margin-top: 20px; font-size: clamp(17px, 1.4vw, 19px); color: var(--text-2); max-width: 34em }
.grid { margin-top: clamp(32px, 4vw, 56px) }
.card.feat { grid-column: 1 / -1 }
@media (min-width: 861px) {
  .card.feat { flex-direction: row }
  .card.feat .card-v { flex: 1 1 46%; height: auto; min-height: 250px; margin: 10px 0 10px 10px; padding: 24px 28px }
  .card.feat .card-t { flex: 1 1 54%; justify-content: center; padding: 30px 36px; gap: 14px }
  .card.feat h2 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -.03em }
  .card.feat .card-d { flex: none; font-size: 16px; color: var(--text-2) }
  .card.feat .th .sc { height: 200px; max-width: 320px } .card.feat .th .sc b { font-size: 34px }
}

/* footer (the landing's) */
.ft { margin-top: clamp(64px, 8vw, 120px) }
.ft-card { position: relative; overflow: hidden; container-type: inline-size; border-radius: 24px 24px 0 0; border: 1px solid var(--line); border-bottom: 0; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 0;
  background: radial-gradient(70% 60% at 50% 120%, color-mix(in srgb, var(--text) 9%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 90%, transparent) }
html[data-theme=paper] .ft-card { background: radial-gradient(70% 60% at 50% 120%, rgba(10, 10, 12, .06), transparent 70%), rgba(255, 255, 255, .9) }
.ft-top { display: flex; justify-content: space-between; gap: 40px 64px; flex-wrap: wrap }
.ft-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 400px }
.ft-brand p { font-size: 14.5px; color: var(--muted) }
.ft-cols { display: grid; grid-template-columns: repeat(2, minmax(120px, auto)); gap: 24px clamp(32px, 5vw, 80px) }
.ft-cols div { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px }
.ft-cols p { font-size: 13.5px; color: var(--muted); margin-bottom: 4px }
.ft-cols a { color: var(--text-2) }
.ft-cols a:hover { color: var(--text) }
.ft-fine { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 48px); padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted) }
.ft-big { margin: clamp(16px, 3cqw, 36px) 0 0; padding-bottom: .02em; font: 400 10.6cqw/1 'Michroma', var(--f-text); letter-spacing: .02em; text-align: center; white-space: nowrap; user-select: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 34%, transparent), color-mix(in srgb, var(--text) 6%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent }
@media (max-width: 760px) { .ft-card { border-radius: 20px 20px 0 0 } }