/* brand.css — MonteClimb logo overrides.
   Loaded after hazy.css so these win. Everything brand-related lives here;
   hazy.css stays an untouched mirror of the original template. */

/* --- Wordmark: navbar + footer -------------------------------------------
   The white "monteclimb" wordmark is 6.91:1, far wider than the 2.37:1 mark it
   replaces, so height is set explicitly and width follows the aspect ratio. */
.brand-image {
  width: auto;
  height: 20px;
}

.footer-brand-image {
  width: auto;
  height: 22px;
}

@media screen and (max-width: 479px) {
  .brand-image { height: 17px; }
  .footer-brand-image { height: 20px; }
}

/* --- Icon mark: hero + "Get early access" card ---------------------------
   The gradient M carries its own colour, so the template's opaque white plate
   is dropped. On its own against the near-black ground the mark read as
   unanchored, so it sits on a soft tile instead:

     ::before  a wide radial bloom in the brand blue (--main-color #0266ff),
               which is also the M's own dominant hue, so the mark looks like
               it is casting its own light.
     ::after   a faint rounded tile, a white gradient at 7% falling to nothing,
               with a 1px hairline. This is what actually anchors the mark and
               echoes the rounded plate the original design used.

   Both are pseudo-elements on the existing container, so they inherit the
   Webflow IX2 entrance animation (the hero mark flips in, the CTA mark rises)
   and no markup changes were needed. The container keeps its 50px height so
   surrounding layout is untouched; the tile overflows it by design. */
.hero-section-mark-container,
.cta-logo-wrapper {
  position: relative;
  width: 76px;
  height: 50px;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

.hero-section-mark-container img,
.cta-logo {
  position: relative;
  z-index: 1;
  width: 76px;
  height: auto;
  left: 0;
}

.hero-section-mark-container::before,
.cta-logo-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 198px;
  transform: translate(-50%, -48%);
  background: radial-gradient(50% 50% at 50% 52%, #2b6bff42 0%, #0266ff00 70%);
  filter: blur(16px);
  pointer-events: none;
}

.hero-section-mark-container::after,
.cta-logo-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 92px;
  height: 76px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  background: linear-gradient(160deg, #ffffff12, #ffffff03 55%, #ffffff00);
  border: 1px solid #ffffff14;
  pointer-events: none;
}

/* Trim the tile and bloom on phones so they do not crowd the headline. */
@media screen and (max-width: 479px) {
  .hero-section-mark-container::after,
  .cta-logo-wrapper::after { width: 84px; height: 70px; border-radius: 18px; }
  .hero-section-mark-container::before,
  .cta-logo-wrapper::before { width: 200px; height: 165px; }
}

/* --- "AI" badge ----------------------------------------------------------
   A small outlined chip sitting beside the wordmark: transparent fill, a 1px
   hairline at 24% white, and white letters, so it reads as part of the logo
   lockup rather than as a button. It is a real text node rather than part of
   the logo image, so it stays crisp at any size and screen readers announce
   the brand as "monteclimb AI". */
a.brand {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* .footer-brand is a flex column (wordmark above a paragraph), so the badge
   gets its own row wrapper or it would stack underneath the wordmark. */
.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #fff;
  border: 1px solid #ffffff3d;
  border-radius: 4px;
  padding: 3px 5px;
  font-family: var(--main-font);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

@media screen and (max-width: 479px) {
  a.brand { gap: 6px; }
  .brand-badge { font-size: 9px; padding: 2px 4px; border-radius: 3px; }
}

/* --- Mark + wordmark lockup (2026-09-10) -------------------------------
   The bare gradient M sits left of the wordmark in the navbar and footer;
   the hero tile is gone, so the mark lives only in the lockup. */
.brand-mark { width: auto; height: 26px; }
.footer-brand-lockup .brand-mark { height: 28px; }
a.brand { gap: 9px; }
.footer-brand-lockup { gap: 10px; }
@media screen and (max-width: 479px) {
  .brand-mark { height: 22px; }
  a.brand { gap: 7px; }
}

/* Headline on one line at desktop widths: the template capped the word row at
   600px, which wrapped "When can you actually retire?"; the phone/tablet
   caps stay as they were so it still wraps where it must. */
@media screen and (min-width: 992px) {
  .hero-section-header-holder { max-width: 920px; }
}

/* --- "Why plan on real data" cards (2026-09-10) ----------------------------
   Four sourced statistics replace the template's placeholder "fun facts"; the
   Twitter badge is gone. Each card carries its source and year. */
.slider-source { font-family: var(--paragraph-font); font-size: 11.5px; line-height: 1.4; color: #7d7d7d; margin: 12px 0 0; letter-spacing: .01em; }
.slider-paragraph-holder p:first-child { margin-bottom: 0; }

/* --- Early-access feature 01: the app's own Stress Lab cards (2026-09-10) ---
   Transparent element captures replace the template's mock; each card carries
   its own rounded corners, so the holders' rectangular radius/shadow (which
   would draw a box around transparent corners) come off and a drop-shadow that
   follows the shape goes on. */
.early-access-big-image-holder { border-radius: 0; box-shadow: none; }
.early-access-big-image.ea-card { border-radius: 0; filter: drop-shadow(-2px 8px 22px #00000080); }
.early-access-small-image.ea-card { border-radius: 0; box-shadow: none; overflow: visible; filter: drop-shadow(0 14px 34px #000000a8); width: 100%; display: block; }

/* --- Early-access feature 02: William (2026-09-10) ---------------------- */
.early-access-small-image-holder._02, .early-access-big-image-holder._02 { border-radius: 0; box-shadow: none; }
.early-access-small-image._02.ea-card { filter: drop-shadow(0 10px 26px #00000099); }
.early-access-big-image._02.ea-card { filter: drop-shadow(0 16px 36px #000000aa); }
/* fit: the chat panel is taller than the template's mock, so the frame's top
   padding comes down and the cards sit at 94% so the composer's rounded
   bottom edge stays inside the frame instead of clipping. */
.early-access-image-container._02 { padding: 40px 50px 30px; }
.early-access-small-image._02.ea-card, .early-access-big-image._02.ea-card { width: 94%; margin: 0 auto; display: block; }
.early-access-small-image-holder._02 { margin-bottom: 14px; }
@media screen and (max-width: 991px) { .early-access-image-container._02 { padding: 26px 24px 20px; } .early-access-small-image._02.ea-card, .early-access-big-image._02.ea-card { width: 90%; } }
@media screen and (max-width: 767px) { .early-access-small-image._02.ea-card, .early-access-big-image._02.ea-card { width: 86%; } }