/* V3 hero and measured river. Shared surfaces and controls come from primitives-v3.css. */
.hero-v3, .fee-flow-v3 { --hf-gutter: 48px; --hf-gap: 32px; --hf-space: 96px; color: #18280E; background: #F4FAED; font-family: Manrope, sans-serif; font-size: 16px; padding: var(--hf-space) var(--gutter, var(--hf-gutter)); }
.hero-v3 { padding-block: 64px; }
.hero-v3 *, .fee-flow-v3 * { box-sizing: border-box; }
.hero-v3__wrap, .fee-flow-v3__wrap { max-width: var(--maxw, 1280px); margin-inline: auto; min-width: 0; }
.hero-v3__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hf-gap); align-items: start; }
.hero-v3 .hero-copy { grid-column: 1 / 6; grid-row: 1; min-width: 0; }
.hero-v3 h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: var(--track-h1); margin: 0 0 16px; overflow-wrap: break-word; text-wrap: balance; }
.hero-v3 .hero-lede, .hero-v3 .hero-sub { line-height: 1.65; margin: 0 0 12px; }
.hero-v3 .hero-sub { font-size: 14px; }
.hero-v3 .hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 16px; }
.hero-v3 .hero-cta > *, .hero-v3 .hero-ca > button, .hero-v3 .hero-ca > a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; }
.hero-v3 .hero-ca { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-block: 16px; border-block: 1px solid #DFE7D4; }
.hero-v3 #heroCaText { flex-basis: 100%; overflow-wrap: anywhere; font: 12px/1.6 'DM Mono', monospace; }
.hero-v3 [aria-disabled="true"] { opacity: .55; cursor: default; }
.hero-v3 .hero-stats { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-gap); padding-block: 24px; border-block: 1px solid #DFE7D4; }
.hero-v3 .stat-tile { min-width: 0; background: transparent; border: 0; padding: 0; }
.hero-v3 .stat-tile__value { height: auto; max-height: none; overflow: visible; min-height: 1.3em; margin: 16px 0 8px; font: 20px/1.3 'DM Mono', monospace; overflow-wrap: anywhere; }
.hero-v3 .stat-tile__value span { font-size: 12px; }
.hero-v3 .stat-tile__meta.mono-label { font-size: 12px; line-height: 1.7; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.hero-v3__scene { grid-column: 6 / -1; grid-row: 1; min-width: 0; max-width: 100%; margin: 0; align-self: start; }
.hero-v3__stage { position: relative; width: min(100%, calc(520px * 5 / 4)); max-width: 100%; aspect-ratio: 5 / 4; max-height: 520px; margin: 0; }
.hero-v3 .hero-vault { position: absolute; inset: 2%; width: auto; height: auto; background: transparent; isolation: isolate; }
.hero-v3 .hero-vault::before, .hero-v3 .hero-scene::before { content: none; }
.hero-v3 .hero-vault, .hero-v3 .hero-scene, .hero-v3__scene, .hero-v3__stage { background: transparent; border: 0; box-shadow: none; }
.hero-v3 .vault-fallback { position: absolute; width: 52%; height: 72%; object-fit: contain; inset: 8% 24% auto; }
.hero-v3 .has-webgl .vault-fallback { display: none; }
.hero-v3 .vault-canvas { display: block; width: 100%; height: 100%; background: transparent; }
.hero-v3 .vault-receipt-label { position: absolute; left: 0; top: 0; padding: 4px 6px; background: #F4FAED; color: #18280E; font: 11px/1.4 'DM Mono', monospace; text-align: center; overflow-wrap: anywhere; pointer-events: none; }
.hero-v3 .hero-v3__scene figcaption { margin: 8px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; font: 400 11px/1.6 'DM Mono', monospace; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.hero-v3 .mono-label, .fee-flow-v3 .mono-label { font: 400 11px/1.6 'DM Mono', monospace; letter-spacing: .09em; text-transform: uppercase; }
.hero-v3 .marquee { display: flex; width: 100%; height: auto; min-height: 44px; gap: 32px; overflow: clip; border-bottom: 1px solid #DFE7D4; }
.hero-v3 .marquee__track { display: flex; height: auto; min-height: 44px; flex: 0 0 auto; align-items: center; justify-content: space-around; min-width: 100%; gap: 32px; animation: hf-marquee 28s linear infinite; font: 11px/1.5 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .09em; }
.hero-v3 .marquee__track span::after { content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 32px; background: #B2EB76; }
.fee-flow-v3 { background: #E9F3DE; }
.fee-flow-v3__heading { max-width: 720px; }
.fee-flow-v3 h2 { font: 600 56px/1.08 'Familjen Grotesk', sans-serif; letter-spacing: -.022em; margin-block: 16px 24px; }
.fee-flow-v3 p { line-height: 1.65; }
.fee-flow-v3__status { display: inline-block; padding: 8px 0; border-block: 1px solid #DFE7D4; }
.fee-river { position: relative; margin: 24px 0; }
.fee-river__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fee-river__nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 192px 0 0; margin: 0; list-style: none; }
.fee-river__nodes li { min-width: 0; padding-top: 0; }
.fee-river__nodes li:last-child { grid-column: 2 / 4; padding-top: 16px; }
.fee-flow-v3 h3 { font: 600 32px/1.15 'Familjen Grotesk', sans-serif; margin: 0 0 16px; }
.fee-river__nodes [data-flow-value] { font: 12px/1.7 'DM Mono', monospace; overflow-wrap: anywhere; }
.fee-river__nodes [data-flow-meta] { overflow-wrap: anywhere; }
.fee-river__nodes a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 4px; }
.fee-river figcaption, #feeFlowCoverage { position: relative; margin-top: 32px; max-width: 90ch; font-size: 12px; line-height: 1.7; }
.fee-river__label { fill: #18280E; font: 12px 'DM Mono', monospace; }
.fee-river__band { stroke-dasharray: 1; stroke-dashoffset: 0; fill: none; stroke: #B2EB76; opacity: .65; }
.fee-river__band--retained { stroke: #18280E; opacity: .13; }
.fee-flow-v3[data-state="simulated"] .fee-river__band { stroke: #18280E; stroke-dasharray: .035 .025; stroke-linecap: butt; opacity: .18; }
.fee-flow-v3[data-state="simulated"] .fee-river__band--retained { opacity: .1; }
.fee-flow-v3[data-state="simulated"] .fee-river__dash, .fee-flow-v3[data-state="simulated"] .fee-river__evidence { opacity: .35; animation: none; }
.fee-flow-v3[data-state="simulated"] .fee-river__band { animation: none; }
.fee-river__guide { fill: none; stroke: #18280E; stroke-width: 1; stroke-dasharray: 3 5; opacity: .3; }
.fee-river__dash { fill: none; stroke: #18280E; stroke-width: 1; stroke-dasharray: 3 5; }
.fee-river__evidence { fill: none; stroke: #18280E; stroke-width: 2; stroke-dasharray: 3 5; }
.fee-flow-v3.is-in-view .fee-river__dash, .fee-flow-v3.is-in-view .fee-river__evidence { animation: hf-river-dashes 8s linear infinite; }
.fee-flow-v3.is-entering .fee-river__band { animation: hf-river-enter 600ms cubic-bezier(.22,1,.36,1) both; }
.hero-v3 .marquee:hover .marquee__track, .hero-v3 .marquee[data-state="paused"] .marquee__track { animation-play-state: paused; }
@keyframes hf-marquee { to { transform: translateX(calc(-100% - 32px)); } }
@keyframes hf-river-dashes { to { stroke-dashoffset: -80; } }
@keyframes hf-river-enter { from { opacity: 0; stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mechanic-a002 .do-aside { margin: 8px 0 0; max-width: 72ch; }
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-v3 h1 { font-size: 56px; }
}
@media (min-width: 1440px) {
  .hero-v3 h1 { font-size: 64px; }
}
@media (max-width: 1199px) {
  .hero-v3, .fee-flow-v3 { --hf-gutter: 32px; --hf-gap: 24px; --hf-space: 80px; }
  .hero-v3 { padding-block: 48px; }
  .hero-v3 .hero-copy { grid-column: 1 / 6; }
  .hero-v3__scene { grid-column: 6 / -1; }
  .fee-flow-v3 h2 { font-size: 44px; }
  .fee-flow-v3 h3 { font-size: 28px; }
}
@media (max-width: 768px) {
  .hero-v3, .fee-flow-v3 { --hf-gutter: 24px; --hf-gap: 24px; --hf-space: 64px; }
  .hero-v3 { padding-block: 40px; }
  .hero-v3__grid { grid-template-columns: minmax(0, 1fr); }
  .hero-v3__scene { grid-column: 1; grid-row: 1; }
  .hero-v3 .hero-copy { grid-column: 1; grid-row: 2; }
  .hero-v3 .hero-stats { grid-column: 1; grid-row: 3; }
  .hero-v3__stage { width: min(100%, calc(400px * 5 / 4)); max-height: 400px; }
  .fee-flow-v3 h2 { font-size: 34px; }
  .fee-flow-v3 h3 { font-size: 24px; }
  .fee-river__nodes { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 0; }
  .fee-river__nodes li, .fee-river__nodes li:last-child { grid-column: 1; min-height: 140px; padding: 0 0 0 104px; }
}
@media (max-width: 480px) {
  .hero-v3, .fee-flow-v3 { --hf-gutter: 16px; --hf-gap: 16px; --hf-space: 48px; }
  .hero-v3 { padding-block: 24px; }
  .hero-v3 .hero-stats { grid-template-columns: minmax(0, 1fr); }
  .hero-v3 .stat-tile + .stat-tile { border-top: 1px solid #DFE7D4; padding-top: 16px; }
  .hero-v3 .hero-sub,
  .hero-v3 .hero-stats,
  .hero-v3__scene,
  .hero-v3 .marquee,
  .hero-v3 .hero-cta .btn-ghost { display: none; }
  /* The contract address stays visible on phones. It is the one thing a
     visitor needs at launch, so it never gets hidden by a breakpoint. */
  .hero-v3 .hero-ca { display: flex; gap: 10px 12px; padding-block: 14px; }
  .hero-v3 .hero-ca > button, .hero-v3 .hero-ca > a { flex: 1 1 auto; padding-inline: 12px; }
  .hero-v3 h1 { margin-bottom: 12px; }
  .hero-v3 .hero-lede { margin-bottom: 12px; }
  .hero-v3 .hero-cta { margin-block: 8px 0; }
  .fee-flow-v3 h2 { font-size: 30px; }
}
@media (max-width: 390px) {
  .hero-v3 .hero-copy { grid-row: 1; }
  .hero-v3__scene { grid-row: 2; }
  .hero-v3 .hero-stats { grid-row: 3; }
  .hero-v3__stage { width: 100%; max-height: 360px; }
}
.hero-v3 h1, .hero-v3 .hero-copy > :not(h1, .hero-cta, .hero-ca), .hero-v3 .hero-cta, .hero-v3 .hero-stats, .hero-v3__scene { animation: hf-load 600ms cubic-bezier(.22,1,.36,1) both; }
.hero-v3 .hero-copy > :not(h1, .hero-cta, .hero-ca) { animation-delay: 60ms; }
.hero-v3 .hero-cta { animation-delay: 120ms; }
.hero-v3 .hero-stats { animation-delay: 180ms; }
.hero-v3__scene { animation-delay: 240ms; }
@keyframes hf-load { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-v3 h1, .hero-v3 .hero-copy > :not(h1, .hero-cta, .hero-ca), .hero-v3 .hero-cta, .hero-v3 .hero-stats, .hero-v3__scene { animation: none; }
  .hero-v3 .marquee__track, .fee-flow-v3 .fee-river__band, .fee-flow-v3 .fee-river__dash, .fee-flow-v3 .fee-river__evidence { animation: none; transition: none; }
  .hero-v3 .marquee { flex-wrap: wrap; overflow: visible; }
  .hero-v3 .marquee__track { min-width: 0; flex-wrap: wrap; gap: 16px; padding-block: 16px; }
  .hero-v3 .marquee__track + .marquee__track { display: none; }
}