/* The Sanctuary — shared styles for every page.
   Layout: one 1320px container, one 24px gutter, every section = heading on the left edge + content under it. */
@view-transition { navigation: auto; }

:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --ink: #f2f2ef;
  --muted: #a3a39e;
  --dim: #6b6b67;
  --surface: #141414;
  --surface-2: #1c1c1b;
  --paper: #f2f2ef;
  --paper-ink: #0a0a0a;
  --paper-muted: #55554f;
  --vyra: #a98bff;
  --vyra-bg: #110d19;
  --vyra-surface: #1a1426;

  --font: "Epilogue", "Helvetica Neue", Arial, sans-serif;
  --s-small: 15px;
  --s-body: clamp(17px, 16px + 0.2vw, 19px);
  --s-lead: clamp(20px, 17px + 0.6vw, 26px);
  --s-h2: clamp(44px, 24px + 4vw, 88px);
  --s-h3: clamp(26px, 20px + 1vw, 34px);

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --max: 1320px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --space: clamp(96px, 10vw, 168px);
}
@media (min-width: 760px) {
  :root { --gutter: max(32px, env(safe-area-inset-left, 0px)); --gutter-r: max(32px, env(safe-area-inset-right, 0px)); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--s-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--max) + 64px); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { padding-block: var(--space); }
.paper { background: var(--paper); color: var(--paper-ink); }
.paper .muted, .paper p.muted { color: var(--paper-muted); }
.muted { color: var(--muted); }

h1, .h1 { font-weight: 900; letter-spacing: -0.045em; line-height: 0.9; }
h2, .h2 { font-size: var(--s-h2); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; text-wrap: balance; }
h3, .h3 { font-size: var(--s-h3); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
.lead { font-size: var(--s-lead); line-height: 1.35; max-width: 40ch; }
.head-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
.head-row .lead { justify-self: end; }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; font-size: 16px; }
.brand img { width: 32px; height: 32px; }
.nav ul { display: flex; align-items: center; gap: 32px; font-size: 16px; }
.nav ul a { text-decoration: none; position: relative; padding-block: 6px; }
.nav ul a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.nav ul a:not(.btn):hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 0; cursor: pointer;
  font: 500 var(--s-body)/1 var(--font); text-decoration: none;
  background: var(--ink); color: var(--bg);
  transition: transform 200ms var(--ease), background-color 200ms, color 200ms;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn .arrow { transition: transform 260ms var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.ghost:hover { background: #262625; }
.paper .btn { background: var(--paper-ink); color: var(--paper); }
.btn.vyra { background: var(--vyra); color: var(--vyra-bg); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 112px) clamp(56px, 6vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
/* sized from the viewport so the longest line always fits its column */
.hero h1 { font-size: min(196px, calc((58vw - 40px) / 4.9)); }
.hero .copy { display: grid; gap: 40px; }
.hero .copy .lead { max-width: 34ch; }

.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines .line > span { display: block; }

/* the logo, drawn: three candles rising */
.candles { position: relative; height: clamp(300px, 34vw, 500px); display: flex; align-items: flex-end; justify-content: flex-end; gap: 9%; padding-right: 4%; }
.candle { position: relative; width: 17%; display: flex; flex-direction: column; align-items: center; transform-origin: bottom; }
.candle .wick { width: 10%; min-width: 4px; background: currentColor; border-radius: 99px; }
.candle .body { width: 100%; background: currentColor; border-radius: 6px; }
.candle:nth-child(1) { color: #5f5f5c; height: 40%; margin-bottom: 0; }
.candle:nth-child(2) { color: #9b9b97; height: 62%; margin-bottom: 9%; }
.candle:nth-child(3) { color: var(--ink); height: 92%; margin-bottom: 20%; }
.candle:nth-child(1) .wick:first-child { height: 14%; } .candle:nth-child(1) .body { height: 62%; } .candle:nth-child(1) .wick:last-child { height: 24%; }
.candle:nth-child(2) .wick:first-child { height: 14%; } .candle:nth-child(2) .body { height: 64%; } .candle:nth-child(2) .wick:last-child { height: 22%; }
.candle:nth-child(3) .wick:first-child { height: 10%; } .candle:nth-child(3) .body { height: 74%; } .candle:nth-child(3) .wick:last-child { height: 16%; }

/* ---------- ticker of real calls ---------- */
.ticker { overflow: hidden; background: var(--surface); padding-block: 22px; white-space: nowrap; }
.ticker .track { display: inline-flex; gap: 56px; padding-right: 56px; font-size: var(--s-lead); font-weight: 500; }
.ticker .track span b { font-weight: 900; margin-left: 10px; }
.ticker .track span i { font-style: normal; color: var(--muted); margin-left: 10px; font-size: var(--s-small); }

/* ---------- doors (big link rows) ---------- */
.doors { margin-top: 64px; }
.door {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 32px; align-items: center;
  padding: 40px 28px; margin-inline: -28px; text-decoration: none; background: var(--bg);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.door + .door { margin-top: 4px; }
.door:nth-child(even) { background: var(--surface); }
.door .big { font-size: clamp(44px, 26px + 3.4vw, 84px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; }
.door p { color: var(--muted); max-width: 44ch; transition: color 300ms; }
.door .go { font-size: 40px; line-height: 1; transition: transform 400ms var(--ease); }
.door:hover { background: var(--ink); color: var(--bg); }
.door:hover p { color: #3c3c39; }
.door:hover .go { transform: translateX(10px); }
.door.vyra-door:hover { background: var(--vyra); color: var(--vyra-bg); }
.door.vyra-door:hover p { color: #2a2140; }

/* ---------- numbers row ---------- */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.figure .n { font-size: clamp(56px, 30px + 4vw, 104px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.figure p { margin-top: 14px; color: var(--muted); font-size: var(--s-small); max-width: 22ch; }
.paper .figure p { color: var(--paper-muted); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.stack { display: grid; gap: 24px; }

/* ---------- lists ---------- */
.rows { margin-top: 64px; display: grid; gap: 4px; }
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 32px; padding: 32px 28px; margin-inline: -28px; background: var(--surface); transition: background-color 240ms; }
.row:nth-child(even) { background: var(--bg); }
.row:hover { background: var(--surface-2); }
.row p { color: var(--muted); }
.row ul { font-size: var(--s-small); line-height: 1.7; }

.lineup { margin-top: 64px; width: 100%; border-collapse: collapse; font-size: var(--s-lead); }
.lineup th { text-align: left; padding: 64px 0 16px; font-weight: 900; letter-spacing: -0.02em; }
.lineup tbody:first-of-type th { padding-top: 0; }
.lineup td { padding: 6px 0; }
.lineup td:nth-child(1) { width: 34%; }
.lineup td:nth-child(2) { color: var(--muted); }
.lineup td:nth-child(3) { text-align: right; font-size: var(--s-small); color: var(--muted); }
.lineup tr.ch { transition: transform 240ms var(--ease); }
.lineup tr.ch:hover { transform: translateX(8px); }
.lineup .alpha th, .lineup .alpha td:nth-child(3) { color: var(--vyra); }

/* steps that grow like the candles */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 72px; align-items: end; }
.step { display: grid; gap: 16px; }
.step .bar { background: var(--surface-2); transform-origin: bottom; }
.step:nth-child(1) .bar { height: 80px; }
.step:nth-child(2) .bar { height: 140px; }
.step:nth-child(3) .bar { height: 200px; }
.step:nth-child(4) .bar { height: 260px; background: var(--vyra); }
.step p { color: var(--muted); font-size: var(--s-small); }

/* ---------- CTA band ---------- */
.cta { padding-block: var(--space); }
.cta .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(56px, 28px + 6vw, 136px); }

/* ---------- table ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 var(--s-small)/1 var(--font); color: var(--ink); background: var(--surface); border: 0; border-radius: 0; min-height: 44px; padding: 0 18px; cursor: pointer; transition: background-color 180ms, color 180ms, transform 160ms; }
.chip:hover { background: var(--surface-2); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.results { width: 100%; border-collapse: collapse; margin-top: 40px; font-variant-numeric: tabular-nums; }
.results th { text-align: left; font-weight: 500; font-size: var(--s-small); color: var(--muted); padding: 0 20px 14px; }
.results td { padding: 16px 20px; }
.results tbody tr { transition: background-color 200ms; }
.results tbody tr.odd td { background: var(--surface); }
.results tbody tr:hover td { background: var(--surface-2); }
.results .coin { font-weight: 500; }
.results .ch { color: var(--muted); }
.results .x { text-align: right; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 64px; }
.plan { background: var(--surface); padding: 40px 32px; display: grid; gap: 20px; align-content: start; transition: background-color 240ms, transform 300ms var(--ease); }
.plan:hover { transform: translateY(-6px); }
.plan.pick { background: var(--ink); color: var(--bg); }
.plan.pick .muted { color: #4a4a46; }
.plan .price { font-size: clamp(48px, 30px + 2.6vw, 76px); font-weight: 900; letter-spacing: -0.045em; line-height: 0.9; }
.plan .per { font-size: var(--s-small); }
.plan .btn { justify-self: start; }
.plan.pick .btn { background: var(--bg); color: var(--ink); }
.includes { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 40px; color: var(--muted); font-size: var(--s-small); }

/* ---------- Vyra's Discord card, drawn at real size ---------- */
.embed { max-width: 520px; background: #313338; color: #dbdee1; padding: 16px; font-size: 15px; line-height: 1.45; border-radius: 8px; transition: transform 300ms var(--ease); }
.embed:hover { transform: translateY(-4px); }
.embed .who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.embed .who img { width: 40px; height: 40px; border-radius: 50%; }
.embed .who b { color: #f2f3f5; font-weight: 500; }
.embed .tag { background: #5865f2; color: #fff; font-size: 13px; padding: 0 5px; border-radius: 3px; line-height: 1.4; }
.embed .box { margin-left: 50px; background: #2b2d31; border-left: 4px solid #2ecc71; border-radius: 4px; padding: 10px 14px 12px; display: grid; gap: 4px; }
.embed .t { color: #f2f3f5; font-weight: 500; font-size: 16px; }
.embed .box b { color: #f2f3f5; font-weight: 500; }
.embed .f { margin-top: 6px; font-size: 13px; color: #b5bac1; }

/* ---------- channels (Vyra page) ---------- */
.vyra-page { background: var(--vyra-bg); }
.vyra-page .nav { background: var(--vyra-bg); }
.channels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin-top: 64px; }
.channel { background: var(--vyra-surface); padding: clamp(28px, 4vw, 56px); display: grid; gap: 24px; align-content: start; }
.channel .x { font-size: clamp(96px, 40px + 9vw, 220px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.82; }
.channel .x span { color: var(--vyra); }
.channel .muted { color: #aaa3c2; }
.vyra-page .muted { color: #aaa3c2; }
.vyra-page .chip, .vyra-page .results tbody tr.odd td, .vyra-page .plan { background: var(--vyra-surface); }
.vyra-page .chip[aria-pressed="true"] { background: var(--vyra); color: var(--vyra-bg); }
.vyra-page .results tbody tr:hover td { background: #241c35; }
.vyra-page .plan.pick { background: var(--vyra); color: var(--vyra-bg); }
.vyra-page .plan.pick .muted { color: #2a2140; }
.vyra-page .plan.pick .btn { background: var(--vyra-bg); color: var(--vyra); }
.vyra-page .step .bar { background: var(--vyra-surface); }
.vyra-page .step:nth-child(4) .bar { background: var(--vyra); }
.vyra-hero-img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- faq ---------- */
.faq { margin-top: 64px; display: grid; gap: 4px; }
details { background: var(--surface); padding: 0 28px; transition: background-color 220ms; }
.vyra-page details { background: var(--vyra-surface); }
details[open] { background: var(--surface-2); }
.vyra-page details[open] { background: #241c35; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 26px; font-size: var(--s-lead); font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary .plus { flex: none; width: 18px; height: 18px; position: relative; transition: transform 300ms var(--ease); }
summary .plus::before, summary .plus::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; }
summary .plus::after { transform: rotate(90deg); transition: transform 300ms var(--ease); }
details[open] summary .plus::after { transform: rotate(0deg); }
details p { padding-bottom: 28px; max-width: 60ch; color: var(--muted); }

/* ---------- footer ---------- */
footer { padding-block: 64px 24px; }
footer .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: var(--s-small); line-height: 1.8; }
footer .cols li:first-child { font-weight: 500; }
footer .cols li:not(:first-child) { color: var(--paper-muted); }
footer .cols a { text-decoration: none; transition: opacity 160ms; }
footer .cols a:hover { opacity: 0.6; }
footer .word { margin-top: clamp(96px, 14vw, 220px); font-size: calc((min(100vw, 1384px) - 64px) / 7.9); font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap; }
footer .legal { margin-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--paper-muted); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .lines .line > span { transform: translateY(105%); animation: up 1000ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms + 120ms); }
  .js .hero .rise { opacity: 0; transform: translateY(20px); animation: fade 800ms var(--ease) 650ms forwards; }
  .js .candle { animation: grow 1200ms var(--ease) both; }
  .js .candle:nth-child(1) { animation-delay: 250ms; }
  .js .candle:nth-child(2) { animation-delay: 420ms; }
  .js .candle:nth-child(3) { animation: grow 1200ms var(--ease) 590ms both, breathe 4s ease-in-out 2s infinite; }
  .ticker .track { animation: slide 48s linear infinite; }
  .ticker:hover .track { animation-play-state: paused; }

  .js [data-reveal] > * { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 900ms var(--ease); }
  .js [data-reveal].in > * { opacity: 1; transform: none; }
  .js [data-reveal].in > :nth-child(2) { transition-delay: 90ms; }
  .js [data-reveal].in > :nth-child(3) { transition-delay: 180ms; }
  .js [data-reveal].in > :nth-child(4) { transition-delay: 270ms; }
  .js [data-reveal].in > :nth-child(n+5) { transition-delay: 360ms; }
  .js .steps[data-reveal] .bar { transform: scaleY(0); transition: transform 1100ms var(--ease); }
  .js .steps[data-reveal].in .step:nth-child(2) .bar { transition-delay: 120ms; }
  .js .steps[data-reveal].in .step:nth-child(3) .bar { transition-delay: 240ms; }
  .js .steps[data-reveal].in .step:nth-child(4) .bar { transition-delay: 360ms; }
  .js .steps[data-reveal].in .bar { transform: none; }

  ::view-transition-old(root) { animation: 260ms ease both vt-out; }
  ::view-transition-new(root) { animation: 520ms var(--ease) both vt-in; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] > * { opacity: 0; transition: opacity 400ms; }
  .js [data-reveal].in > * { opacity: 1; }
}
@keyframes up { to { transform: none; } }
@keyframes fade { to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes breathe { 50% { transform: scaleY(1.04); } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- tablet and phone ---------- */
@media (max-width: 999px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: min(150px, calc((100vw - 64px) / 4.9)); }
  .candles { height: 200px; justify-content: flex-start; padding-right: 0; order: -1; width: 180px; }
  .head-row { grid-template-columns: 1fr; }
  .head-row .lead { justify-self: start; }
  .split { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: 1fr; }
  .channels { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .nav ul li:not(.keep) { display: none; }
  .nav .wrap { height: 64px; }
  .hero h1 { font-size: calc((100vw - 40px) / 4.9); }
  .candles { height: 150px; width: 130px; }
  .hero .copy { gap: 28px; }
  .hero .actions .btn { flex: 1 1 100%; }
  .door { grid-template-columns: 1fr auto; padding: 32px 20px; margin-inline: -20px; gap: 12px 20px; }
  .door p { grid-column: 1 / -1; grid-row: 2; }
  .door .go { grid-row: 1; grid-column: 2; font-size: 32px; }
  .row { grid-template-columns: 1fr; gap: 12px; padding: 28px 20px; margin-inline: -20px; }
  .row ul { display: flex; flex-wrap: wrap; gap: 0 6px; color: var(--ink); }
  .row ul li:not(:last-child)::after { content: ","; }
  .lineup { font-size: 20px; }
  .lineup tr.ch { display: grid; grid-template-columns: 1fr auto; padding-bottom: 14px; }
  .lineup td { padding: 0; }
  .lineup td:nth-child(1) { width: auto; grid-column: 1 / -1; }
  .lineup td:nth-child(2) { font-size: var(--s-small); }
  .lineup th { padding-top: 48px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(1) .bar { height: 48px; } .step:nth-child(2) .bar { height: 80px; } .step:nth-child(3) .bar { height: 112px; } .step:nth-child(4) .bar { height: 144px; }
  .results thead { display: none; }
  .results, .results tbody, .results tr, .results td { display: block; }
  .results tbody tr { display: grid; grid-template-columns: 1fr auto; padding: 14px 16px; margin-inline: -16px; }
  .results tbody tr.odd { background: var(--surface); }
  .vyra-page .results tbody tr.odd { background: var(--vyra-surface); }
  .results td { padding: 0; background: none !important; }
  .results .x { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .results .mc { font-size: var(--s-small); color: var(--muted); }
  .results .date, .results .ch { display: none; }
  .results tr[hidden] { display: none; }
  .embed .box { margin-left: 0; }
  details { padding: 0 20px; margin-inline: -20px; }
  .cta .btn { width: 100%; }
  footer .word { font-size: calc((100vw - 40px) / 5.6); white-space: normal; }
}

/* ================= v2: colour chapters ================= */
[id] { scroll-margin-top: 88px; }
:root {
  --green: #0e3b2a; --green-ink: #eafff3; --green-accent: #3ddc84; --green-muted: #a9d6bd; --green-step: #134a35;
  --bone: #ecedef; --bone-ink: #0a0a0a; --bone-muted: #55554f; --bone-step: #dfe0e3;
  --red: #ff5a4e;
}
.field-green { background: var(--green); color: var(--green-ink); }
.field-green .muted { color: var(--green-muted); }
.field-green .btn { background: var(--green-accent); color: #062417; }
.field-bone { background: var(--bone); color: var(--bone-ink); }
.field-bone .muted { color: var(--bone-muted); }
.field-bone .btn { background: var(--bone-ink); color: var(--bone); }
.field-vyra { background: var(--vyra-bg); color: var(--ink); }
.field-vyra .muted { color: #aaa3c2; }
.field-vyra .btn { background: var(--vyra); color: var(--vyra-bg); }
.field-green .row, .field-green .row:nth-child(even) { background: var(--green-step); }
.field-green .row:nth-child(even) { background: transparent; }
.field-green .row p { color: var(--green-muted); }

/* ---------- pinned candle story (home) ---------- */
.story { position: relative; background: var(--story-bg, var(--green)); color: var(--story-ink, var(--green-ink)); transition: background-color 700ms var(--ease), color 700ms var(--ease); }
.story[data-on="1"] { --story-bg: var(--bone); --story-ink: var(--bone-ink); }
.story[data-on="2"] { --story-bg: var(--vyra-bg); --story-ink: var(--ink); }
.story .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.story .pin { position: sticky; top: 88px; height: calc(100svh - 88px); display: grid; align-content: center; gap: 32px; }
.story .pin .label { font-size: var(--s-lead); font-weight: 500; opacity: 0.7; }
.story .pin .label b { opacity: 1; font-weight: 900; }
.story .scandles { height: clamp(260px, 42svh, 460px); display: flex; align-items: flex-end; gap: 9%; }
.story .scandle { width: 20%; display: flex; flex-direction: column; align-items: center; transform-origin: bottom; color: currentColor; opacity: 0.18; transition: opacity 600ms var(--ease), color 600ms var(--ease), transform 900ms var(--ease); }
.story .scandle .wick { width: 10%; min-width: 4px; background: currentColor; border-radius: 99px; }
.story .scandle .body { width: 100%; background: currentColor; border-radius: 6px; }
.story .scandle:nth-child(1) { height: 42%; } .story .scandle:nth-child(2) { height: 66%; margin-bottom: 10%; } .story .scandle:nth-child(3) { height: 96%; margin-bottom: 20%; }
.story .scandle .wick:first-child { height: 12%; } .story .scandle .body { height: 68%; } .story .scandle .wick:last-child { height: 20%; }
.story .scandle.lit { opacity: 1; transform: translateY(-4%); }
.story[data-on="0"] .scandle:nth-child(1) { color: var(--green-accent); }
.story[data-on="1"] .scandle:nth-child(-n+2) { opacity: 1; }
.story[data-on="1"] .scandle:nth-child(2) { color: var(--bone-ink); }
.story[data-on="1"] .scandle:nth-child(1) { color: #8a8a84; }
.story[data-on="2"] .scandle { opacity: 1; }
.story[data-on="2"] .scandle:nth-child(1) { color: #5f5a70; } .story[data-on="2"] .scandle:nth-child(2) { color: #a59fbc; } .story[data-on="2"] .scandle:nth-child(3) { color: var(--vyra); }
.chapters { display: grid; }
.chapter { min-height: 100svh; display: grid; align-content: center; gap: 28px; padding-block: 80px; }
.chapter .big { font-size: clamp(64px, 30px + 6vw, 150px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.88; }
.chapter .lead { max-width: 30ch; }
.chapter ul.points { display: grid; gap: 14px; font-size: var(--s-body); max-width: 46ch; }
.chapter ul.points li { padding-left: 28px; position: relative; }
.chapter ul.points li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 10px; height: 0.8em; background: currentColor; border-radius: 2px; }
.story .btn { background: var(--story-ink, var(--green-ink)); color: var(--story-bg, var(--green)); justify-self: start; }
.story[data-on="0"] .btn { background: var(--green-accent); color: #062417; }
.story[data-on="2"] .btn { background: var(--vyra); color: var(--vyra-bg); }
.story .muted { color: inherit; opacity: 0.72; }

/* ---------- about ---------- */
.about .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about .say { font-size: clamp(24px, 18px + 1vw, 36px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; text-wrap: pretty; }
.about .say em { font-style: normal; background: var(--bone-ink); color: var(--bone); padding: 0 0.12em; }
.about .side { display: grid; gap: 28px; }
.about .vs { display: grid; gap: 4px; }
.about .vs div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; background: var(--bone-step); font-size: var(--s-small); }
.about .vs div:first-child { background: transparent; font-weight: 900; padding-block: 0 8px; }
.about .vs .them { color: var(--bone-muted); }
.tiktok { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; background: var(--bone-ink); color: var(--bone); padding: 18px 24px; transition: transform 200ms var(--ease); justify-self: start; }
.tiktok:hover { transform: translateY(-3px); }
.tiktok b { font-size: var(--s-lead); font-weight: 900; letter-spacing: -0.02em; }
.tiktok span { font-size: var(--s-small); opacity: 0.7; display: block; }
.tiktok svg { width: 28px; height: 28px; flex: none; }

@media (max-width: 999px) {
  .story .wrap { grid-template-columns: 1fr; }
  .story .pin { position: sticky; top: 64px; height: auto; z-index: 2; background: var(--story-bg, var(--green)); transition: background-color 700ms var(--ease); padding-block: 16px; grid-template-columns: auto 1fr; align-items: end; gap: 20px; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter) var(--gutter-r); }
  .story .scandles { height: 84px; width: 84px; }
  .chapter { min-height: 80svh; }
  .about .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .chapter .big { font-size: 17vw; }
  .about .vs div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Rick ---------- */
.field-rick { background: #17200d; color: #f1f5e6; }
.field-rick .muted { color: #b7c39c; }
.field-rick .btn { background: #c6e35a; color: #17200d; }
.rick .split { margin-top: 64px; align-items: start; }
.cmds { display: grid; gap: 28px; align-content: start; }
.cmds h3 { font-size: var(--s-small); font-weight: 500; color: #b7c39c; letter-spacing: 0; margin-bottom: 10px; }
.cmds .set { display: flex; flex-wrap: wrap; gap: 6px; }
.cmd { font: 500 16px/1 var(--font); color: #f1f5e6; background: #222e14; border: 0; border-radius: 0; min-height: 44px; padding: 0 16px; cursor: pointer; transition: background-color 180ms, color 180ms, transform 160ms; }
.cmd:hover { background: #2d3b1b; }
.cmd:active { transform: scale(0.97); }
.cmd[aria-pressed="true"] { background: #c6e35a; color: #17200d; }
.rick-out { display: grid; gap: 20px; align-content: start; }
.rick-out .what { font-size: clamp(28px, 20px + 1.4vw, 44px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; min-height: 2.1em; }
.chatbox { background: #383a40; color: #dbdee1; border-radius: 8px; padding: 14px 16px; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.chatbox .hash { color: #aeb4bc; }
.chatbox .typed { color: #f2f3f5; }
.chatbox .caret { width: 2px; height: 1.1em; background: #f2f3f5; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rickcard { background: #313338; color: #dbdee1; border-radius: 8px; padding: 16px; font-size: 14px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.rickcard .who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rickcard .who i { width: 40px; height: 40px; border-radius: 50%; background: #c6e35a; display: grid; place-items: center; font-style: normal; font-weight: 900; color: #17200d; }
.rickcard .who b { color: #f2f3f5; font-weight: 500; }
.rickcard .who .tag { background: #5865f2; color: #fff; font-size: 12px; padding: 0 5px; border-radius: 3px; }
.rickcard .box { margin-left: 50px; background: #2b2d31; border-left: 4px solid #57f287; border-radius: 4px; padding: 10px 14px 12px; display: grid; gap: 2px; }
.rickcard .t { color: #00a8fc; font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.rickcard .k { color: #949ba4; }
.rickcard .v { color: #f2f3f5; }
@media (max-width: 759px) { .rickcard .box { margin-left: 0; } .rick-out .what { min-height: 0; } }

/* ================= v3 ================= */
.lines .line > span { display: inline-block; }
body.locked { overflow: hidden; }

/* ---------- nav: Vyra dropdown ---------- */
.menu .has-drop { position: relative; }
.menu .has-drop > a { display: inline-flex; align-items: center; gap: 8px; }
.menu .caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 300ms var(--ease); }
.menu .has-drop:hover .caret, .menu .has-drop:focus-within .caret { transform: translateY(1px) rotate(-135deg); }
.drop {
  position: absolute; top: calc(100% + 14px); left: 50%; width: 340px; padding: 10px;
  background: var(--vyra-bg); color: var(--ink); display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity 220ms var(--ease), transform 320ms var(--ease), visibility 0s 320ms;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu .has-drop:hover .drop, .menu .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.drop a { display: grid; gap: 2px; padding: 14px 16px; text-decoration: none; transition: background-color 180ms; }
.nav .drop a::after { display: none; }
.drop a:hover, .drop a:focus-visible { background: var(--vyra-surface); }
.drop a b { font-weight: 500; font-size: 16px; }
.drop a span { font-size: 14px; color: #aaa3c2; }
.vyra-page .nav .drop { background: #1d1630; }

.burger { display: none; font: 500 16px/1 var(--font); color: var(--ink); background: var(--surface-2); border: 0; border-radius: 0; min-height: 44px; padding: 0 16px; cursor: pointer; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--bg); padding: calc(env(safe-area-inset-top, 0px) + 88px) var(--gutter-r) 32px var(--gutter); overflow-y: auto; }
.sheet ul { display: grid; gap: 4px; }
.sheet a { display: block; padding: 14px 0; font-size: 36px; font-weight: 900; letter-spacing: -0.03em; text-decoration: none; }
.sheet .sub a { font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--muted); padding: 8px 0 8px 16px; }
.sheet .btn { margin-top: 24px; width: 100%; font-size: 18px; }
.sheet-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: var(--gutter-r); }
@media (prefers-reduced-motion: no-preference) { .sheet:not([hidden]) { animation: vt-in 380ms var(--ease) both; } }

/* ---------- intro (first visit only) ---------- */
.intro-veil { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: grid; place-items: center; pointer-events: none; }
.intro-veil .ic { display: flex; align-items: flex-end; gap: 22px; height: 160px; }
.intro-veil .ic i { display: block; width: 34px; border-radius: 5px; background: currentColor; transform-origin: bottom; }
.intro-veil .ic i:nth-child(1) { height: 38%; color: #5f5f5c; }
.intro-veil .ic i:nth-child(2) { height: 62%; color: #9b9b97; margin-bottom: 14px; }
.intro-veil .ic i:nth-child(3) { height: 92%; color: var(--ink); margin-bottom: 30px; }
.intro-veil p { position: absolute; bottom: 18%; font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
html:not(.intro) .intro-veil { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .intro .intro-veil { animation: veil-up 900ms var(--ease) 1500ms forwards; }
  .intro .intro-veil .ic i { animation: grow 700ms var(--ease) both; }
  .intro .intro-veil .ic i:nth-child(1) { animation-delay: 100ms; }
  .intro .intro-veil .ic i:nth-child(2) { animation-delay: 300ms; }
  .intro .intro-veil .ic i:nth-child(3) { animation-delay: 500ms; }
  .intro .intro-veil p { animation: fade 600ms var(--ease) 800ms both; opacity: 0; transform: translateY(12px); }
  .intro .hero .line > span { animation-delay: calc(var(--i, 0) * 120ms + 1750ms); }
  .intro .hero .rise { animation-delay: 2250ms; }
  .intro .candle:nth-child(1) { animation-delay: 1900ms; }
  .intro .candle:nth-child(2) { animation-delay: 2050ms; }
  .intro .candle:nth-child(3) { animation: grow 1200ms var(--ease) 2200ms both, breathe 4s ease-in-out 4s infinite; }
}
@media (prefers-reduced-motion: reduce) { .intro-veil { display: none; } }
@keyframes veil-up { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- timeline ---------- */
.timeline { background: var(--bg); }
.tl { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.tl h3 { margin-bottom: 28px; }
.tl ol { display: grid; gap: 4px; }
.tl li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 22px 24px; background: var(--surface); transition: background-color 240ms, transform 300ms var(--ease); }
.tl li:hover { background: var(--surface-2); transform: translateX(6px); }
.tl li time, .tl li .when { font-weight: 900; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tl li p { color: var(--muted); font-size: var(--s-small); margin-top: 4px; }
.tl li b { font-weight: 500; display: block; }
.tl .next li { background: transparent; box-shadow: inset 0 0 0 2px var(--surface-2); }
.tl .next li:hover { background: var(--surface); }
.tl .next .when { color: var(--green-accent); }
.tl .done li:last-child { background: var(--green); }
.tl .done li:last-child p { color: var(--green-muted); }

/* ---------- about ---------- */
.about2 { background: var(--bone); color: var(--bone-ink); }
.about2 .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.about2 .pinned { position: sticky; top: 120px; align-self: start; display: grid; gap: 28px; }
.about2 h2 { font-size: clamp(44px, 20px + 3.4vw, 88px); white-space: nowrap; }
.about2 h2 [data-w] { display: inline-block; }
.about2 .sig { display: flex; align-items: center; gap: 16px; }
.about2 .sig .av { width: 56px; height: 56px; background: var(--bone-ink); display: grid; place-items: center; }
.about2 .sig .av img { width: 40px; height: 40px; }
.about2 .sig b { display: block; font-weight: 900; font-size: 20px; letter-spacing: -0.01em; }
.about2 .sig span { color: var(--bone-muted); font-size: var(--s-small); }
.about2 .beats { display: grid; gap: 4px; }
.beat { background: var(--bone-step); padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; }
.beat h3 { font-size: clamp(28px, 20px + 1.6vw, 44px); }
.beat p { color: var(--bone-muted); max-width: 46ch; }
.beat.dark { background: var(--bone-ink); color: var(--bone); }
.beat.dark p { color: #b9b9b4; }
.socials { display: flex; flex-wrap: wrap; gap: 4px; }
.tiktok { flex: 1 1 240px; }
.tiktok.alt { background: var(--bone-step); color: var(--bone-ink); }

/* ---------- footer: the closing scene ---------- */
footer.end { background: var(--bg); color: var(--ink); padding-block: clamp(80px, 9vw, 140px) 24px; overflow: hidden; }
footer.end .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: var(--s-small); line-height: 1.9; }
footer.end .cols li:first-child { font-weight: 900; font-size: 16px; margin-bottom: 4px; }
footer.end .cols li:not(:first-child) { color: var(--muted); }
footer.end .cols a { text-decoration: none; transition: color 160ms; }
footer.end .cols a:hover { color: var(--ink); }
footer.end .sign { margin-top: clamp(72px, 10vw, 160px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0.28em; }
footer.end .fc { display: flex; align-items: flex-end; gap: 0.12em; height: 0.82em; font-size: inherit; }
footer.end .fc i { display: block; width: 0.16em; border-radius: 0.03em; background: currentColor; transform-origin: bottom; }
footer.end .fc i:nth-child(1) { height: 40%; color: #5f5f5c; } footer.end .fc i:nth-child(2) { height: 64%; color: #9b9b97; margin-bottom: 0.06em; } footer.end .fc i:nth-child(3) { height: 96%; color: var(--ink); margin-bottom: 0.14em; }
footer.end .sign { font-size: clamp(64px, 11.4vw, 180px); }
footer.end .word { margin: 0; font-size: 1em; font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap; }
footer.end .word .ch { display: inline-block; }
footer.end .legal { margin-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js footer.end[data-reveal] .word .ch { transform: translateY(110%); opacity: 0; transition: transform 900ms var(--ease), opacity 600ms var(--ease); transition-delay: calc(var(--i) * 35ms); }
  .js footer.end[data-reveal].in .word .ch { transform: none; opacity: 1; }
  .js footer.end[data-reveal] .fc i { transform: scaleY(0); transition: transform 900ms var(--ease); }
  .js footer.end[data-reveal].in .fc i { transform: none; }
  .js footer.end[data-reveal].in .fc i:nth-child(2) { transition-delay: 120ms; }
  .js footer.end[data-reveal].in .fc i:nth-child(3) { transition-delay: 240ms; }
  .js footer.end[data-reveal] > * { opacity: 1; transform: none; }
}

/* ---------- server map (Inside) ---------- */
.map { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 64px; align-items: start; }
.dc { background: #2b2d31; color: #949ba4; border-radius: 8px; padding: 12px 8px; font-size: 15px; max-height: 720px; overflow-y: auto; }
.dc-head { color: #f2f3f5; font-weight: 500; padding: 6px 10px 12px; display: flex; align-items: center; gap: 10px; }
.dc-head img { width: 24px; height: 24px; border-radius: 6px; }
.dc-cat { display: block; width: 100%; text-align: left; font: 500 13px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.02em; color: #949ba4; background: none; border: 0; border-radius: 4px; padding: 14px 8px 6px; cursor: pointer; transition: color 160ms, background-color 160ms; }
.dc-cat:hover { color: #dbdee1; }
.dc-cat[aria-pressed="true"] { color: #f2f3f5; background: #35373c; }
.dc ul { display: grid; gap: 1px; }
.dc li { padding: 5px 10px; border-radius: 4px; display: flex; gap: 6px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc li::before { content: "#"; color: #80848e; font-size: 18px; line-height: 1; }
.dc li.v::before { content: "◂)"; font-size: 12px; }
.dc li.lock { color: #b5bac1; }
.map-out { position: sticky; top: 112px; display: grid; gap: 20px; align-content: start; min-height: 320px; }
.map-out h3 { font-size: clamp(36px, 22px + 2.6vw, 72px); }
.map-out .lead { max-width: 36ch; }
.map-out ul { display: grid; gap: 10px; color: var(--muted); max-width: 52ch; }
.map-out ul b { color: var(--ink); font-weight: 500; }
.map-out .lockline { color: var(--vyra); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) { .map-out.swap > * { animation: vt-in 520ms var(--ease) both; } .map-out.swap > :nth-child(2) { animation-delay: 60ms; } .map-out.swap > :nth-child(3) { animation-delay: 120ms; } }

/* ---------- Earn page ---------- */
.earn-page { background: var(--green); color: var(--green-ink); }
.earn-page .nav { background: var(--green); }
.earn-page .nav .btn, .earn-page .btn { background: var(--green-accent); color: #062417; }
.earn-page .btn.ghost { background: var(--green-step); color: var(--green-ink); }
.earn-page .muted { color: var(--green-muted); }
.earn-page .hero .candle:nth-child(3) { color: var(--green-accent); }
.payout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 64px; }
.payout div { background: var(--green-step); padding: clamp(28px, 3.4vw, 44px); display: grid; gap: 10px; align-content: start; }
.payout .n { font-size: clamp(56px, 30px + 4vw, 112px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.9; }
.payout p { color: var(--green-muted); }
.earn-page .steps .bar { background: var(--green-step); }
.earn-page .steps .step:nth-child(4) .bar { background: var(--green-accent); }
.earn-page .steps p { color: var(--green-muted); }
.rules { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; margin-top: 64px; }
.rules div { background: #0a2a1d; padding: 28px 32px; }
.rules b { display: block; font-weight: 500; margin-bottom: 6px; }
.rules p { color: var(--green-muted); font-size: var(--s-small); }
.aff { background: var(--bone); color: var(--bone-ink); }
.aff .muted { color: var(--bone-muted); }
.aff .btn { background: var(--bone-ink); color: var(--bone); }

@media (max-width: 999px) {
  .tl { grid-template-columns: 1fr; }
  .about2 .wrap { grid-template-columns: 1fr; }
  .about2 .pinned { position: static; }
  .map { grid-template-columns: 1fr; }
  .dc { max-height: 420px; }
  .map-out { position: static; min-height: 0; }
  .payout { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  footer.end .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .menu li:not(.keep) { display: none; }
  .nav .menu li.keep, .nav .menu li.burger-li { display: block; }
  .burger { display: inline-flex; align-items: center; }
}
@media (min-width: 900px) { .nav .menu li.burger-li { display: none; } }
@media (max-width: 759px) {
  .tl li { grid-template-columns: 1fr; gap: 6px; padding: 20px; }
  .nav .btn { padding: 0 14px; }
  footer.end .sign { grid-template-columns: 1fr; }
  footer.end .sign { font-size: 20vw; }
  footer.end .word { white-space: normal; line-height: 0.86; }
}

/* ---------- duo: pinned title left, beats right (Inside, Earn) ---------- */
.duo .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.duo .pinned { position: sticky; top: 120px; align-self: start; display: grid; gap: 24px; }
.duo .pinned h2 { font-size: clamp(52px, 26px + 4.4vw, 108px); }
.duo .beats { display: grid; gap: 4px; }
.duo .beat { background: rgba(255, 255, 255, 0.06); }
.duo .beat p { color: inherit; opacity: 0.75; }
.duo .beat .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.duo .beat .tags span { font-size: 14px; padding: 6px 10px; background: rgba(255, 255, 255, 0.08); }
.field-bone.duo .beat { background: var(--bone-step); }
.field-bone.duo .beat .tags span { background: rgba(0, 0, 0, 0.06); }
.field-bone.duo .beat.dark { background: var(--bone-ink); color: var(--bone); }
@media (max-width: 999px) { .duo .wrap { grid-template-columns: 1fr; } .duo .pinned { position: static; } }

/* ---------- About page portrait ---------- */
.eko { display: grid; gap: 14px; }
.eko img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: transform 900ms var(--ease); }
.eko:hover img { transform: scale(1.02); }
.eko figcaption { font-size: var(--s-small); color: var(--muted); }
.about2 .sig .av { width: 64px; height: 64px; overflow: hidden; background: none; }
.about2 .sig .av img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 30%; }

/* ---------- flow: steps joined by one track that fills in order ---------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 72px; --node: 64px; --on: var(--ink); --off: var(--surface-2); --on-ink: var(--bg); }
.flow::before, .flow::after { content: ""; position: absolute; top: calc(var(--node) / 2 - 4px); left: calc(var(--node) / 2); right: calc(25% - 18px - var(--node) / 2); height: 8px; border-radius: 99px; background: var(--off); }
.flow::after { background: var(--on); transform-origin: left; }
.flow li { position: relative; z-index: 1; display: grid; gap: 14px; align-content: start; }
.flow .node { width: var(--node); height: var(--node); border-radius: 50%; display: grid; place-items: center; background: var(--off); color: var(--ink); transition: background-color 400ms var(--ease), color 400ms var(--ease), transform 500ms var(--ease); }
.flow .node svg { width: 28px; height: 28px; }
.flow li:hover .node { transform: scale(1.08); }
.flow li p { color: var(--muted); font-size: var(--s-small); max-width: 30ch; }
.flow.in .node, .no-js .flow .node { background: var(--on); color: var(--on-ink); }
.earn-page .flow { --on: var(--green-accent); --off: var(--green-step); --on-ink: #062417; }
.earn-page .flow li p { color: var(--green-muted); }
.vyra-page .flow { --on: var(--vyra); --off: var(--vyra-surface); --on-ink: var(--vyra-bg); }
.vyra-page .flow li p { color: #aaa3c2; }
@media (prefers-reduced-motion: no-preference) {
  .js .flow::after { transform: scaleX(0); transition: transform 1600ms var(--ease) 200ms; }
  .js .flow.in::after { transform: none; }
  .js .flow .node { transition-delay: 0ms; }
  .js .flow.in li:nth-child(1) .node { transition-delay: 200ms; }
  .js .flow.in li:nth-child(2) .node { transition-delay: 650ms; }
  .js .flow.in li:nth-child(3) .node { transition-delay: 1100ms; }
  .js .flow.in li:nth-child(4) .node { transition-delay: 1550ms; }
}
@media (max-width: 759px) {
  .flow { grid-template-columns: 1fr; gap: 32px; --node: 56px; }
  .flow::before, .flow::after { top: calc(var(--node) / 2); bottom: calc(var(--node) / 2); left: calc(var(--node) / 2 - 4px); right: auto; width: 8px; height: auto; }
  .flow::after { transform-origin: top; }
  .js .flow::after { transform: scaleY(0); }
  .flow li { grid-template-columns: var(--node) 1fr; column-gap: 20px; }
  .flow li h3, .flow li p { grid-column: 2; }
  .flow li .node { grid-row: 1 / 3; }
}
.fit-for { display: grid; gap: 10px; }
.fit-for li { padding-left: 28px; position: relative; }
.fit-for li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 14px; height: 8px; border-left: 3px solid var(--vyra); border-bottom: 3px solid var(--vyra); transform: rotate(-45deg); }