/* =====================================================================
   Before You Leap (/before-you-leap/) — same product page build as /before-life-changes/ and /money/.
   Loads ../365/365.css + 365.refine.css; body class "page-365 365-page page-leap product-page".
   Accent = brand blue (cover-before-you-leap is blue + amber): text #5F8FBA, fills #94B7D5,
   price box deep blue + white. No coral accents. Buttons amber except the price-box button.
   ===================================================================== */

html body.page-leap {
  --leap-accent: #5F8FBA;
  --leap-fill: #94B7D5;
}

/* 1 · Hero: smaller two-part headline, blue accent line, photo with no left fade. */
html body.page-leap .hero365-stage__head { min-width: 0; }
html body.page-leap .leap-hero__title { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.12; }
html body.page-leap .leap-hero__title .hero365-stage__title-line { display: inline; white-space: normal; }
html body.page-leap .leap-hero__title .hero365-stage__title-accent {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62em;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--leap-accent);
}
html body.page-leap .hero365-stage__img {
  -webkit-mask-image: none;
  mask-image: none;
  object-position: 30% 50%;
}

/* Hero: one frosted question card on the photo (her signature-moment overlay) */
html body.page-leap .leap-hero__media { position: relative; }
html body.page-leap .leap-qcard {
  position: absolute;
  top: clamp(1rem, 4%, 2rem);
  right: clamp(1rem, 4%, 2rem);
  max-width: min(17rem, 46%);
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 40px -22px rgba(40, 30, 20, 0.45);
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.25;
  text-align: center;
  color: var(--ink, #1A1A1A);
}
html body.page-leap .leap-qcard__cat {
  display: table;
  margin: 0 auto 0.55rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: #94B7D5;
  font-family: var(--font-body, "Figtree", sans-serif);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

/* 2 · "The moments that define your life…" (365 #contrast layout) */
html body.page-leap #contrast .alone-close { color: var(--leap-accent); }
html body.page-leap #contrast .alone-chat__icon { background: var(--leap-accent); color: var(--ink, #1A1A1A); }


/* 6 · "280 questions. 5 decisions." — intro-game layout with the Before You Leap cover */
html body.page-leap .intro-game__eyebrow { color: var(--leap-accent); }
html body.page-leap .ig-tick { background: var(--leap-accent); color: var(--ink, #1A1A1A); }
html body.page-leap .leap-cover { margin: 0; display: flex; justify-content: center; }
html body.page-leap .leap-cover img {
  width: min(100%, 380px);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 50px -28px rgba(60, 40, 20, 0.45), 0 8px 18px -10px rgba(60, 40, 20, 0.2);
}

/* Numbered lists (conversations + decks): amber number dots by default */
html body.page-leap .mcat-grid {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
html body.page-leap .mcat {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}
html body.page-leap .mcat__n {
  grid-row: 1 / span 2;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber, #FCBD4C);
  color: var(--ink, #1A1A1A);
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: 1rem;
}
html body.page-leap .mcat__t {
  margin: 0.2rem 0 0.3rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--ink, #1A1A1A);
}
html body.page-leap .mcat__d { margin: 0; font-size: 1rem; line-height: 1.5; color: #3D3A37; }

/* 7 · App overview (homepage app-features component) */
html body.page-leap .leap-app { padding-bottom: 0; overflow: hidden; background: #FFF9F4; }
html body.page-leap .leap-app__inner { max-width: 1200px; margin: clamp(1rem, 2vw, 2rem) auto 0; padding: 0 var(--container-pad, 1.25rem); }
html body.page-leap .leap-app__inner img { display: block; width: 100%; height: auto; }

/* 10 · Price box: one colour — deep brand blue logo, price, ticks and button (as /money/) */
html body.page-leap #pricing .pcard__price { color: var(--leap-accent); }
html body.page-leap #pricing .pcard .tick { background: #5F8FBA; color: #FFFFFF; }
html body.page-leap #pricing .pcard .pcard__cta { background: #5F8FBA; border-color: #5F8FBA; color: #FFFFFF; }
html body.page-leap #pricing .pcard::before { background-image: url("../assets/pick-one-mark-blue.svg"); }
html body.page-leap .leap-family { margin: 2rem auto 0; text-align: center; font-size: 1rem; color: #6E6B67; }

@media (max-width: 54rem) {
  html body.page-leap .mcat-grid { grid-template-columns: 1fr; }
  html body.page-leap .leap-cover img { width: min(70vw, 300px); }
}

/* The closing line is a full sentence, so it
   runs one step smaller than the money page's three-word close. */
html body.page-leap #contrast .alone-close { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin-top: 1.25rem; }

/* Mobile: the photo is too narrow for an overlay without covering a face,
   so the card sits under the photo, overlapping its bottom edge. */
@media (max-width: 54rem) {
  html body.page-leap .hero365-stage__img { object-position: 60% 50%; }
  html body.page-leap .leap-qcard { position: relative; top: auto; right: auto; z-index: 1; max-width: 18rem; margin: -2rem auto 0; padding: 0.75rem 1rem 0.85rem; font-size: 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.94); }
  html body.page-leap .leap-qcard__cat { font-size: 0.7rem; margin-bottom: 0.4rem; }
}


/* 7b · Space under the app overview before the next section (her ask 2026-10-24):
   iteration 236: no fade, phones cut clean by the section edge as on the approved /money/ frame. */
html body.page-leap .leap-app { padding-bottom: 0; }

/* ---------------------------------------------------------------------
   Before You Leap only (iteration 233)
   --------------------------------------------------------------------- */

/* Section grounds, in page order. The app overview image carries its own cream ground, so the
   deck list above it shares that cream and the two read as one band. */
html body.page-leap #contrast { background: #FFFFFF; }
html body.page-leap #real-conversations { background: var(--cream, #FEF8EC); }
html body.page-leap #makes-it-safe { background: #FFFFFF; }
html body.page-leap #categories { background: #FFF9F4; }
html body.page-leap #the-game { background: #FFFFFF; }
html body.page-leap #pricing { background: var(--cream, #FEF8EC); }
html body.page-leap #just-one { background: #FFFFFF; }

/* 2 · The five decisions as cards: one line each, no sub-line in her copy */
html body.page-leap .leap-chat .alone-chat__q { font-weight: 700; font-size: 1.2rem; color: var(--ink, #1A1A1A); }
html body.page-leap #contrast .alone-chat-list { gap: 0.9rem; }
html body.page-leap #contrast .alone-chat { padding-block: 1.1rem; }

/* 3 · "The conversations most couples never have." — five long paragraphs: one numbered column */
html body.page-leap .leap-convos { grid-template-columns: 1fr; max-width: 50rem; margin-inline: auto; }
html body.page-leap .leap-convos .mcat__n { background: var(--leap-fill); }

/* 4 · "Why it works." — two cards: when you bring it up / when the game asks, then the close */
html body.page-leap .leap-why__head .section-lead { max-width: 46rem; color: #3D3A37; }
html body.page-leap .leap-why__head .section-lead strong { font-weight: 600; color: var(--ink, #1A1A1A); }
html body.page-leap .leap-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  max-width: 70rem;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
}
html body.page-leap .leap-why__card { position: relative; border-radius: 28px; padding: 2.5rem 2.75rem 2.25rem; }
html body.page-leap .leap-why__card--you { background: #F6F4F1; }
html body.page-leap .leap-why__card--game { background: #FFFFFF; box-shadow: 0 0 0 2px var(--leap-fill), 0 30px 60px -36px rgba(60, 90, 130, 0.45); }
html body.page-leap .leap-why__tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
html body.page-leap .leap-why__card--you .leap-why__tag { background: #ECE8E2; color: #6E6B67; }
html body.page-leap .leap-why__card--game .leap-why__tag { background: #E3EDF6; color: var(--leap-accent); }
html body.page-leap .leap-why__tag img { width: auto; height: 20px; }
html body.page-leap .leap-why__title {
  margin: 1.25rem 0 1.1rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink, #1A1A1A);
  text-align: left;
}
html body.page-leap .leap-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
html body.page-leap .leap-why__list li { display: flex; gap: 0.9rem; font-size: 1.125rem; line-height: 1.45; color: #3D3A37; text-align: left; }
html body.page-leap .leap-why__list li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 0.56rem; border-radius: 50%; }
html body.page-leap .leap-why__card--you .leap-why__list li::before { background: #C9C2B8; }
html body.page-leap .leap-why__card--game .leap-why__list li::before { background: var(--amber, #FCBD4C); }
html body.page-leap .leap-why__result {
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(26, 26, 26, 0.1);
  font-size: 1.125rem;
  line-height: 1.5;
  text-align: left;
  text-align-last: left;
}
html body.page-leap .leap-why__card--you .leap-why__result { color: #6E6B67; }
html body.page-leap .leap-why__card--you .leap-why__result strong { color: var(--ink, #1A1A1A); }
html body.page-leap .leap-why__card--game .leap-why__result { color: var(--ink, #1A1A1A); }
html body.page-leap .leap-why__card--game .leap-why__result strong { color: var(--leap-accent); }
html body.page-leap .leap-why__close { max-width: 52rem; margin: clamp(2.75rem, 5vw, 3.75rem) auto 0; text-align: center; }
html body.page-leap .leap-why__close p { margin: 0; text-align: center; text-align-last: center; }
html body.page-leap .leap-why__big {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink, #1A1A1A);
}
html body.page-leap .leap-why__close .leap-why__sub { margin-top: 0.6rem; font-size: 1.2rem; line-height: 1.55; color: #3D3A37; }
html body.page-leap .leap-why__close .leap-why__accent {
  margin-top: 0.9rem;
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: clamp(1.3rem, 1.9vw, 1.625rem);
  letter-spacing: -0.02em;
  color: var(--leap-accent);
  text-wrap: balance;
}
@media (max-width: 54rem) {
  html body.page-leap .leap-why__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  html body.page-leap .leap-why__card { padding: 1.75rem 1.5rem 1.6rem; border-radius: 22px; }
}

/* 5 · The five decks: three across, then two */
html body.page-leap .leap-decks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html body.page-leap .leap-decks .mcat { grid-column: span 2; }
html body.page-leap .leap-decks .mcat:nth-child(n+4) { grid-column: span 3; }
html body.page-leap .leap-decks .mcat__n { background: var(--leap-fill); }
@media (max-width: 54rem) {
  html body.page-leap .leap-decks { grid-template-columns: 1fr; }
  html body.page-leap .leap-decks .mcat,
  html body.page-leap .leap-decks .mcat:nth-child(n+4) { grid-column: auto; }
}
html body.page-leap .leap-decks .mcat,
html body.page-leap .leap-convos .mcat { align-content: start; }

/* Iteration 235 — "Here's why nothing has worked" (her ask): 365 header over the /money/ #different
   bridge. Pre-headline set like the 365 why-pre but in the mini-page blue; sentence case, never caps. */
html body.page-leap #why-nothing-worked { background: var(--cream, #fef8ec); }
html body.page-leap #why-nothing-worked .eyebrow.why-pre {
  display: block;
  margin: 0 auto 0.6rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-display, "Gabarito", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #5F8FBA;
  text-transform: none;
  text-wrap: balance;
}
html body.page-leap #why-nothing-worked .section-title { color: var(--ink, #1A1A1A); }
html body.page-leap #why-nothing-worked .section-title strong { font-weight: 800; }
html body.page-leap #why-nothing-worked .bridge-note { text-align: center; text-align-last: center; }

/* =====================================================================
   Iteration 236 — spacing & type standard (projects/pick-one/design/standards/spacing-and-type.md)
   Her ask: "space is too big", heading levels H1/H2 hero, H3 section, H4/H5 inside.
   Sizes: H3 40/30 · H4 28/22 · H5 20/18 · blue accent 22/18 (desktop ≥1024 / mobile ≤600, fluid between).
   Sections: 56px top/bottom desktop, 40px mobile, measured to the first/last visible thing.
   ===================================================================== */
html body.page-leap {
  --std-pad: clamp(2.5rem, 1.085rem + 3.774vw, 3.5rem);      /* 40 → 56 */
  --std-h3: clamp(1.875rem, 0.99rem + 2.358vw, 2.5rem);      /* 30 → 40 */
  --std-h4: clamp(1.375rem, 0.844rem + 1.415vw, 1.75rem);    /* 22 → 28 */
  --std-h5: clamp(1.125rem, 0.948rem + 0.472vw, 1.25rem);    /* 18 → 20 */
  --std-acc: clamp(1.125rem, 0.771rem + 0.943vw, 1.375rem);  /* 18 → 22 */
  --std-h3-gap: clamp(2rem, 1.2925rem + 1.887vw, 2.5rem);    /* H3 → content 32 → 40 */
}

/* Section grounds: white / cream alternating, no two neighbours alike */
html body.page-leap #contrast,
html body.page-leap #why-nothing-worked,
html body.page-leap #categories,
html body.page-leap #the-game,
html body.page-leap #just-one { background: #FFFFFF; }
html body.page-leap #real-conversations,
html body.page-leap #makes-it-safe,
html body.page-leap #leap-app,
html body.page-leap #pricing { background: var(--cream, #FEF8EC); }
html body.page-leap #why-nothing-worked .bridge-q { border: 1px solid rgba(26, 26, 26, 0.08); }

/* Section padding */
html body.page-leap main > section:not(#hero) { padding-top: var(--std-pad); padding-bottom: var(--std-pad); }
html body.page-leap main > section#hero { padding-bottom: var(--std-pad); }
/* App-overview exception (her rule): no fade, phones cut by the section edge; the gap is the next section's top padding */
html body.page-leap main > section#leap-app { padding-top: var(--std-pad); padding-bottom: 0; }

/* First and last visible things sit on the padding: no extra margins */
html body.page-leap main > section .section-header,
html body.page-leap main > section .section-header > :first-child,
html body.page-leap #contrast .alone-grid,
html body.page-leap #contrast .alone-title,
html body.page-leap #the-game .intro-game__copy > :first-child,
html body.page-leap #just-one .just-one-q__content > h2 { margin-top: 0; }
html body.page-leap main > section .container > :last-child,
html body.page-leap #contrast .alone-close,
html body.page-leap #the-game .intro-game__list,
html body.page-leap #the-game .intro-game__list > li:last-child,
html body.page-leap #makes-it-safe .leap-why__close > :last-child,
html body.page-leap #just-one .just-one-q__content > :last-child { margin-bottom: 0; }

/* H3 — every section headline */
html body.page-leap #contrast .alone-title,
html body.page-leap main > section .section-header .section-title,
html body.page-leap #the-game .intro-game__title,
html body.page-leap #just-one .just-one-q__content h2,
html body.page-leap #why-nothing-worked .eyebrow.why-pre {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 800;
  font-size: var(--std-h3);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}
html body.page-leap #pricing .section-title .pricing-title__line { font-size: inherit; }

/* H3 → content */
html body.page-leap main > section .section-header { margin-bottom: var(--std-h3-gap); }
html body.page-leap main > section .section-header + * { margin-top: 0; }
html body.page-leap #contrast .alone-title { margin-bottom: var(--std-h3-gap); }
html body.page-leap #the-game .intro-game__title { margin-bottom: var(--std-h3-gap); }
html body.page-leap #just-one .just-one-q__content h2 { margin-bottom: 1rem; }
html body.page-leap #the-game .intro-game__eyebrow { margin: 0 0 0.5rem; }  /* pre-headline → H3 8px */
html body.page-leap .section-header .section-lead { margin: 1rem auto 0; }  /* H3 → lead 16px */

/* "Here's why nothing has worked" = H3 (blue); "When you ask…" = H4 ink, only GAME OR APP in 800 */
html body.page-leap #why-nothing-worked .eyebrow.why-pre { margin: 0 auto; color: #5F8FBA; }
html body.page-leap #why-nothing-worked .section-header .section-title {
  margin: 0.75rem auto 0;
  max-width: 46rem;
  font-size: var(--std-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink, #1A1A1A);
  text-wrap: balance;
}
html body.page-leap #why-nothing-worked .section-title strong { font-weight: 800; }

/* H4 — inside a section */
html body.page-leap #makes-it-safe .leap-why__title,
html body.page-leap #makes-it-safe .leap-why__big {
  font-size: var(--std-h4);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
html body.page-leap #makes-it-safe .leap-why__title { margin: 1.25rem 0 1rem; }  /* H4 → body 16px */
html body.page-leap #makes-it-safe .leap-why__close { margin-top: clamp(2rem, 0.585rem + 3.774vw, 3rem); }
html body.page-leap #makes-it-safe .leap-why__close .leap-why__sub { margin-top: 1rem; }
html body.page-leap #makes-it-safe .leap-why__close .leap-why__accent {
  margin-top: 0.75rem;
  font-size: var(--std-acc);
  font-weight: 700;
  line-height: 1.3;
}

/* H5 — item titles */
html body.page-leap .mcat__t,
html body.page-leap #pricing .pcard__name {
  font-size: var(--std-h5);
  font-weight: 700;
  line-height: 1.3;
}

/* Lists open straight under the headline gap (their own top margins removed) */
html body.page-leap #real-conversations .mcat-grid,
html body.page-leap #categories .mcat-grid,
html body.page-leap #makes-it-safe .leap-why__grid,
html body.page-leap #why-nothing-worked .bridge-stage,
html body.page-leap #leap-app .leap-app__inner { margin-top: 0; }

/* Beat the 365 refine rules that load with a stronger selector */
html body.page-leap.page-365 #contrast.contrast-section { padding-top: var(--std-pad); padding-bottom: var(--std-pad); }
html body.page-leap.page-365 #real-conversations .section-header .section-title { font-size: var(--std-h3); line-height: 1.1; letter-spacing: -0.03em; margin: 0; }

/* App overview keeps its warm cream (#FFF9F4): the overview picture is painted on that ground,
   so #FEF8EC would show the picture's edge. Still different from its white neighbours. */
html body.page-leap #leap-app { background: #FFF9F4; }

/* "And they find out — …" closing line in #contrast = H4 */
html body.page-leap.page-365 #contrast .alone-close { font-size: var(--std-h4); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-top: 1rem; }

/* Just one question: the phone picture carries a transparent margin; pull it onto the padding line */
@media (min-width: 60rem) {
  html body.page-leap #just-one .just-one-q__device { margin-top: -10px; margin-bottom: -4px; }
}

/* Numbered lists: the last row has no padding under it, so the section's 56/40 is the gap */
html body.page-leap .leap-convos .mcat:last-child { padding-bottom: 0; }
html body.page-leap .leap-decks .mcat:nth-child(n+4) { padding-bottom: 0; }
@media (max-width: 54rem) {
  html body.page-leap .leap-decks .mcat:nth-child(4) { padding-bottom: 1.35rem; }
}