/* Hallmark · macrostructure: custom (studied-DNA christendijoux.com + Jesper Landberg ribbon) · tone: technical, austere · anchor hue: none (monochrome) · nav: N9 edge-aligned · footer: Ft5 statement */
/* HOLDFY: monochrome instrument. Palette and type follow brand/STYLE.md. */
@font-face { font-family: 'Shoulders'; src: url(/assets/fonts/bigshoulders.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(/assets/fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/assets/fonts/geistmono.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --void: #050505;
  --ink: #f2f2ee;
  --mute: #8b8b87;
  --hair: #1e1e1d;
  --panel: #0b0b0a;
  --line: rgba(242, 242, 238, .16);
  --pad: clamp(16px, 2.2vw, 44px);
  --display: 'Shoulders', 'Arial Narrow', sans-serif;
  --body: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color: var(--ink); -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 300 15px/1.55 var(--body); background: var(--void); overflow-x: clip; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 300; }
p { margin: 0; }
.num { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.quiet { color: var(--mute); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 99; background: var(--ink); color: var(--void); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* crosshair ticks on panel corners, the reference's "+" marks */
.tick { position: absolute; width: 13px; height: 13px; pointer-events: none; }
.tick::before, .tick::after { content: ''; position: absolute; background: var(--ink); opacity: .55; }
.tick::before { left: 6px; top: 0; width: 1px; height: 13px; }
.tick::after { top: 6px; left: 0; height: 1px; width: 13px; }
.tick.tl { left: -6px; top: -6px; } .tick.tr { right: -6px; top: -6px; }
.tick.bl { left: -6px; bottom: -6px; } .tick.br { right: -6px; bottom: -6px; }

/* ---------- header ---------- */
.hq-top {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 12px var(--pad); background: rgba(5, 5, 5, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.hq-nav { display: flex; gap: clamp(12px, 1.6vw, 28px); font-size: 13px; font-weight: 400; }
.hq-nav a { text-decoration: none; color: var(--mute); position: relative; padding: 4px 0; transition: color .3s; }
.hq-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right .45s var(--ease); }
.hq-nav a:hover { color: var(--ink); }
.hq-nav a:hover::after { right: 0; }
.hq-mark img { width: 44px; height: 44px; }
.hq-tools { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.ico { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); transition: background .3s, color .3s; }
.ico:hover { background: var(--ink); color: var(--void); }
.ca-chip { height: 36px; padding: 0 12px; border: 1px solid var(--line); background: none; color: var(--mute); font: 400 12px var(--mono); cursor: pointer; white-space: nowrap; }
.ca-chip.live { color: var(--ink); }
.btn-solid, .btn-line {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font: 500 13px var(--body);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, opacity .3s;
}
.btn-solid { background: var(--ink); color: var(--void); border: 1px solid var(--ink); }
.btn-solid:hover { background: transparent; color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-line:hover { border-color: var(--ink); }
.btn-line[aria-disabled="true"] { opacity: .45; pointer-events: none; }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-solid:active, .btn-line:active, .ico:active, .ca-chip:active { transform: translateY(1px); }
.mega, .big-h, .slab h3, .how-steps h3, .sheet h2, .rig-title { overflow-wrap: anywhere; min-width: 0; }
.big { height: 48px; padding: 0 22px; font-size: 14px; }

/* ---------- first view ---------- */
.stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4.2fr) minmax(360px, 3.4fr);
  gap: clamp(20px, 2vw, 40px); padding: clamp(28px, 4vh, 56px) var(--pad) clamp(40px, 6vh, 80px); min-height: calc(100vh - 61px);
  border-bottom: 1px solid var(--hair);
  background: radial-gradient(rgba(242, 242, 238, .07) 1px, transparent 1.4px) 0 0 / 22px 22px;
}
.stage > .tick.tl { left: calc(var(--pad) - 6px); top: 14px; } .stage > .tick.tr { right: calc(var(--pad) - 6px); top: 14px; }
.stage-copy { display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 40px); padding-top: 1vh; align-self: start; position: sticky; top: 90px; }
.mega { font: 300 clamp(64px, min(9vw, 17vh), 236px)/.84 var(--display); text-transform: uppercase; letter-spacing: -.012em; }
.mega .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.mega .ln > span { display: block; white-space: nowrap; }
.lede { max-width: 34em; font-size: clamp(15px, 1.05vw, 19px); color: #c9c9c4; }
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--hair); }
.readout > div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); }
.readout > div:nth-child(odd) { border-right: 1px solid var(--hair); }
.readout > div:nth-child(even) { padding-left: 16px; }
.readout dt { font-size: 12.5px; color: var(--mute); }
.readout dd { margin: 4px 0 0; font-size: clamp(22px, 1.9vw, 34px); }

.orb { position: sticky; top: 76px; align-self: start; margin: 0; height: min(820px, calc(100vh - 100px)); min-height: 420px; }
.orb canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
.orb-key { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13px; color: var(--mute); }
.orb-key span { display: flex; align-items: center; gap: 8px; }
.orb-key i { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ink); transform: scale(.7); }
.orb-key span[data-k="cause"] i { transform: none; }
.orb-key span[data-k="buyback"] i { border-radius: 0; background: radial-gradient(var(--ink) 1px, transparent 1.3px) 0 0 / 4px 4px; transform: none; }
.orb-key span[data-k="creator"] i { background: none; border: 1px solid var(--ink); }
.orb-key b { margin-left: auto; color: var(--ink); font-weight: 400; }

.rig { position: relative; align-self: start; background: var(--panel); border: 1px solid var(--hair); padding: 22px 22px 20px; display: grid; gap: 14px; }
.rig-title { font: 300 40px/.9 var(--display); text-transform: uppercase; }
.rig-note, .rig-cut, .rig-est, .rig-status { font-size: 13px; color: var(--mute); }
.rig-status.bad { color: #e8b7a8; }
.rig-status.good { color: var(--ink); }
.rig-status a { color: var(--ink); }
.splits { display: grid; gap: 12px; }
.split { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px; font-size: 13.5px; font-weight: 400; cursor: pointer; }
.split b { font-size: 15px; font-weight: 400; }
.split input { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(to right, var(--ink) var(--p, 50%), #3a3a38 var(--p, 50%)); }
input[type="range"]::-moz-range-track { height: 1px; background: #3a3a38; }
input[type="range"]::-moz-range-progress { height: 1px; background: var(--ink); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; background: var(--void); border: 1px solid var(--ink); transform: rotate(45deg); }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; background: var(--void); border: 1px solid var(--ink); border-radius: 0; transform: rotate(45deg); }
.fields { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.fld { display: grid; gap: 4px; font-size: 12.5px; color: var(--mute); }
.fld-w { grid-column: 1 / -1; }
.fld input:not([type="range"]):not([type="file"]) {
  width: 100%; height: 38px; padding: 0 10px; background: var(--void); color: var(--ink); border: 1px solid var(--hair);
  font: 400 14px var(--body); border-radius: 0; transition: border-color .3s;
}
.fld input:focus { border-color: var(--ink); outline: none; }
.drop { position: relative; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop em { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 1px dashed #3a3a38; font-style: normal; color: var(--ink); font-size: 13px; overflow: hidden; }
.drop em img { width: 26px; height: 26px; object-fit: cover; }
.drop:focus-within em { border-color: var(--ink); }
.pairbox { display: grid; gap: 8px; border-top: 1px solid var(--hair); padding-top: 12px; position: relative; }
.pair-now { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.pair-now img { width: 22px; height: 22px; border-radius: 50%; }
.pair-hits { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); max-height: 220px; overflow: auto; background: var(--void); }
.pair-hits button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--ink); font: 400 13px var(--body); text-align: left; cursor: pointer; }
.pair-hits button:hover { background: #121211; }
.pair-hits img { width: 20px; height: 20px; border-radius: 50%; }
.pair-hits small { color: var(--mute); margin-left: auto; }
.pair-hits .msg { padding: 8px 10px; font-size: 13px; color: var(--mute); }
.rig-act { display: flex; gap: 10px; flex-wrap: wrap; }
.rig-act .btn-solid { flex: 1; }

/* ---------- marquee ---------- */
.ticker-band { overflow: hidden; border-bottom: 1px solid var(--hair); padding: clamp(10px, 1.6vh, 22px) 0; }
.ticker-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.ticker-track span { font: 300 clamp(56px, 8vw, 150px)/1 var(--display); text-transform: uppercase; padding: 0 .3em; display: flex; align-items: center; gap: .3em; }
.ticker-track span::after { content: '✳'; font-size: .38em; opacity: .8; }
.ticker-track .o { color: transparent; -webkit-text-stroke: 1px var(--ink); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- board ribbon ---------- */
.board { position: relative; height: 260vh; border-bottom: 1px solid var(--hair); }
.board-pin { position: sticky; top: 61px; height: calc(100vh - 61px); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.board-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: clamp(18px, 3vh, 40px) var(--pad) 0; }
.board-head p { max-width: 30em; color: var(--mute); font-size: 14px; }
.big-h { font: 300 clamp(56px, 7.4vw, 168px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.ribbon { position: relative; perspective: 1500px; perspective-origin: 50% 40%; overflow: hidden; cursor: grab; touch-action: pan-y; outline-offset: -4px; }
.ribbon.drag { cursor: grabbing; }
.ribbon-floor {
  position: absolute; left: -50%; right: -50%; bottom: -30%; height: 75%; transform: rotateX(76deg); transform-origin: 50% 100%;
  background: linear-gradient(rgba(242, 242, 238, .09) 1px, transparent 1px) 0 0 / 70px 70px, linear-gradient(90deg, rgba(242, 242, 238, .09) 1px, transparent 1px) 0 0 / 70px 70px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}
.ribbon-ring { position: absolute; left: 50%; top: 46%; transform-style: preserve-3d; }
.slab {
  position: absolute; left: 0; top: 0; width: clamp(260px, 22vw, 420px); height: clamp(320px, 44vh, 480px); margin: calc(clamp(320px, 44vh, 480px) / -2) 0 0 calc(clamp(260px, 22vw, 420px) / -2);
  background: var(--panel); border: 1px solid #262624; padding: 20px; display: flex; flex-direction: column; gap: 12px; color: var(--ink);
  border-radius: 14px; overflow: hidden; backface-visibility: hidden; will-change: transform, opacity; text-align: left; font: inherit;
}
button.slab { cursor: pointer; }
button.slab:hover { border-color: #55554f; }
.slab h3 { font: 300 clamp(38px, 3vw, 58px)/.88 var(--display); text-transform: uppercase; }
.slab p { font-size: 13.5px; color: #c4c4bf; }
.slab .slab-foot { margin-top: auto; font-size: 12.5px; color: var(--mute); }
.slab-light { background: var(--ink); color: var(--void); border-color: var(--ink); }
.slab-light p, .slab-light .slab-foot { color: #3d3d3a; }
.slab-coin header { display: flex; gap: 12px; align-items: center; }
.slab-coin header img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.slab-coin header small { display: block; color: var(--mute); font-size: 12.5px; }
.bars { display: grid; gap: 7px; }
.bars div { display: grid; grid-template-columns: 1fr auto; font-size: 12.5px; gap: 3px 10px; }
.bars div i { grid-column: 1 / -1; height: 3px; background: #262624; position: relative; }
.bars div i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.facts dt { font-size: 12px; color: var(--mute); }
.facts dd { margin: 0; font-size: 16px; }
.slab-dots { position: absolute; inset: auto -20% -30% -20%; height: 70%; background: radial-gradient(rgba(242, 242, 238, .22) 1.1px, transparent 1.5px) 0 0 / 11px 11px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }
.slab-light .slab-dots { background-image: radial-gradient(rgba(5, 5, 5, .25) 1.1px, transparent 1.5px); }

/* ---------- earnings ---------- */
.earn { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 80px); padding: clamp(60px, 10vh, 130px) var(--pad); border-bottom: 1px solid var(--hair); }
.earn > .tick.tl { left: calc(var(--pad) - 6px); top: 24px; } .earn > .tick.tr { right: calc(var(--pad) - 6px); top: 24px; }
.earn-l { display: grid; gap: 22px; align-content: start; }
.earn-l > p { color: #c4c4bf; max-width: 32em; }
.earn-q { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.earn-q .fld { grid-column: 1 / -1; }
.earn-r { border: 1px solid var(--hair); padding: 22px; min-height: 260px; align-self: start; background: var(--panel); }
.earn-sum { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 18px; }
.earn-sum div span { display: block; font-size: 12.5px; color: var(--mute); }
.earn-sum div b { font: 300 52px/.9 var(--display); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 400; color: var(--mute); font-size: 12.5px; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--hair); }
.tbl td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl .coin-cell { display: flex; align-items: center; gap: 10px; }
.tbl .coin-cell img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
.tbl-wrap { overflow-x: auto; }

/* ---------- how ---------- */
.how { position: relative; padding: clamp(70px, 12vh, 150px) var(--pad); border-bottom: 1px solid var(--hair); overflow: hidden; }
.how-terrain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.how-in { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 80px); }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 1px solid var(--line); }
.how-steps li { counter-increment: s; padding: 22px 24px 26px 0; border-bottom: 1px solid var(--line); background: rgba(5, 5, 5, .72); }
.how-steps li:nth-child(odd) { border-right: 1px solid var(--line); }
.how-steps li:nth-child(even) { padding-left: 24px; }
.how-steps h3 { font: 300 clamp(28px, 2.3vw, 42px)/.95 var(--display); text-transform: uppercase; margin-bottom: 10px; display: flex; gap: 12px; }
.how-steps h3::before { content: counter(s); font: 400 14px var(--mono); color: var(--mute); padding-top: 4px; }
.how-steps p { font-size: 14px; color: #c4c4bf; }

/* ---------- cause ---------- */
.cause { position: relative; min-height: 90vh; padding: clamp(70px, 12vh, 150px) var(--pad); border-bottom: 1px solid var(--hair); overflow: hidden; display: grid; }
.cause-burst { position: absolute; right: -8vw; top: 50%; width: min(80vw, 1100px); aspect-ratio: 1; transform: translateY(-50%); }
.cause-in { position: relative; max-width: 760px; display: grid; gap: 22px; align-content: center; }
.cause-lead { font-size: clamp(17px, 1.35vw, 24px); line-height: 1.45; }
.cause-lead strong { font-weight: 500; }
.cause-proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cause-proof a { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; }
.cause-proof a::after { content: '↗'; font-size: 12px; }
.ledger { border-top: 1px solid var(--line); }
.ledger .row { display: grid; grid-template-columns: 110px 1fr auto auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.ledger .row .st { font-size: 12.5px; color: var(--mute); }
.ledger .row .st.sent { color: var(--ink); }
.ledger .quiet { padding: 14px 0; }

.runs { padding: clamp(70px, 12vh, 150px) var(--pad); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(24px, 4vw, 80px); border-bottom: 1px solid var(--hair); }
.runs > p { color: #c4c4bf; grid-column: 1; }
.runs > .ledger { grid-column: 2; grid-row: 1 / span 2; }

/* ---------- footer ---------- */
.foot { position: relative; padding: 12vh var(--pad) 24px; overflow: hidden; min-height: 70vh; display: flex; flex-direction: column; justify-content: flex-end; }
.foot-terrain { position: absolute; inset: 0; width: 100%; height: 100%; }
.foot-word { position: relative; font: 300 25.5vw/.78 var(--display); text-transform: uppercase; letter-spacing: -.02em; text-align: center; white-space: nowrap; margin: 0 -1vw; }
.foot-row { position: relative; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--mute); border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 2vh; }
.foot-row a { color: var(--ink); }

/* ---------- coin sheet ---------- */
.sheet { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(720px, 100vw); border: 0; border-left: 1px solid var(--line); background: var(--void); color: var(--ink); padding: 28px clamp(18px, 3vw, 40px); overflow: auto; }
.sheet::backdrop { background: rgba(5, 5, 5, .7); backdrop-filter: blur(4px); }
.sheet[open] { animation: sheetIn .6s var(--ease); }
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } }
.sheet-x { position: sticky; top: 0; float: right; background: var(--void); color: var(--ink); border: 1px solid var(--line); height: 34px; padding: 0 14px; font: 400 13px var(--body); cursor: pointer; }
.sheet h2 { font: 300 clamp(48px, 6vw, 96px)/.86 var(--display); text-transform: uppercase; margin: 8px 0 6px; }
.sheet section { border-top: 1px solid var(--hair); padding: 18px 0; display: grid; gap: 12px; }
.sheet h3 { font: 300 28px/.9 var(--display); text-transform: uppercase; }
.sheet-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
  .orb { grid-column: 1; grid-row: 2; min-height: 380px; }
  .rig { grid-column: 2; grid-row: 1 / span 2; }
  .hq-nav a:nth-child(n+4) { display: none; }
}
@media (max-width: 820px) {
  .hq-top { grid-template-columns: auto 1fr; }
  .hq-nav { display: none; }
  .hq-mark { order: -1; }
  .hq-mark img { width: 36px; height: 36px; }
  .hq-tools { gap: 6px; }
  .hq-tools { flex-wrap: wrap; justify-content: flex-end; }
  .ca-chip { order: 9; flex: 1 0 100%; height: 30px; font-size: 11px; }
  .stage { grid-template-columns: 1fr; min-height: 0; }
  .orb, .rig { grid-column: 1; grid-row: auto; }
  .orb { position: relative; top: 0; height: 92vw; max-height: 460px; min-height: 0; }
  .stage-copy { position: static; }
  .board { height: auto; }
  .board-pin { position: relative; top: 0; height: auto; display: block; }
  .board-head { display: grid; gap: 12px; padding-bottom: 18px; }
  .ribbon { perspective: none; overflow-x: auto; scroll-snap-type: x mandatory; display: flex; gap: 14px; padding: 6px var(--pad) 30px; cursor: auto; }
  .ribbon-floor { display: none; }
  .ribbon-ring { position: static; display: flex; gap: 14px; transform: none !important; }
  .slab { position: relative; margin: 0; width: 78vw; height: auto; min-height: 380px; transform: none !important; opacity: 1 !important; scroll-snap-align: center; flex: none; }
  .earn, .how-in, .runs { grid-template-columns: 1fr; }
  .runs > .ledger { grid-column: 1; grid-row: auto; }
  .how-steps { grid-template-columns: 1fr; }
  .how-steps li:nth-child(odd) { border-right: 0; }
  .how-steps li:nth-child(even) { padding-left: 0; }
  .ledger .row { grid-template-columns: 1fr auto; }
  .readout dd { font-size: 24px; }
}
@media (max-width: 480px) {
  .btn-solid, .btn-line { padding: 0 11px; font-size: 12.5px; }
  .ico { width: 32px; height: 32px; }
  #walletBtn { max-width: 112px; overflow: hidden; }
  .fields { grid-template-columns: 1fr 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .sheet[open] { animation: none; }
}