/* 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; }
}