/* Hero: eyebrow + Merriweather H1 + subline + acid-green painting with glyph rain */

.s-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 30px 80px;
}

.s-hero .hero-inner {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.s-hero .hero-title {
  width: 100%;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Eyebrow: quill icon + bold Robinhood, regular Chain (hidden prefix kept for copy parity) */
.s-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  line-height: 1;
  color: var(--ink);
}
.s-hero .hero-eyebrow .pre { display: none; }
.s-hero .hero-eyebrow .fe {
  height: 15px;
  width: auto;
  margin-right: 7px;
  display: inline-block;
}
html.dark .s-hero .hero-eyebrow .fe { filter: invert(1); }
.s-hero .hero-eyebrow .rh {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.s-hero .hero-eyebrow .ch {
  font-weight: 400;
  font-size: 16px;
}

.s-hero h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 56px;
  line-height: 64px;
  text-align: center;
  color: var(--ink);
  font-feature-settings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;
}

.s-hero .hero-sub {
  max-width: 696px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  color: var(--ink);
}

/* Production keeps an empty button row in the title stack; it contributes one
   20px gap slot below the subline (the buttons themselves are hidden). */
.s-hero .hero-buttons {
  width: 100%;
  height: 0;
  overflow: hidden;
}

/* Painting with glyph-rain canvas overlay */
.s-hero .hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 2.3 / 1;
  overflow: clip;
}
.s-hero .hero-painting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.s-hero .hero-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

html.dark .s-hero h1,
html.dark .s-hero .hero-sub,
html.dark .s-hero .hero-eyebrow { color: var(--ink); }

@media (max-width: 1439px) {
  .s-hero { padding: 100px 30px 50px; }
  .s-hero .hero-inner { gap: 60px; }
  .s-hero h1 { font-size: 44px; line-height: 62px; }
}

@media (max-width: 767px) {
  .s-hero { padding: 140px 20px 80px; }
  .s-hero h1 { font-size: 32px; line-height: 40px; }
  .s-hero .hero-eyebrow .fe { height: 13px; }
  .s-hero .hero-eyebrow .rh,
  .s-hero .hero-eyebrow .ch { font-size: 13px; }
  .s-hero .hero-media { aspect-ratio: 1.5 / 1; }
}

/* Buckt live index strip under the hero copy */
.bk-strip {
  margin-top: 28px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 34px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.bk-strip.is-live { opacity: 1; }
.bk-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.bk-chip b { font-weight: 600; }
.bk-chip .bk-n { color: var(--ink-soft); }
.bk-chip .bk-up { color: #4a7c00; font-variant-numeric: tabular-nums; }
.bk-chip .bk-down { color: #c0392b; font-variant-numeric: tabular-nums; }
html.dark .bk-chip .bk-up { color: var(--accent); }
@media (max-width: 767px) {
  .bk-strip { gap: 8px; }
  .bk-chip { padding: 6px 11px; font-size: 11px; }
}