/* Fixes layered on top of the vendored Webflow sheets.
 *
 * Kept separate from treasury-marketing.css so the vendored CSS stays close to
 * what the original site shipped, and so every behavioural change here is
 * visible in one place.
 */

/* ---------------------------------------------------------------------------
   1. Nav collapse — replaces the dropped Webflow runtime.

   The original loaded jQuery plus Webflow's runtime, which read
   `data-collapse="medium"` on the navbar and collapsed `.w-nav-menu` at 991px
   and below. This export ships no `.w-nav-button` hamburger, so the collapsed
   menu had no way to be opened — on the live site the "For new investors" link
   simply was not rendered under 992px. Verified against the original:
   display:none at <=991px, display:block at >=992px.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
	.navbar-logo-left-container .w-nav-menu {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   2. Wave divider seam — inherited bug in the original site.

   `.green-wave.top` sets `background-size: 100%`, which sizes the wave art to
   the container *width* and lets the height follow the 12.903:1 aspect ratio.
   The container height, though, is fixed per breakpoint (85px, 50px at <=991,
   25px at <=479). Wherever width/12.903 falls short of that fixed height the
   background does not reach the bottom of the box, `repeat-y` starts a second
   copy, and its leading edge shows as a white seam under the wave:

       992–1096px   (85px box)
       480–645px    (50px box)
       320–322px    (25px box)

   The matching `.green-wave-bottom` rule in the same stylesheet already uses
   `background-size: cover`, which always fills — the top rule was just missed.
   Applying the same value here fixes the seam and is a no-op at every width
   where it already worked: the art is far wider than it is tall, so `cover`
   and `100%` resolve identically whenever the image already overflows the box.
   --------------------------------------------------------------------------- */

.green-wave.top,
.green-wave-copy.top {
	background-size: cover;
}

/* ---------------------------------------------------------------------------
   3. Eyebrow alignment — inherited inconsistency in the original site.

   `.eyebrow` sets colour and type only, never alignment, so each eyebrow takes
   its horizontal position from whatever flex container it happens to sit in.
   Five of the six on the homepage sit in `.hero-split` or `.hero-split-2`,
   both `align-items: flex-start`, and read left. The sixth — "Live learning",
   in the workshops section — sits in `.hero-wrapper-two`, which is
   `align-items: center`. So it alone centred, directly above a heading that
   stayed left (`.heading` hard-codes `text-align: left` and this one carries no
   `.centered` modifier) and above a paragraph that centred again
   (`.margin-bottom-24px.centered`). Three alignments in one stack.

   Left is the consistent choice — it matches the other five and the
   `.hero-split-2` sections' eyebrow/heading/paragraph pattern.

   The text has to share the image's 960px box rather than the wrapper's
   1120px: `.hero-wrapper-two` is `max-width: 1120px` while
   `.hero-image.shadow-two` is `max-width: 960px` and centred, so aligning to
   the wrapper would park the text 80px outside the image's left edge on wide
   viewports. Below 1120px the two coincide and this is a no-op on width.
   --------------------------------------------------------------------------- */

.hero-stack.features .eyebrow,
.hero-stack.features .heading.feature,
.hero-stack.features .margin-bottom-24px.centered {
	width: 100%;
	max-width: 960px;
	text-align: left;
}