/* ═══════════════════════════════════════════════════════════════
   PARKPAD — the SOOK / Repay shell (white ground, pale-sky paper bands
   that draw in from the sides, centred light-glass header pill) dressed
   in the Parkpad banner: cyan park sky, the pink coaster, lime trees and
   the chrome pinwheel. Deep teal is the ink and the CTA. Coaster pink is
   reserved for "the one price" (as text #d61f63). Lime marks the buy side.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --ground: #ffffff;
  --paper: #eff9f9;
  --raised: #eff9f9;
  --ink: #06343a;
  --ink-2: #2d5459;
  --ink-3: #557277;
  --brand: #06343a;
  --brand-hover: #0b4a52;
  --pink: #ff3f7f;
  --brand-num: #d61f63;
  --brand-text: #c01858;
  --brand-soft: #ffe3ec;
  --lime: #bde04e;
  --lime-soft: #eef8cf;
  --sky: #48c6e0;
  --lav: #2fb4cf;
  --line: rgba(6, 52, 58, .12);
  --quiet: rgba(6, 52, 58, .06);
  --quiet-2: rgba(6, 52, 58, .1);

  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --hh: 60px; --ht: 16px; --gut: 20px;
  --max: 72rem;
  --sec: clamp(96px, 7vw + 70px, 192px);
  --gap-head: clamp(48px, 4vw + 30px, 88px);
  --r-xl: 20px; --r-lg: 18px; --r-md: 12px;
  --shadow: 0 1px 2px rgba(6, 52, 58, .05), 0 14px 34px -16px rgba(6, 70, 90, .22);
  --shadow-2: 0 1px 2px rgba(6, 52, 58, .06), 0 18px 40px -18px rgba(6, 70, 90, .3);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 768px) { :root { --gut: 40px; } }
@media (min-width: 1024px) { :root { --hh: 64px; --ht: 20px; --gut: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
::selection { background: var(--pink); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ep-defs { position: absolute; width: 0; height: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
section[id] { scroll-margin-top: calc(var(--ht) + var(--hh) + 12px); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic--brand { color: var(--brand-text); }

/* ═══ TYPE ═══ */
.label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 15px/1.2 var(--font); color: var(--ink-2); }
.h1 { margin: 0; }
.h1 em, .close__h em { font-style: normal; color: var(--brand-num); }
.line { display: block; overflow: clip; padding: .04em .06em .14em; margin: 0 -.06em -.12em; }
.line > span { display: inline-block; animation: rise 1.1s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.h2 { margin: 18px 0 0; font: 500 clamp(38px, 2.6vw + 22px, 64px)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.h2__mute { color: var(--ink-3); }
.h3 { margin: 0; font: 600 clamp(19px, .4vw + 16px, 22px)/1.25 var(--font); letter-spacing: -.02em; }
.sub { margin: 18px 0 0; max-width: 36rem; font: 400 clamp(16px, .25vw + 15px, 18px)/1.55 var(--font); color: var(--ink-3); text-wrap: pretty; }
.sub b { font-weight: 500; color: var(--ink); }
.head { max-width: 44rem; }
.head--center { margin-inline: auto; text-align: center; }
.head--center .sub { margin-inline: auto; }
.lede { margin: clamp(18px, 2.4vh, 28px) 0 0; max-width: 26rem; font: 500 clamp(18px, .4vw + 16px, 21px)/1.45 var(--font); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.lede em { font-style: normal; font-weight: 600; }

/* ═══ BUTTONS ═══ */
.btn {
  --bg: var(--brand); --fg: #fff; --bgh: var(--brand-hover);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--bg); color: var(--fg); font: 600 15px/1 var(--font); letter-spacing: -.005em; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background-color .25s var(--ease-std), transform .25s var(--ease-std);
}
.btn .ic { transition: transform .3s var(--ease); }
@media (hover: hover) { .btn:hover { background: var(--bgh); transform: scale(.98); } .btn:hover .ic { transform: translateX(3px); } }
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn--ink { --bg: var(--ink); --fg: #fff; --bgh: #2a2a2e; }
.btn--white { --bg: #fff; --fg: var(--ink); --bgh: #eafcfd; }
.btn--glass { --bg: rgba(255, 255, 255, .18); --fg: #fff; --bgh: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.btn--block { width: 100%; }

/* ═══ HEADER ═══ */
.hd { position: fixed; z-index: 60; top: 0; left: 0; right: 0; pointer-events: none; padding: calc(env(safe-area-inset-top, 0px) + var(--ht)) var(--gut) 0; animation: drop .9s var(--ease) .1s backwards; }
.hd__scrim { position: fixed; inset: 0; background: rgba(11, 11, 12, .28); opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .35s var(--ease); }
.hd.is-open .hd__scrim { opacity: 1; pointer-events: auto; }
.hd__float { position: relative; pointer-events: auto; width: 100%; max-width: var(--max); margin: 0 auto; border-radius: 16px;
  background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(11, 11, 12, .06), 0 10px 30px -14px rgba(80, 36, 20, .22);
  transition: background-color .3s; }
.hd.is-compact .hd__float { background: rgba(255, 255, 255, .74); }
.hd__bar { height: var(--hh); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 18px; }
.hd .btn { border-radius: 10px; }
.hd:not(.is-compact) .hd__float { background: rgba(255, 255, 255, .5); }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.logo__mark { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(6, 70, 90, .25)); }
.logo__word { font: 600 22px/1 var(--display); letter-spacing: -.035em; }
.nav { display: none; align-items: center; gap: 2px; }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--ink-2); font: 500 15px/1 var(--font); transition: color .2s, background-color .25s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--pink); transform: scale(0); transition: transform .35s var(--ease); }
@media (hover: hover) { .nav__link:hover { color: var(--ink); background: var(--quiet); } }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scale(1); }
.hd__end { display: flex; align-items: center; gap: 6px; }
.x { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; }
.x svg { width: 17px; height: 17px; fill: currentColor; }
@media (hover: hover) { .x:hover { opacity: .7; } }
.menu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: var(--quiet); cursor: pointer; }
.menu i { grid-area: 1 / 1; width: 18px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease); }
.menu i:first-child { transform: translateY(-4px); }
.menu i:last-child { transform: translateY(4px); }
.menu[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menu[aria-expanded="true"] i:last-child { transform: rotate(-45deg); }
.sheet { position: relative; pointer-events: auto; max-width: var(--max); margin: 10px auto 0; border-radius: 16px; display: grid; grid-template-rows: 0fr; opacity: 0;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 18px 40px -16px rgba(80, 36, 20, .3);
  transition: grid-template-rows .5s var(--ease), opacity .3s var(--ease); }
.sheet.is-open { grid-template-rows: 1fr; opacity: 1; }
.sheet[hidden] { display: none; }
.sheet__in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 12px; }
.sheet.is-open .sheet__in { padding-block: 10px 12px; }
.sheet__link { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 12px; border-radius: 10px; font: 700 24px/1.1 var(--display); letter-spacing: -.025em; }
.sheet__link span { font: 400 18px var(--font); color: var(--ink-3); }
.sheet__cta { margin-top: 10px; }
@media (min-width: 1024px) {
  .hd__float { width: fit-content; }
  .hd__bar { gap: 24px; padding-left: 22px; }
  .nav { display: flex; }
  .menu, .sheet { display: none; }
}
@media (max-width: 479px) { .hd__bar { gap: 8px; padding-left: 14px; } .hd__cta { padding: 0 14px; } .x { display: none; } }

/* ═══ HERO: the banner photo, full bleed; the line centred on it like the banner ═══ */
.hero { position: relative; min-height: max(100svh, 680px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--ht) + var(--hh) + 3svh) var(--gut) 120px; overflow: hidden; isolation: isolate; color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: #48c6e0; pointer-events: none; overflow: hidden; }
.hero__photo { position: absolute; inset: -3%; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) scale(var(--sz, 1.04)); transition: transform 1.2s var(--ease); will-change: transform; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; animation: drift 40s ease-in-out infinite alternate; }
.hero__shade { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 48%, rgba(10, 80, 110, .26), rgba(10, 80, 110, 0) 70%),
  linear-gradient(180deg, rgba(10, 70, 100, .12), rgba(10, 70, 100, 0) 30%, rgba(10, 70, 100, 0) 70%, rgba(10, 70, 100, .16)); }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 60rem; }
.hero .h1 { font: 500 clamp(52px, 6.6vw, 118px)/1 var(--display); letter-spacing: -.035em; color: #fff; text-shadow: 0 2px 30px rgba(8, 70, 100, .28); }
.hero .lede { max-width: 30rem; margin-inline: auto; color: #fff; text-shadow: 0 1px 16px rgba(8, 70, 100, .35); }
.tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 8px 14px 8px 12px; border-radius: 999px; font: 500 14px/1 var(--font); color: #fff;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(189, 224, 78, .7); animation: pulse 2s var(--ease) infinite; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(24px, 3.6svh, 40px); }
.in { animation: fadeUp .9s var(--ease) backwards; animation-delay: var(--d, 0ms); }

/* the lime trees, cut from the banner, standing on the same edges they touch there */
.trees { position: absolute; inset: 0; }
.tree { position: absolute; display: block; height: auto; pointer-events: none; user-select: none;
  transform: translate3d(calc(var(--mx, 0) * var(--z) * -18px), calc(var(--my, 0) * var(--z) * -12px + var(--ty, 0px)), 0); transition: transform 1.2s var(--ease);
  filter: drop-shadow(0 20px 30px rgba(10, 80, 110, .18)); }
.tree--tl { top: 0; left: 6vw; width: 23vw; animation: sway 9s ease-in-out infinite alternate; transform-origin: top center; }
.tree--tr { top: 0; right: 7vw; width: 17vw; animation: sway 11s ease-in-out infinite alternate-reverse; transform-origin: top center; }
.tree--bl { bottom: 0; left: 0; width: 27vw; }
.tree--br { bottom: 0; right: 0; width: 20vw; }
.tree--s1 { top: 16%; left: 58%; width: 6vw; animation: float 7s ease-in-out infinite alternate; }
.tree--s2 { top: 44%; left: 13%; width: 5vw; animation: float 8.5s ease-in-out infinite alternate-reverse; }
@keyframes sway { from { rotate: -1.2deg; } to { rotate: 1.4deg; } }
@keyframes float { from { translate: 0 -8px; rotate: -4deg; } to { translate: 0 10px; rotate: 5deg; } }
@media (max-width: 760px) {
  .tree--tl { width: 42vw; left: -4vw; } .tree--tr { width: 30vw; right: -2vw; }
  .tree--bl { width: 44vw; } .tree--br { width: 36vw; }
  .tree--s1 { width: 12vw; top: 12%; } .tree--s2 { width: 11vw; top: 70%; left: 60%; }
}

/* the live ticket: one glass pill with the spinning pinwheel, the epoch clock and the indicative price */
.ticket { position: absolute; z-index: 2; left: 50%; bottom: 64px; translate: -50% 0; transition: box-shadow .3s, background-color .3s; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 18px; text-align: left; color: var(--ink);
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 40px -18px rgba(6, 70, 90, .4); }
.ticket:hover { background: rgba(255, 255, 255, .8); }
.ticket__mark { width: 44px; height: 44px; padding: 5px; border-radius: 12px; background: linear-gradient(160deg, #7fe0ec, #4fcbe2); object-fit: contain; }
.ticket__b { display: flex; flex-direction: column; gap: 4px; padding-right: 6px; }
.ticket__k { font-size: 12.5px; color: var(--ink-3); }
.ticket__k b { color: var(--ink); font-weight: 500; }
.ticket__v { font-size: 15px; font-weight: 500; }
.ticket__v b { color: var(--brand-num); font-weight: 600; }
.ticket__ring { width: 34px; height: 34px; }
.ticket__ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ticket__ring circle { fill: none; stroke: var(--quiet-2); stroke-width: 3.5; }
.ticket__ring .ticket__prog { stroke: var(--pink); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; }
.hero__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 20px; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font: 400 13.5px/1.4 var(--font); color: rgba(255, 255, 255, .86); text-shadow: 0 1px 8px rgba(8, 70, 100, .3); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; }

/* ═══ STORY ═══ */
.story__track { position: relative; height: 180vh; }
.story__stage { position: sticky; top: 0; height: 100svh; display: flex; padding: calc(var(--ht) + var(--hh) + 8px) clamp(16px, 2vw, 32px) clamp(16px, 2vw, 32px); overflow: hidden; }
.story__band { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vh, 56px); min-height: 0; padding: clamp(28px, 5vh, 64px) clamp(20px, 5vw, 96px);
  border-radius: clamp(24px, 2.2vw, 36px); background: linear-gradient(135deg, #dff6fa 0%, #e9f8f4 45%, #fde6ee 100%); }
.statement { margin: 0; max-width: 15em; text-align: center; font: 500 clamp(34px, 3.4vw + 16px, 70px)/1.04 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.statement em { font-style: normal; }
.fw { color: color-mix(in srgb, var(--ink) calc(var(--f, 1) * 100%), rgba(6, 52, 58, .22)); }
.statement em .fw { color: color-mix(in srgb, var(--brand-num) calc(var(--f, 1) * 100%), rgba(6, 52, 58, .22)); }
.story__side { display: flex; flex-direction: column; align-items: stretch; width: min(100%, 26rem); gap: 12px; }
.epochcard { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .05), var(--shadow-2); }
.epochcard__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-3); }
.epochcard__state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--quiet); font: 500 13px/1 var(--font); color: var(--ink-2); transition: background .4s, color .4s; }
.epochcard.is-cleared .epochcard__state { background: var(--pink); color: #fff; }
.epochcard__px { margin: 12px 0 6px; font-size: clamp(34px, 3vw, 46px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: rgba(11, 11, 12, .24); transition: color .5s; }
.epochcard.is-cleared .epochcard__px { color: var(--brand-num); }
.epochcard__sub { font-size: 14px; color: var(--ink-3); }
.toasts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 16px 0 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .05), var(--shadow);
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.toast.is-in { opacity: 1; transform: none; }
.side { flex: none; display: inline-grid; place-items: center; min-width: 48px; height: 26px; padding: 0 8px; border-radius: 7px; font: 600 13px/1 var(--mono); }
.side--buy { background: var(--lime); color: var(--ink); }
.side--sell { background: var(--ink); color: #fff; }
.toast__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.toast__b b { font-weight: 600; font-size: 15px; }
.toast__b small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast__r { font-size: 14px; color: var(--ink-3); transition: color .4s; }
.toast.is-fill .toast__r { color: var(--brand-text); font-weight: 600; }
@media (min-width: 1024px) {
  .story__band { flex-direction: row; justify-content: space-between; gap: clamp(32px, 4vw, 96px); }
  .statement { flex: 1 1 0; max-width: 11.5em; text-align: left; }
  .story__side { flex: 0 0 auto; width: clamp(360px, 28vw, 440px); }
}

/* ═══ PAPER BANDS ═══ */
.paper { --ground: var(--paper); --raised: #fff; --band-in: clamp(10px, 4vw, 72px);
  position: relative; background: var(--paper); clip-path: inset(0 calc((1 - var(--e, 1)) * var(--band-in)) round 24px); }
.sec { padding-block: var(--sec); }
.sec--top0 { padding-top: clamp(40px, 5vw, 80px); }

/* ═══ HOW ═══ */
.how { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(32px, 4vw, 64px); margin-top: var(--gap-head); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: sticky; top: calc(var(--ht) + var(--hh) + 32px); }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 18px 18px 14px; border-radius: 16px; transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.step__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--quiet); font-size: 13px; color: var(--ink-3); transition: background .4s, color .4s; }
.step p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.step .h3 { font-size: 18px; color: var(--ink-3); transition: color .4s; }
.step.is-on { background: #fff; box-shadow: var(--shadow); }
.step.is-on .h3 { color: var(--ink); }
.step.is-on .step__n { background: var(--ink); color: #fff; }

.term { position: relative; border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .05), var(--shadow-2); overflow: hidden; }
.term__head { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.term__pair { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.term__pair b { font-weight: 600; }
.muted { color: var(--ink-3); }
.coin { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime-soft); box-shadow: inset 0 0 0 1.5px var(--ink); font: 600 10px var(--mono); }
.term__ep { font-size: 13px; color: var(--ink-3); }
.term__ep b { color: var(--ink); font-weight: 500; }
.term__clock { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px; background: var(--quiet); font-size: 13px; }
.term__clock i { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); animation: pulse 2s var(--ease) infinite; }
.term__bar { height: 3px; background: var(--quiet); }
.term__bar i { display: block; height: 100%; width: 0; background: var(--pink); border-radius: 0 3px 3px 0; }
.term__body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; }
.term__chart { padding: 16px 10px 12px 16px; border-right: 1px solid var(--line); min-width: 0; }
.term__chart svg { display: block; width: 100%; height: 300px; overflow: visible; }
.term__legend { display: flex; gap: 16px; padding: 10px 0 0 4px; font-size: 12.5px; color: var(--ink-3); }
.term__legend span { display: inline-flex; align-items: center; gap: 6px; }
.term__sim { margin-left: auto; color: var(--ink-3); }
.term__sim a { color: var(--brand-num); font-weight: 500; }
.term__legend { flex-wrap: wrap; }
.lg { width: 14px; height: 0; border-top: 2px solid var(--ink); }
.lg--sell { border-top: 2px dashed var(--lav); }
.lg--px { border-top: 2px dotted var(--brand-num); }
.term__side { display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 0; }
.term__k { font-size: 13px; color: var(--ink-3); }
.term__px { margin: 8px 0 14px; font-size: 28px; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--brand-num); }
.term__rows { display: grid; font-size: 12.5px; border-top: 1px solid var(--line); }
.term__rows div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.term__rows span { color: var(--ink-3); }
.term__rows b { font-weight: 500; }
.feed { list-style: none; margin: 0; padding: 8px 0 0; font-size: 12px; flex: 1; overflow: hidden; max-height: 150px; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.feed li { display: flex; gap: 8px; align-items: center; padding: 4px 0; animation: feedIn .5s var(--ease); }
.feed .side { min-width: 38px; height: 20px; font-size: 10.5px; border-radius: 5px; }
.feed .p { margin-left: auto; color: var(--ink-3); }
.term__foot { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--line); }
.term__foot .term__k { white-space: nowrap; }
.prints { display: flex; gap: 6px; overflow: hidden; flex: 1; justify-content: flex-end; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.prints span { flex: none; padding: 5px 9px; border-radius: 8px; background: var(--quiet); font-size: 12px; color: var(--ink-2); animation: feedIn .6s var(--ease); }
.prints span:last-child { background: var(--pink); color: #fff; font-weight: 500; }
.flash { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 280px; padding: 22px 28px; border-radius: 18px;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .06), 0 30px 60px -20px rgba(80, 36, 20, .35);
  opacity: 0; pointer-events: none; transform: translate(-50%, -44%) scale(.96); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.flash.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.flash__k { font-size: 13px; color: var(--ink-3); }
.flash__px { font-size: 46px; font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--brand-num); }
.flash__m { font-size: 14px; color: var(--ink-2); }

/* chart primitives */
.c-grid line { stroke: var(--line); }
.c-grid text { font: 11px var(--mono); fill: var(--ink-3); }
.c-buy { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.c-buy-area { fill: rgba(189, 224, 78, .18); }
.c-sell { fill: none; stroke: var(--lav); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.c-sell-area { fill: rgba(72, 198, 224, .09); }
.c-clear { stroke: var(--brand-num); stroke-width: 1.5; stroke-dasharray: 2 4; }
.c-pt { fill: var(--pink); stroke: #fff; stroke-width: 2.5; }
.c-halo { fill: var(--pink); opacity: .2; }
.c-tag rect { fill: var(--ink); }
.c-tag text { font: 500 12px var(--mono); fill: #fff; }

/* ═══ MARQUEE ═══ */
.marquee { padding-block: clamp(56px, 6vw, 104px) clamp(40px, 5vw, 80px); overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.mq { display: inline-flex; align-items: center; gap: .4em; padding-right: .9em; font: 500 clamp(44px, 5.4vw, 88px)/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.mq small { font: 500 .28em/1 var(--mono); letter-spacing: 0; color: var(--ink-3); align-self: center; }
.mq b { font-weight: 500; }
.mq em { font-style: normal; color: var(--brand-num); }
.mq .dotsep { width: .22em; height: .22em; border-radius: 50%; background: var(--lime); margin-left: .5em; }

/* ═══ VS ═══ */
.vs { list-style: none; max-width: 60rem; margin: var(--gap-head) auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vs__card { padding: 22px 22px 20px; border-radius: var(--r-xl); background: var(--raised); }
.vs__card--ep { background: linear-gradient(160deg, #e3f7fb, #eef9ef 60%, #fde9f0); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .04); }
.vs__top { display: flex; justify-content: space-between; align-items: center; }
.vs__name { font: 600 24px/1 var(--display); letter-spacing: -.03em; }
.vs__tag { padding: 6px 10px; border-radius: 999px; background: var(--quiet); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.vs__tag--ep { background: var(--pink); color: #fff; }
.qlist { list-style: none; margin: 18px 0 0; padding: 0; }
.qlist li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; height: 48px; border-top: 1px solid var(--line); font-size: 15px; }
.q__pos { font-size: 13px; color: var(--ink-3); }
.q__who { display: flex; align-items: center; gap: 8px; }
.q__px { font-size: 15px; font-weight: 500; }
.bot { font-style: normal; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 11px/1 var(--mono); }
.vs__card--ep .q__px { color: var(--brand-num); }
.vs__foot { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }

/* ═══ CALCULATOR ═══ */
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.calc__card { padding: 22px; border-radius: var(--r-xl); background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .05), var(--shadow-2); }
.calc__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.calc__size { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: var(--ink-3); }
.calc__size b { font-size: 20px; font-weight: 500; color: var(--ink); }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; border-radius: 12px; background: var(--quiet); }
.seg button { min-width: 84px; height: 40px; border: 0; border-radius: 9px; background: transparent; font: 600 15px/1 var(--font); color: var(--ink-3); cursor: pointer; transition: background .3s var(--ease), color .3s, box-shadow .3s; }
.seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(11, 11, 12, .08), 0 4px 10px -4px rgba(11, 11, 12, .14); }
.seg--sm button { min-width: 72px; height: 36px; font-family: var(--mono); font-size: 14px; font-weight: 500; }
.range { width: 100%; margin: 22px 0 6px; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--ink) var(--fill, 20%), var(--quiet-2) var(--fill, 20%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 4px 10px -2px rgba(11, 11, 12, .3); cursor: grab; }
.range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--ink), 0 4px 10px -2px rgba(11, 11, 12, .3); cursor: grab; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--pink), 0 0 0 1.5px var(--ink); }
.calc__out { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 20px; }
.calc__out > div { display: flex; flex-direction: column; gap: 8px; }
.calc__k { font-size: 14px; color: var(--ink-3); }
.calc__big { font-size: clamp(44px, 4.6vw, 68px); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.calc__delta { padding: 8px 12px; border-radius: 10px; background: var(--quiet); font-size: 15px; font-weight: 500; }
.calc__delta.up { background: var(--brand-soft); color: var(--brand-text); }
.calc__delta.dn { background: #dcf3f7; color: #0f6f82; }
.calc__chart { display: block; width: 100%; height: 220px; margin-top: 18px; overflow: visible; }
.calc__meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.calc__meta b { color: var(--ink); font-weight: 500; }

/* ═══ MARKETS ═══ */
.mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: var(--gap-head); }
.card { display: flex; flex-direction: column; padding: 12px 12px 26px; border-radius: var(--r-xl); background: var(--raised); }
.card .h3, .card__line { padding-inline: 14px; }
.card .h3 { margin-top: 22px; }
.card__line { margin: 10px 0 0; font: 400 16px/1.5 var(--font); color: var(--ink-3); text-wrap: pretty; }
.note { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); opacity: .85; }
.card__art { position: relative; min-height: 300px; border-radius: 14px; background: linear-gradient(160deg, #d9f4f9, #e9f8f1 55%, #fde9f0); display: grid; place-items: center; padding: 22px; overflow: hidden; }
.opener { width: 100%; max-width: 340px; display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2); }
.opener__field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--quiet); font-size: 13px; color: var(--ink-3); }
.opener__field input { min-width: 0; width: 60%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: #fff; font: 500 15px var(--mono); color: var(--ink); text-align: right; outline: none; box-shadow: inset 0 0 0 1px var(--line); }
.opener__field input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.opener__field .seg { background: rgba(255, 255, 255, .6); }
.opener__done { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .4s; }
.opener__done > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.opener__done.on { grid-template-rows: 1fr; opacity: 1; }
.opener__done.on > div { padding: 12px 12px 4px; }
.opener__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.opener__ok i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: pulse 2s var(--ease) infinite; }
.opener__done b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.opener__done small { font-size: 12.5px; color: var(--ink-3); }
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 280px; }
.chain li { position: relative; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-weight: 600; font-size: 16px; }
.chain li i { font: 500 12px var(--mono); font-style: normal; color: var(--ink-3); }
.chain li + li::before { content: ""; position: absolute; left: 26px; top: -10px; width: 1.5px; height: 10px; background: var(--ink); opacity: .3; }
.chain__px { background: var(--pink) !important; color: #fff; }
.chain__px i { color: rgba(255,255,255,.8) !important; }
.earn { display: flex; align-items: flex-start; font: 500 clamp(110px, 10vw, 150px)/.8 var(--display); letter-spacing: -.06em; }
.earn__pct { font-size: .42em; margin-top: .06em; color: var(--brand-num); letter-spacing: 0; }
.card__art--earn { align-content: center; gap: 18px; }
.earn__bar { display: flex; gap: 4px; width: 100%; max-width: 280px; height: 12px; }
.earn__bar i { flex: 1; border-radius: 999px; background: rgba(11, 11, 12, .1); }
.earn__bar i:first-child { background: var(--pink); }
.earn__lg { display: flex; justify-content: space-between; width: 100%; max-width: 280px; font-size: 13px; color: var(--ink-3); }

/* ═══ COMPARE ═══ */
.cmp-wrap { max-width: 60rem; margin: clamp(40px, 4vw, 64px) auto 0; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp th, .cmp td { padding: 18px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 16px; }
.cmp th { font: 600 15px var(--font); color: var(--ink-3); border-bottom: 0; padding-bottom: 14px; }
.cmp th:first-child, .cmp td:first-child { width: 38%; color: var(--ink-2); }
.cmp td:nth-child(2) { color: var(--ink-3); }
.cmp .cmp__us { background: #fff; }
.cmp th.cmp__us { border-radius: 16px 16px 0 0; color: var(--ink); padding-top: 18px; }
.cmp th.cmp__us .logo__word { font-size: 22px; }
.cmp tr:last-child .cmp__us { border-radius: 0 0 16px 16px; border-bottom: 0; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp td.cmp__us { color: var(--ink); font-weight: 500; }
.cmp td.cmp__us b { font-weight: 600; color: var(--brand-num); }
.chk { width: 24px; height: 24px; fill: none; stroke: var(--brand-num); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chk path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .7s var(--ease) .3s; }
.cmp.in .chk path { stroke-dashoffset: 0; }
.dash { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--ink-3); opacity: .5; vertical-align: middle; }

/* ═══ LIMITS ═══ */
.limits { list-style: none; margin: var(--gap-head) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.limit { padding: 22px 22px 24px; border-radius: var(--r-lg); background: var(--paper); }
.limit__k { font-size: 14px; color: var(--ink-3); }
.limit b { display: block; margin-top: 10px; font: 500 40px/1 var(--display); letter-spacing: -.035em; }
.limit p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.limit--warn { background: var(--brand-soft); }
.limit--warn b { color: var(--brand-num); }

/* ═══ FAQ ═══ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--ht) + var(--hh) + 32px); }
.qas { display: grid; gap: 8px; }
.qa { border-radius: var(--r-lg); background: #fff; }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 22px; cursor: pointer; list-style: none; font: 600 18px/1.3 var(--font); letter-spacing: -.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--quiet); transition: background .3s, rotate .4s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; border-radius: 2px; background: var(--ink); }
.qa summary i::after { rotate: 90deg; transition: rotate .4s var(--ease); }
.qa[open] summary i { background: var(--ink); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa[open] summary i::after { rotate: 0deg; }
.qa__a { padding: 0 22px 22px; }
.qa__a p { margin: 0; max-width: 38rem; font-size: 16px; line-height: 1.6; color: var(--ink-3); }

/* ═══ CLOSER ═══ */
.close { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; padding-top: 120px; }
.close__bg { position: absolute; inset: 0; z-index: -1; background: #48c6e0; }
.close__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scaleX(-1); display: block; }
.close__bg i { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 24%), radial-gradient(55% 45% at 50% 42%, rgba(10, 80, 110, .24), rgba(10, 80, 110, 0) 70%); }
.close__copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
.close__h { margin: 0; font: 500 clamp(42px, 5.6vw, 96px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; color: #fff; text-shadow: 0 2px 30px rgba(8, 70, 100, .3); }
.close .lede { color: #fff; text-shadow: 0 1px 14px rgba(8, 70, 100, .35); }
.close .lede { max-width: 32rem; text-align: center; }
.close .hero__cta { justify-content: center; }
.giant { display: flex; justify-content: space-between; margin-top: auto; padding: 60px var(--gut) 0; font: 600 clamp(90px, 20vw, 340px)/.74 var(--display); letter-spacing: -.06em; color: #fff; overflow: hidden;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.giant span { display: inline-block; transform: translateY(105%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i) * 60ms); opacity: .92; mix-blend-mode: soft-light; }
.giant.in span { transform: none; }
.giant span { mix-blend-mode: normal; color: rgba(255, 255, 255, .86); }

/* ═══ FOOTER ═══ */
.ft { padding: 56px 0 max(32px, env(safe-area-inset-bottom)); background: #fff; }
.ft__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ft__chain { margin: 0; font-size: 13px; color: var(--ink-3); }
.ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)); gap: 24px; margin-top: 40px; }
.ft__cols h4 { margin: 0 0 12px; font: 500 14px var(--font); color: var(--ink-3); }
.ft__cols a { display: block; padding: 5px 0; font-size: 15px; color: var(--ink-2); }
.ft__cols a:hover { color: var(--ink); }
.ft__legal { display: flex; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.ft__legal span:last-child { max-width: 60ch; }

/* ═══ REVEAL ═══ */
.rv { opacity: 0; translate: 0 36px; transition: opacity .9s var(--ease), translate 1s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.rv.in { opacity: 1; translate: 0 0; }

@keyframes rise { from { transform: translateY(105%); } }
@keyframes fadeUp { from { opacity: 0; translate: 0 14px; } }
@keyframes fadeIn { from { opacity: 0; scale: .96; } }
@keyframes drop { from { opacity: 0; translate: 0 -16px; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(189, 224, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(189, 224, 78, 0); } }
@keyframes drift { from { transform: scale(1) translateX(0); } to { transform: scale(1.06) translateX(-1.5%); } }
@keyframes bob { from { translate: 0 -7px; rotate: calc(var(--r0) - 1.2deg); } to { translate: 0 7px; rotate: calc(var(--r0) + 1.2deg); } }
@keyframes stream { to { stroke-dashoffset: -11; } }
@keyframes feedIn { from { opacity: 0; transform: translateY(-6px); } }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .how { grid-template-columns: 1fr; }
  .steps { position: static; grid-template-columns: repeat(2, 1fr); }
  .mk { grid-template-columns: 1fr 1fr; }
  .mk .card--open { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .calc, .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .vs { grid-template-columns: 1fr; }
  .limits { grid-template-columns: 1fr 1fr; }
  .cmp th, .cmp td { padding: 14px 12px; font-size: 14.5px; }
  .cmp th:first-child, .cmp td:first-child { width: 40%; }
}
@media (max-width: 640px) {
  .term__body { grid-template-columns: 1fr; }
  .term__chart { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 12px; }
  .term__chart svg { height: 220px; }
  .feed { display: none; }
  .term__side { padding-bottom: 12px; }
  .term__ep { display: none; }
  .term__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .prints { width: 100%; justify-content: flex-start; flex-direction: row-reverse; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
  .steps { grid-template-columns: 1fr; }
  .mk { grid-template-columns: 1fr; }
  .limits { grid-template-columns: 1fr; }
  .calc__row { flex-direction: column; align-items: stretch; }
  .calc__size { flex-direction: row; justify-content: space-between; align-items: center; }
  .calc__chart { height: 180px; }
  .story__side .epochcard { display: none; }
  .toast:nth-child(n+4) { display: none; }
  .hero__foot { display: none; }
  .ticket { bottom: 28px; max-width: calc(100% - 32px); }
  .ticket__v { white-space: nowrap; font-size: 14px; }
  .ticket__k { font-size: 11.5px; }
  .ticket__ring { display: none; }
  .hero { padding-bottom: 140px; }
  .ft__cols { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; translate: none; }
}