/* 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: #8c8c8c; margin: 12px 0 0; letter-spacing: .01em; }
.slider-header { color: #8c8c8c; }   /* the template's #7d7d7d grey read 4.3:1 on the card; this clears 4.5 */
.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%; } }

/* --- Launch audit (2026-10-15): the template's leftovers came out ------------
   L-1: the lorem block, the to-do-app phone, the sponsor logos, the "4 power
   features", the invented testimonials, the $3.99 / $12.99 pricing, the email
   form that sent nothing and the "Webflow stuff" footer are gone. What took
   their place is styled here, on the template's own tokens. */

/* under the hero (owner, 2026-10-15: "I dont want to remove this section, but fill it with our content"):
   the template's three cards stay — our words and our own picture in the first, the Monte Climb phone app
   in the phone, the sourced statistics in the third. */

/* the statistics slider: the template placed its arrows and dots at -24% / -25% of the slider's height,
   which lands them on the source line whenever the text runs long; they sit in a reserved strip instead. */
/* the template's ≥1440px rule sets the slider and its holder to height:100% of the card while they start below the
   card's title, so they ran ~7px past the card's clipped edge and took the arrows with them; a flex column lets the
   slider fill exactly the space left under the title */
.fun-fact-holder .fun-fact-container { display: flex; flex-direction: column; box-sizing: border-box; }
.fun-fact-holder .slider-holder { flex: 1 1 auto; height: auto; min-height: 0; display: flex; flex-direction: column; }
.fun-fact-holder .slider { flex: 1 1 auto; height: auto; padding-bottom: 44px; }
.fun-fact-holder .slider-content { grid-row-gap: 26px; }
.fun-fact-holder .left-arrow, .fun-fact-holder .right-arrow { inset: auto auto 0 0; height: 28px; width: 28px; }
.fun-fact-holder .right-arrow { inset: auto 0 0 auto; }
.fun-fact-holder .slide-nav { bottom: 0; top: auto; height: 28px; padding-top: 0; }

/* the first card's picture: what the app covers, drawn in the template's own style (dark tiles, one
   lit chip, the blue brand tile, a list) — HTML, so it stays sharp and uses the page's fonts. It keeps
   the template's class and inline transform, so Webflow's slide-in still plays. */
.first-feature-block-holder { overflow: hidden; }
.mc-ff-art { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 40px 40px; width: 100%; box-sizing: border-box; font-family: var(--paragraph-font); }
.mcff-card { border: 1px solid #ffffff1f; border-radius: 18px; background: #1d1d1d; }
.mcff-top { display: flex; align-items: center; gap: 12px; padding: 16px; width: max(118%, 470px); }
.mcff-chip { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; border-radius: 12px; color: #ffffff80; font-size: 19px; white-space: nowrap; }
.mcff-chip svg { width: 24px; height: 24px; color: #ffffff99; }
.mcff-chip.is-on { background: #2c2c2c; color: #fff; }
.mcff-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; }
.mcff-row { display: flex; gap: 14px; width: max(118%, 470px); }
.mcff-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; height: 70px; padding: 0 22px; border: 1px solid #ffffff1f; border-radius: 18px; color: #ffffffcc; font-size: 17px; white-space: nowrap; }
.mcff-pill i { width: 7px; height: 7px; border-radius: 50%; background: #8f8bff; }
.mcff-pill b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #3b48ff; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mcff-brand { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 12px; height: 70px; padding: 0 18px; border-radius: 18px; background: #0266ff; color: #fff; font: 600 17px/1 var(--main-font); letter-spacing: .14em; white-space: nowrap; }
.mcff-brand img { width: 36px; height: auto; padding: 6px; border-radius: 10px; background: #fff; }
.mcff-list { display: flex; flex-direction: column; padding: 10px 18px; width: max(118%, 470px); }
.mcff-list div { display: flex; align-items: center; gap: 14px; padding: 12px 6px; color: #ffffffd9; font-size: 15.5px; }
.mcff-list div + div { border-top: 1px solid #ffffff12; }
.mcff-list svg { width: 22px; height: 22px; color: #ffffffb3; flex: none; }
.mcff-list span { flex: 1; white-space: nowrap; }
.mcff-list em { font-style: normal; color: #7be8b3; }
@media screen and (max-width: 479px) {
  .mc-ff-art { padding: 0 0 24px 22px; gap: 10px; }
  .mcff-top, .mcff-row, .mcff-list { width: 125%; }
  .mcff-chip { height: 46px; font-size: 16px; padding: 0 16px; }
  .mcff-pill, .mcff-brand { height: 58px; font-size: 15px; }
  .mcff-brand { letter-spacing: .1em; }
}

/* pricing: the one real plan on one screen — buy column (price, CTA, every fee in words) beside
   six outcome-led groups of what the app does. Each claim names a real page in the app. */
#Pricing.pricing-wrapper { padding-top: 64px; padding-bottom: 64px; }
#Pricing .pricing-holder { padding-top: 28px; padding-bottom: 0; }
#Pricing .title-holder p { margin-bottom: 0; }
.pricing-content.mc-one { display: block; max-width: 1240px; margin: 0 auto; }
.pricing-content.mc-one .pricing-table.mc-split { display: grid; grid-template-columns: minmax(270px, 310px) 1fr; gap: 0 40px; padding: 34px 38px; }
.mc-buy { display: flex; flex-direction: column; gap: 11px; padding-right: 40px; border-right: 1px solid #ffffff1a; }
.mc-buy .pricing-header-holder { grid-row-gap: 12px; }
.mc-buy .pricing-tag { align-self: flex-start; padding: 6px 13px; font-size: 13px; }
.mc-buy .pricing-header { font-size: 30px; line-height: 1.06; letter-spacing: -.02em; }
.mc-buy-lead { margin: 0; font-size: 14.5px; line-height: 1.45; color: #ffffffb3; }
.mc-buy .pricing-price-holder { display: flex; align-items: flex-end; gap: 10px; margin-top: 4px; }
.pricing-content.mc-one .pricing { font-size: 52px; font-weight: 600; line-height: .9; color: #fff; }
.pricing-content.mc-one .pricing-description { font-size: 15px; color: #ffffffb3; padding-bottom: 2px; }
.mc-per { margin: -6px 0 0; font-size: 13.5px; color: #7be8b3; }
.mc-buy-go.button { width: 100%; text-align: center; margin-top: 2px; }
.mc-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mc-trust li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.4; color: #ffffffb3; }
.mc-trust li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border: solid #7be8b3; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.mc-price-fine { margin: auto 0 0; padding-top: 2px; font-size: 11.5px; line-height: 1.45; color: #ffffff80; }
.mc-price-fine a, .mc-faq a { color: #9db8ff; text-decoration: underline; text-underline-offset: 3px; }
.mc-price-fine a:hover, .mc-faq a:hover { color: #fff; }
#Pricing .mc-split li { padding-top: 0; padding-bottom: 0; }
.mc-feats-k { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #ffffff73; }
.mc-grps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media screen and (max-width: 1199px) { .mc-grps { grid-template-columns: 1fr 1fr; } }
/* six colour-coded tiles: one hue per group (icon chip, tint, rule, bullets), so the eye can scan by colour */
#Pricing .mc-split .mc-grp { --c: #3fdc8f; position: relative; padding: 16px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 13%, transparent), color-mix(in srgb, var(--c) 3%, transparent) 70%);
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.mc-grp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--c), transparent 80%); }
#Pricing .mc-grp.g2 { --c: #9a8cff; } #Pricing .mc-grp.g3 { --c: #ff8f6b; } #Pricing .mc-grp.g4 { --c: #f3c77a; } #Pricing .mc-grp.g5 { --c: #ff7aa2; } #Pricing .mc-grp.g6 { --c: #5cb8ff; }
.mc-grp-h { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 600; line-height: 1.25; color: #fff; }
.mc-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.mc-ic svg { width: 18px; height: 18px; }
.mc-tag { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #d6d0ff; background: #9a8cff2e; border: 1px solid #9a8cff55; }
.mc-grp ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mc-grp ul li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; color: #ffffffc7; }
.mc-grp ul li::before { content: ""; position: absolute; left: 1px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.mc-grp ul li b { font-weight: 600; color: #fff; }
@media screen and (max-width: 991px) {
  .pricing-content.mc-one .pricing-table.mc-split { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; }
  .mc-buy { padding-right: 0; border-right: 0; padding-bottom: 28px; border-bottom: 1px solid #ffffff1a; }
}
@media screen and (max-width: 767px) {
  #Pricing.pricing-wrapper { padding-top: 40px; padding-bottom: 40px; }
  .pricing-content.mc-one .pricing-table.mc-split { padding: 26px 20px; }
  .mc-grps { grid-template-columns: 1fr; gap: 18px; }
  .mc-buy .pricing-header { font-size: 28px; }
}

/* questions: native <details>, no script; one open at a time is the reader's choice */
.mc-faq-section .container { padding-top: 90px; padding-bottom: 90px; }
.mc-faq { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.mc-faq details { background: #181818; border: 1px solid #ffffff14; border-radius: 16px; padding: 0 24px; transition: border-color .25s; }
.mc-faq details[open] { border-color: #ffffff2e; }
.mc-faq summary { cursor: pointer; list-style: none; padding: 20px 32px 20px 0; position: relative; font-family: var(--main-font); font-size: 19px; font-weight: 500; color: #fff; }
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: #ffffff99; transition: transform .25s; }
.mc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mc-faq summary:focus-visible { outline: 2px solid #3f7bff; outline-offset: 4px; border-radius: 8px; }
.mc-faq details p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: #ffffffb3; }
@media screen and (max-width: 479px) { .mc-faq details { padding: 0 18px; } .mc-faq summary { font-size: 17px; } }

/* the closing call: a button straight to the answer, where the dead form was */
.mc-cta-go { margin-top: 28px; display: flex; justify-content: center; }

/* the copyright line under the footer columns */
.mc-copy { margin: 0; padding: 26px 0 34px; border-top: 1px solid #ffffff14; font-size: 13px; color: #ffffff8c; text-align: center; }

/* --- The Stress Lab and William pictures are whole scenes (owner 2026-10-16: "make the pictures that are put
   here better, keep the exciting bgs") ----------------------------------------------------------------------
   Each is one transparent image drawn at the gradient's own size (1110x1470) with the app's real cards and
   their shadows baked in, so it lies exactly over the template's background, which stays as it was. The
   template's bleed offsets (top 100px, left 20%) and the _02 padding no longer apply. */
.early-access-image-container.mc-scene-box { padding: 0; align-items: stretch; justify-content: stretch; }
.early-access-big-image-holder.mc-scene-holder { top: 0; left: 0; width: 100%; height: 100%; }
.early-access-big-image.mc-scene { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: none; }


/* SEO (2026-10-18): four section headings are H2 now (one H1 per page) and keep the H1 look they had (.h1-look) */
h2.title.h1-look { font-size: 62px; font-weight: 500; }
@media screen and (max-width: 991px) { h2.title.h1-look { font-size: 42px; } }
@media screen and (max-width: 767px) { h2.title.h1-look { font-size: 32px; } }

/* --- Tablet pass (TABLET_PLAN T2.5, 2026-10-29) ------------------------------------------------------------
   Tablet = 700–1099px; touch = (hover: none), (pointer: coarse), never the user agent. The design stays; what
   changes is reach: 44px targets for a finger, no type under 12px, a footer that fits a tablet's width. */

/* the collapsed menu (≤991px): each link is a 44px row, and the rows replace the 20px gaps between them */
@media screen and (max-width: 991px) {
  .nav-links { grid-row-gap: 0; }
  .nav-links .nav-link { min-height: 44px; padding: 0 16px; }
  .nav-menu-link-holder .navbar-button { min-height: 44px; display: inline-flex; align-items: center; }
}
/* the footer between phone (≤767 stacks it) and desktop: brand on its own row, the three link columns under it */
@media screen and (min-width: 768px) and (max-width: 1099px) {
  .footer-wrapper { flex-wrap: wrap; padding-right: 0; }
  .footer-brand { flex: 1 1 100%; max-width: 520px; }
  .footer-content { margin-top: 44px; grid-template-columns: repeat(3, auto); grid-column-gap: 72px; }
}
@media (min-width: 700px) and (max-width: 1099px), (min-width: 700px) and (hover: none), (min-width: 700px) and (pointer: coarse) {
  .slider-source, .mc-price-fine, .mc-tag { font-size: 12px; }
}
@media (hover: none), (pointer: coarse) {
  a.brand { min-height: 44px; }
  .nav-link { min-width: 44px; }
  .navbar-button { position: relative; }
  .navbar-button::after { content: ""; position: absolute; inset: -6px 0; }
  .footer-block { grid-row-gap: 0; }
  .footer-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  /* the stats slider: 28px arrows and 12px dots get a 44px reach without changing how they look */
  .w-slider-arrow-left::after, .w-slider-arrow-right::after { content: ""; position: absolute; inset: -8px; }
  .w-slider-dot { margin: 0 10px .5em; }
  .w-slider-dot::after { content: ""; position: absolute; inset: -16px; }
  /* "Four questions" cards: the coloured glow behind each was a mouse-over reveal; a finger never sees it, so it rests on */
  .power-feature-background-holder-copy { opacity: .55 !important; }
}