/* ===== HOMEPAGE HERO — "HODLing vs THE PLAN" sea (13 Oct 2026) =====
   Replaces the hex-mark title card. One canvas draws the whole scene: a flat calm on the left
   with a small boat (HODLing, waiting for the tide), live network waves on the right with three
   THE PLAN pods riding the crests. Copy sits on the dark water below. Scene logic lives in
   /assets/js/hero-waves.js; the canvas reads the captions' and the .waves-sea-band's positions
   from the DOM, so the horizon always lands between the captions and the headline.
   Tagline under THE PLAN is "Ride the waves", not "Harvest the waves" (Alice, 13 Oct): harvest
   reads as earning a yield, and this page sits in front of the 506(c) token pages. */
/* No background of its own: the hero sits on the site-wide .bg-field hex ground like every
   other section (Alice, 13 Oct), so there is no seam where the hero ends. */
.waves-hero{ position:relative; overflow:hidden; isolation:isolate; padding-bottom:clamp(48px,7vw,88px); }
.waves-sea{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.waves-hero .wrap{ position:relative; z-index:1; }

.waves-captions{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:center; }
.waves-cap{ display:grid; gap:10px; justify-items:center; }
.waves-word{ margin:0; font-size:clamp(26px,2.6vw,38px); line-height:1; }
.waves-cap-hodl{ opacity:.82; }
.waves-cap-hodl .waves-word{ font-weight:600; letter-spacing:-.02em; color:var(--text, #F2F6F8); }
.waves-cap-plan .waves-word{ font-weight:700; letter-spacing:.26em; margin-right:-.26em; color:#fff; }
.waves-line{ margin:0; font-size:clamp(11px,.95vw,13px); font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--capri); max-width:15em; line-height:1.5; text-wrap:balance; }
.waves-cap-hodl .waves-line{ color:var(--carolina); }

/* the strip of sea between captions and headline: the canvas puts the horizon inside it */
.waves-sea-band{ height:clamp(180px,18vw,236px); }

/* Hierarchy (Alice, 13 Oct): the captions are labels on the picture, the tagline is the headline.
   So the captions are small and the H1 is the biggest type in the hero. */
.waves-hero h1.display{ font-size:clamp(2.4rem,5vw,4.1rem); font-weight:300; line-height:1.06; letter-spacing:-.03em;
  margin-bottom:16px; text-shadow:0 4px 40px rgba(0,10,31,.9); }
.waves-hero .lead{ text-shadow:0 2px 24px rgba(0,10,31,.95); }

@media (max-width:640px){
  .waves-captions{ gap:12px; }
  .waves-cap{ gap:10px; }
  .waves-word{ font-size:24px; }
  .waves-cap-plan .waves-word{ font-size:21px; letter-spacing:.16em; margin-right:-.16em; white-space:nowrap; }
  .waves-line{ letter-spacing:.14em; font-size:11.5px; }
  .waves-cap{ gap:8px; }
  .waves-sea-band{ height:200px; }
}