/* "There had to be a better way" - the payoff card and the comparison table
 * that sit under the existing How It Works timeline.
 *
 * The timeline itself is untouched Webflow markup, so its scroll-drawn line and
 * fade-ins keep working exactly as before. Everything here is additive.
 *
 * Palette: black / white / gold. Own file, never an inline <style> block. */

/* Keeps the last two words of a line together so a single word can never sit
   alone on the last line (universal rule 59). */
.nb { white-space: nowrap; }

/* ---------- the headline ---------- */

/* Webflow makes .heading.center a flex container. That turns the text and the
   nowrap span into two separate flex items, which at ~540px rendered as
   "There / had to  a better way / be". Block layout with centred text looks
   identical and wraps as one continuous line of text. */
#How-it-works .heading.center {
  display: block;
  text-align: center;
}

/* ---------- the scroll-drawn line ---------- */

/* Webflow hard-codes the mask at 1050px (and 1310/1440px on smaller screens),
   which was tuned for the old eight-step list. With five statements the line
   ran ~326px past the last one. Tracking the list height keeps it correct at
   any length, so editing the copy can never strand the line again.
   The payoff card and the comparison live in their own section below, because
   Webflow maps the line's fill across the whole section's scroll range: with
   that extra content inside, the line lagged far behind the numbers. */
#How-it-works .line-drop-mask { height: 100%; }
#How-it-works .line-drop { height: 100%; }

/* The follow-on section carries no timeline, so it needs the section's own
   top spacing removed - the payoff card should read as continuing the list. */
.section.how-it-works.bfy-after {
  padding-top: 0;
  padding-bottom: 40px;
}

/* ---------- the payoff card ---------- */

.bfy-payoff {
  max-width: 660px;
  margin: 6px 0 0 60px;
  padding: 34px 36px;
  background-color: var(--off-white);
  border: 1px solid #000;
  border-radius: 18px;
}

.bfy-payoff h3 {
  margin: 0 0 10px;
  font-family: Poppins, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.bfy-payoff p {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
  color: #4a4642;
}

/* ---------- the comparison ---------- */

/* The section's container is capped at 590px, which squeezed the three columns
   to ~214px and wrapped every cell to three lines. The table breaks out of that
   cap and centres on the page instead; the container is itself centred, so
   margin-left:50% + translateX(-50%) lands it dead centre. */
.bfy-compare {
  width: min(940px, calc(100vw - 48px));
  max-width: none;
  margin: 96px 0 0 50%;
  transform: translateX(-50%);
  font-family: Poppins, sans-serif;
}

.bfy-compare h2 {
  margin: 0 0 14px;
  font-family: Poppins, sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #000;
  text-wrap: balance;
}

/* The gold marker under the closing phrase, same device as the hero. */
.bfy-compare h2 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(180deg, transparent 62%, var(--brown) 62%);
}

/* The struck word reads as a live correction, so it sits back in weight and
   colour while the replacement carries the gold marker. */
.bfy-compare h2 .bfy-strike {
  color: #b0a99f;
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #b0a99f;
  text-underline-offset: 0;
}

.bfy-compare .bfy-lede {
  max-width: 640px;
  margin: 0 auto 44px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  color: #4a4642;
  text-wrap: pretty;
}

.bfy-thead {
  display: grid;
  grid-template-columns: 162px 1fr 1fr;
  padding-bottom: 12px;
}

.bfy-thead span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a8580;
}

.bfy-thead .c2 { padding-left: 26px; }
.bfy-thead .c3 { padding-left: 26px; color: #000; }

.bfy-row {
  display: grid;
  grid-template-columns: 162px 1fr 1fr;
  align-items: center;
  border-top: 1px solid #eae6e0;
  padding: 22px 0;
}

.bfy-row.last { border-bottom: 1px solid #eae6e0; }

.bfy-row .lbl {
  padding-right: 18px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  text-wrap: pretty;
}

.bfy-row .old,
.bfy-row .new {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.bfy-row .old { font-weight: 500; color: #8a8580; }
.bfy-row .new { font-weight: 600; color: #000; }

.bfy-row .old:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background-color: #d8d2ca;
}

.bfy-row .new:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 50%;
  background-color: var(--brown);
}

/* The headline is broken with an explicit <br/> so it is always exactly two
   lines: "There had to be" / "a better way". The container is only ~260px wide
   on a phone, so the type also has to be small enough that the longer of the
   two lines fits without wrapping again - at 34px it still spilled on narrower
   handsets and stranded "be" on its own line. 28px leaves headroom down to a
   320px screen. */
@media screen and (max-width: 767px) {
  /* Webflow caps this section's content column at 260px (~208px usable) on a
     phone, which is barely half the screen: "There had to be" measured exactly
     208px in a 208px column - zero headroom, so it held together on one device
     and wrapped to three lines on another. Widening the column fixes the
     headline and gives the body copy room at the same time. Applies to the
     follow-on section too, so both stay aligned. */
  .section.how-it-works .container._260max-width {
    max-width: min(92vw, 460px);
  }

  #How-it-works .heading.center {
    font-size: 30px;
    line-height: 1.2;
  }
}

@media screen and (max-width: 767px) {
  .bfy-payoff {
    margin-left: 0;
    padding: 26px 22px;
  }
  .bfy-payoff h3 { font-size: 22px; }

  .bfy-compare { margin-top: 64px; width: 100%; margin-left: 0; transform: none; }
  .bfy-compare h2 { font-size: 27px; }
  .bfy-compare .bfy-lede { font-size: 15px; margin-bottom: 32px; }

  .bfy-thead { display: none; }

  .bfy-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }
  .bfy-row .lbl {
    padding-right: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8a8580;
  }
  .bfy-row .old,
  .bfy-row .new { padding-left: 22px; }
  .bfy-row .old:before { top: 11px; }
  .bfy-row .new:before { top: 6px; }
}