/* ============================================================
   BECOME - brand system
   ============================================================ */
:root {
  --purple: #6514dd;
  --purple-soft: #f9f5ff;
  --lime: #ccff00;
  --dark: #1d093b;
  --mint: #48e2ac;
  --mint-bg: #e8faf2;
  --ink: #393839;
  --head: #363536;
  --muted: #696d71;
  --cream: #f9fbfd;
  --border: #e9e7f0;
  --white: #fff;
  --shadow: 0 7px 20px rgba(57, 56, 57, .08), 0 10px 20px rgba(101, 20, 221, .06);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1280px;
  --gutter: 32px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none
}

ul,
ol {
  list-style: none
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none
}

img {
  max-width: 100%;
  display: block
}

h1,
h2,
h3,
h4 {
  color: var(--head);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 800
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter)
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple)
}

.accent {
  color: var(--purple)
}

/* ============ BUTTONS ============ */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 10px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  min-height: 44px;
  white-space: nowrap;
}

.btn svg {
  width: 18px;
  height: 18px;
  transition: transform .18s var(--ease)
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s var(--ease)
}

.btn:hover::after {
  transform: translateX(120%)
}

.btn-lime {
  background: linear-gradient(to top, var(--lime-deep, #b8e600), var(--lime));
  color: var(--head);
  border: 1px solid rgba(101, 20, 221, .18);
  box-shadow: 0 4px 14px rgba(184, 230, 0, .35), inset 0 1px 0.5px rgba(255, 255, 255, .5), inset 0 -1px 1px rgba(101, 20, 221, .15);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .2s
}

.btn-lime:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(101, 20, 221, .18), inset 0 1px 0.5px rgba(255, 255, 255, .6)
}

.btn-lime:active {
  filter: brightness(.94);
  transform: translateY(0)
}

.btn-lime:hover svg {
  transform: translateX(4px)
}

.btn-purple {
  background: linear-gradient(to top, var(--purple), #7a2ee6);
  color: #fff;
  border: 1px solid rgba(13, 4, 30, .35);
  box-shadow: 0 4px 14px rgba(101, 20, 221, .3), inset 0 1px 0.5px rgba(255, 255, 255, .35), inset 0 -1px 1px rgba(13, 4, 30, .4);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .2s
}

.btn-purple:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 10px 24px rgba(101, 20, 221, .38), inset 0 1px 0.5px rgba(255, 255, 255, .45)
}

.btn-purple:active {
  filter: brightness(.92);
  transform: translateY(0)
}

.btn-purple:hover svg {
  transform: translateX(4px)
}

.btn-ghost {
  border: 1px solid var(--border);
  color: var(--head);
  background: #fff
}

.btn-ghost:hover {
  border-color: var(--purple);
  color: var(--purple)
}

.btn-block {
  width: 100%
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s
}

.nav.scrolled {
  border-color: var(--border);
  box-shadow: 0 2px 16px rgba(57, 56, 57, .06)
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px
}

/* The logo must never absorb the row's shrink. Its img is height-locked, so a
   squeezed flex box crushes the wordmark horizontally instead of scaling it -
   at 320px it was rendering 58px wide against a 159px intrinsic box. */
.nav-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center
}

.nav-logo img {
  height: 30px;
  width: auto
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px
}

.nav-signin {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap
}

.nav-signin:hover {
  color: var(--purple)
}

/* signed-in variant - name (and gravatar, when there is one) instead of "Sign in" */
.nav-signin--me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 190px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis
}

.nav-signin--me:hover {
  border-color: var(--purple)
}

.ns-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 26px;
  object-fit: cover
}

.ns-avatar--ph {
  display: grid;
  place-items: center;
  background: var(--purple-soft);
  color: var(--purple)
}

.ns-avatar--ph svg {
  width: 15px;
  height: 15px
}

.hamburger {
  display: flex;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px
}

.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--head);
  border-radius: 2px;
  transition: .25s var(--ease)
}

/* mobile overlay */
/* inset:0 makes the box exactly one viewport tall, so on a short viewport the
   links + CTAs overflow past its bottom edge - and translateY(-100%) only shifts
   the box, leaving that overflow visible at the top of the screen. overflow-y
   contains it (and lets a short menu scroll); visibility keeps the closed menu
   out of reach for pointers and assistive tech either way. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--white);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .4s var(--ease), visibility .4s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 24px var(--gutter);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.mobile-menu.open {
  transform: translateY(0);
  visibility: visible
}

.mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px
}

.mobile-top img {
  height: 28px
}

.mobile-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: var(--head)
}

/* account row - the mobile equivalent of the current homepage's gravatar item */
.mobile-account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--purple-soft);
  color: var(--head)
}

.ma-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 40px;
  object-fit: cover
}

.ma-avatar--ph {
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--purple)
}

.ma-avatar--ph svg {
  width: 22px;
  height: 22px
}

.ma-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1
}

.ma-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ma-sub {
  font-size: 13px;
  color: var(--muted)
}

.ma-arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--muted)
}

.mobile-links {
  display: flex;
  flex-direction: column;
  margin-top: 20px
}

/* ---- accordion ----
   Panels animate on max-height, so the closed state must be a real 0-height box
   rather than [hidden] - see the [hidden] guards above for why display toggles
   are avoided on this page. Closed panels also get visibility:hidden so their
   links stay out of the tab order and off screen readers. */
.macc {
  border-bottom: 1px solid var(--border)
}

.macc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--head);
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer
}

.macc-caret {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--muted);
  transition: transform .25s var(--ease)
}

.macc.open > .macc-trigger > .macc-caret {
  transform: rotate(180deg)
}

.macc.open > .macc-trigger {
  color: var(--purple)
}

.macc-panel {
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height .32s var(--ease), visibility .32s var(--ease);
  display: flex;
  flex-direction: column
}

.macc.open > .macc-panel {
  visibility: visible
}

.macc-panel > a,
.macc-panel > .macc-soon {
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--border)
}

.macc-panel > a:hover {
  color: var(--purple);
  border-left-color: var(--purple)
}

.macc-panel > .macc-soon {
  color: var(--muted);
  font-weight: 500
}

/* the funnel entry point for the group - visually the primary item */
.macc-panel > a.macc-lead {
  color: var(--purple);
  font-weight: 800;
  border-left-color: var(--purple)
}

/* one level deeper: "All Funding Solutions" / "Industry Specific Loans" */
.macc--sub {
  border-bottom: 0;
  margin-left: 14px;
  border-left: 2px solid var(--border)
}

.macc--sub > .macc-trigger {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 10px 0 10px 14px
}

.macc--sub .macc-caret {
  width: 16px;
  height: 16px;
  flex: 0 0 16px
}

.macc--sub .macc-panel > a {
  font-weight: 500;
  font-size: 14px;
  padding-left: 26px;
  border-left: 0
}

.macc--sub .macc-panel > a:first-child {
  font-weight: 700
}

.macc-panel > .macc:last-child,
.macc-panel > :last-child {
  margin-bottom: 6px
}

.mobile-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px
}

/* ---- desktop: the same menu as a dropdown anchored under the hamburger ----
   The hamburger is this page's only nav at every width, so
   above the mobile breakpoint the full-screen takeover is wrong - it becomes a
   card pinned to the top right instead. `right` tracks the nav's own gutter:
   the .wrap is centred at --maxw, so once the viewport is wider than that the
   content edge sits half the overflow further in. */
@media(min-width:721px) {
  .mobile-menu {
    inset: auto;
    position: fixed;
    top: 76px;
    right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
    width: 360px;
    max-height: calc(100vh - 96px);
    padding: 8px 20px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    opacity: 0;
    transition: transform .22s var(--ease), opacity .22s var(--ease), visibility .22s var(--ease)
  }

  .mobile-menu.open {
    transform: translateY(0) scale(1);
    opacity: 1
  }

  /* the logo is right there in the nav, and the hamburger toggles */
  .mobile-top {
    display: none
  }

  .mobile-account {
    margin-top: 12px
  }

  .mobile-links {
    margin-top: 12px
  }

  .macc-trigger {
    font-size: 16px;
    padding: 12px 0
  }

  /* margin-top:auto gives no gap once the column is content-height */
  .mobile-cta {
    margin-top: 16px;
    padding-bottom: 4px
  }
}

/* ============ HERO ============ */
.hero {
  padding: 72px 0 40px;
  position: relative
}

.hero .wrap,
.hero-copy,
.matcher-wrap {
  position: relative;
  z-index: 1
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center
}

.hero h1 {
  /* Capped so "Become Unstoppable" (~10em, the longest rotator line) fits the
     hero column on one line */
  font-size: clamp(30px, calc(5vw - 6px), 60px);
  margin: 20px 0 24px;
  letter-spacing: -0.03em
}

.hero-rot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .04em .22em
}

/* "Helping Millions" keeps its own line; "Become <word>" shares the next */
.hero-rot>span:first-child {
  flex: 0 0 100%
}

/* Both words sit in one grid cell during a swap, so the outgoing word can drop
   out while the incoming one drops in, with no gap between them. */
.rotator {
  display: inline-grid;
  line-height: 1.05;
  overflow: hidden
}

.rotator-word {
  grid-area: 1 / 1;
  color: var(--purple);
  white-space: nowrap;
  transition: transform .5s var(--ease)
}

.hero-lede {
  font-size: 19px;
  color: var(--muted);
  max-width: 460px;
  margin-bottom: 28px
}

/* matcher card */
.matcher {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 28px
}

.matcher-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--head);
  margin-bottom: 14px
}

.matcher-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px
}

.matcher-opt {
  display: grid;
  grid-template-columns: 40px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  transition: border-color .15s, background .15s
}

.matcher-opt:hover {
  border-color: var(--purple)
}

.matcher-opt.on {
  border-color: var(--purple);
  background: var(--purple-soft)
}

.matcher-opt .ico {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--purple-soft);
  display: grid;
  place-items: center;
  color: var(--purple)
}

.matcher-opt.on .ico {
  background: var(--purple);
  color: #fff
}

.matcher-opt .ico svg {
  width: 22px;
  height: 22px
}

.matcher-opt-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--head)
}

.matcher-opt-sub {
  font-size: 13px;
  color: var(--muted)
}

.matcher-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center
}

.matcher-opt.on .matcher-radio {
  border-color: var(--purple)
}

.matcher-opt.on .matcher-radio::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--purple)
}

.matcher-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px
}

.chip {
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  transition: .15s
}

.chip:hover {
  border-color: var(--purple)
}

.chip.on {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff
}

.matcher-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted)
}

.matcher-foot svg {
  width: 14px;
  height: 14px;
  color: var(--mint)
}

/* chip for a service with no funnel live yet - mirrors .fb-chip.soon */
.chip.soon {
  position: relative
}

.chip.soon::after {
  content: "soon";
  position: absolute;
  top: -7px;
  right: -5px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--purple-2, #8b3dff);
  color: #fff;
  padding: 2px 5px;
  border-radius: 999px
}

.chip.on.soon::after {
  background: var(--dark)
}

/* CTA parked in its coming-soon state */
.btn.is-soon {
  background: var(--cream);
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: default
}

.btn.is-soon:hover {
  transform: none;
  filter: none;
  box-shadow: none
}

.btn.is-soon::after,
.btn.is-soon svg {
  display: none
}

.matcher-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--purple-soft);
  border: 1px solid #e2d3fb;
  font-size: 13px;
  line-height: 1.45;
  color: var(--head);
  text-align: left
}

.matcher-note svg {
  width: 15px;
  height: 15px;
  color: var(--purple);
  flex: none;
  margin-top: 2px
}

/* an author `display` beats the UA [hidden] rule - restore it for elements we toggle */
.matcher-note[hidden],
.fitboard [hidden] {
  display: none !important
}

/* ============ TRUST STATS ============ */
.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--cream)
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.stat {
  padding: 36px var(--gutter);
  border-right: 1px solid var(--border)
}

.stat:last-child {
  border-right: none
}

.stat-n {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--head)
}

.stat-l {
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px
}

/* ============ SECTION SHELL ============ */
.section {
  padding: 72px 0
}

#verticals {
  padding-top: 56px;
  padding-bottom: 64px
}

#how {
  padding-top: 64px
}

#verticals .section-head {
  max-width: none
}

#verticals .section-head h2,
.momentum .section-head h2 {
  white-space: nowrap
}

@media(max-width:720px) {
  #verticals .section-head h2,
  .momentum .section-head h2 {
    white-space: normal
  }
}

.section.cream {
  background: var(--cream)
}

.section-head {
  max-width: 640px;
  margin-bottom: 40px
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.section-head h2 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 16px 0 0
}

.section-head p {
  font-size: 18px;
  color: var(--muted);
  margin-top: 16px
}

/* ============ VERTICAL CARDS ============ */
.verts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.vert {
  border-radius: 16px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  position: relative;
  overflow: hidden
}

.vert:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(29, 9, 59, .14)
}

.vert-ico {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  transition: transform .25s var(--ease)
}

.vert:hover .vert-ico {
  transform: rotate(-4deg) scale(1.04)
}

.vert-ico svg {
  width: 28px;
  height: 28px
}

.vert h3 {
  font-size: 25px;
  letter-spacing: -0.03em
}

.vert p {
  font-size: 15px;
  line-height: 1.55
}

.vert-count {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 2px
}

.vert-count strong {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1
}

.vert-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto
}

.vert-tag {
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 12px;
  border: 1px solid transparent
}

.vert-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 6px
}

.vert-cta svg {
  width: 17px;
  height: 17px;
  transition: transform .18s var(--ease)
}

.vert:hover .vert-cta svg {
  transform: translateX(5px)
}

/* card 1 - soft lavender */
.vert--lav {
  background: var(--purple-soft)
}

.vert--lav h3 {
  color: var(--head)
}

.vert--lav p {
  color: var(--muted)
}

.vert--lav .vert-ico {
  background: var(--purple);
  color: #fff
}

.vert--lav .vert-count {
  color: var(--muted)
}

.vert--lav .vert-count strong {
  color: var(--purple)
}

.vert--lav .vert-tag {
  color: var(--purple);
  border-color: #e2d3fb;
  background: #fff
}

.vert--lav .vert-cta {
  color: var(--purple)
}

/* card 2 - lime */
.vert--lime {
  background: var(--lime)
}

.vert--lime h3 {
  color: var(--dark)
}

.vert--lime p {
  color: #3a2b12
}

.vert--lime .vert-ico {
  background: var(--dark);
  color: var(--lime)
}

.vert--lime .vert-count {
  color: #4a3a1a
}

.vert--lime .vert-count strong {
  color: var(--dark)
}

.vert--lime .vert-tag {
  color: var(--dark);
  border-color: rgba(29, 9, 59, .22)
}

.vert--lime .vert-cta {
  color: var(--dark)
}

/* card 3 - purple */
.vert--purple {
  background: var(--purple)
}

.vert--purple h3 {
  color: #fff
}

.vert--purple p {
  color: rgba(255, 255, 255, .82)
}

.vert--purple .vert-ico {
  background: var(--lime);
  color: var(--dark)
}

.vert--purple .vert-count {
  color: rgba(255, 255, 255, .72)
}

.vert--purple .vert-count strong {
  color: var(--lime)
}

.vert--purple .vert-tag {
  color: #fff;
  border-color: rgba(255, 255, 255, .28)
}

.vert--purple .vert-tag.soon {
  color: rgba(255, 255, 255, .7)
}

.vert--purple .vert-cta {
  color: var(--lime)
}

/* ============ HOW IT WORKS ============ */
.how-chain {
  display: block;
  max-width: none
}

#how .section-head {
  max-width: 960px
}

.how-arrow {
  color: var(--purple);
  font-weight: 400
}

.how-lede {
  font-size: 16px;
  color: var(--muted);
  margin-top: 14px;
  max-width: 560px
}

.howflow {
  position: relative
}

.howtrack {
  position: relative;
  height: 12px;
  margin: 0 12.5% 18px;
  display: none
}

@media(min-width:1025px) {
  .howtrack {
    display: block
  }
}

.howtrack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: var(--border)
}

.howtrack-fill {
  position: absolute;
  left: 0;
  top: 5px;
  height: 2px;
  background: var(--purple);
  width: 0;
  transition: width .9s var(--ease)
}

.howdot {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  box-sizing: border-box;
  transition: background .3s, border-color .3s;
  transform: translateX(-50%)
}

.howdot[data-i="0"] {
  left: 0;
  transform: none
}

.howdot[data-i="1"] {
  left: 33.33%
}

.howdot[data-i="2"] {
  left: 66.66%
}

.howdot[data-i="3"] {
  left: 100%;
  transform: translateX(-100%)
}

.howdot.done,
.howdot.now {
  background: var(--purple);
  border-color: var(--purple)
}

.howdot.now {
  box-shadow: 0 0 0 5px rgba(101, 20, 221, .18)
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 30px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s, border-color .4s;
  cursor: default
}

.step-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.step-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
  transition: color .4s
}

.step-state {
  display: grid;
  place-items: center
}

.step-check,
.step-now {
  grid-area: 1/1;
  opacity: 0;
  transition: opacity .3s
}

.step-check {
  width: 18px;
  height: 18px;
  color: var(--purple)
}

.step-now {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--lime);
  color: var(--dark);
  padding: 3px 9px;
  border-radius: 999px
}

.step.done .step-check {
  opacity: 1
}

.step.now .step-now {
  opacity: 1
}

.step.now {
  background: var(--dark);
  border-color: var(--dark);
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(29, 9, 59, .3)
}

.step.now h3 {
  color: #fff
}

.step.now p {
  color: rgba(255, 255, 255, .7)
}

.step.now .step-num {
  color: var(--lime)
}

.step.done {
  background: var(--purple-soft);
  border-color: rgba(101, 20, 221, .25)
}

.step h3 {
  font-size: 19px;
  transition: color .4s
}

.step p {
  font-size: 15px;
  color: var(--muted);
  transition: color .4s
}

/* ============ OFFER WALL ============ */
.wall-shell {
  max-width: 1000px;
  margin: 0 auto
}

.wall-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 5px;
  border-radius: 12px;
  margin-bottom: 24px
}

.wall-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  transition: .15s
}

.wall-tab svg {
  width: 16px;
  height: 16px
}

.wall-tab.on {
  background: #fff;
  color: var(--head);
  box-shadow: 0 1px 4px rgba(57, 56, 57, .1)
}

.wall-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow)
}

.wall-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap
}

.wall-hd-t {
  font-size: 22px;
  font-weight: 800;
  color: var(--head)
}

.wall-hd-s {
  font-size: 14px;
  color: var(--muted)
}

.wall-hd-meta {
  font-size: 13px;
  color: var(--muted);
  text-align: right
}

.wall-row {
  display: grid;
  grid-template-columns: 30px 46px 1fr auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  transition: background .15s
}

.wall-row:last-child {
  border-bottom: none
}

.wall-row:hover {
  background: var(--cream)
}

.wall-row.top {
  background: var(--purple-soft)
}

.wall-row.top:hover {
  background: #f4ecff
}

.wall-rank {
  font-weight: 800;
  font-size: 16px;
  color: var(--muted);
  text-align: center
}

.wall-row.top .wall-rank {
  color: var(--purple)
}

.wall-logo {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em
}

.wall-name {
  font-weight: 700;
  font-size: 16px;
  color: var(--head);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.wall-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff
}

.wall-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px
}

.wall-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--head);
  font-weight: 600
}

.wall-stars svg {
  width: 13px;
  height: 13px;
  color: #f5b301
}

.wall-rate {
  font-size: 19px;
  font-weight: 800;
  color: var(--head);
  letter-spacing: -0.02em;
  text-align: right
}

.wall-rate small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0
}

.wall-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #1f9e6f;
  background: var(--mint-bg);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap
}

.wall-pill svg {
  width: 13px;
  height: 13px
}

.wall-view {
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--head);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: .15s
}

.wall-row.top .wall-view {
  background: var(--purple)
}

.wall-view:hover {
  transform: translateY(-1px)
}

.wall-ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 28px;
  background: var(--cream);
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap
}

/* ============ PILLARS ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px
}

.pillar-n {
  font-size: 15px;
  font-weight: 800;
  color: var(--purple);
  margin-bottom: 14px
}

.pillar h3 {
  font-size: 26px;
  margin-bottom: 10px
}

.pillar p {
  font-size: 16px;
  color: var(--muted)
}

/* ============ MOMENTUM RAILS ============ */
.momentum {
  padding: 72px 0 80px;
  overflow: hidden;
  background: var(--cream)
}

.momentum .section-head {
  max-width: none;
  margin-bottom: 36px
}

.rails {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.rail {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform
}

.rail[data-dir="-1"] {
  align-self: flex-end
}

.rail-card {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 7px 20px rgba(57, 56, 57, .05)
}

.rail-card b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--head)
}

.rail-card>span:nth-of-type(2) {
  font-size: 13.5px;
  color: var(--muted)
}

.rail-person {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--head);
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px dashed var(--border)
}

.rail-person svg {
  width: 13px;
  height: 13px;
  color: #0a7d5c;
  flex: none
}

.rail-verified {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #0a7d5c;
  margin-top: 2px
}

.rail-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 4px
}

.rail-tag.biz {
  background: var(--purple-soft);
  color: var(--purple)
}

.rail-tag.per {
  background: rgba(72, 226, 172, .16);
  color: #0a7d5c
}

.rail-tag.home {
  background: var(--lime);
  color: var(--dark)
}

@media(max-width:720px) {
  .momentum {
    padding: 72px 0
  }
}

/* ============ MANIFESTO (dark) ============ */
.manifesto {
  background: var(--dark);
  color: #fff;
  padding: 88px 0
}

.manifesto .eyebrow {
  color: var(--lime)
}

.manifesto .eyebrow .dot {
  background: var(--lime)
}

.manifesto h2 {
  color: #fff;
  font-size: clamp(30px, 3.6vw, 46px);
  max-width: 900px;
  margin: 18px 0 56px
}

.manifesto h2 .lime {
  color: var(--lime)
}

.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px
}

.mf-pt {
  border-top: 2px solid rgba(255, 255, 255, .15);
  padding-top: 20px
}

.mf-pt strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px
}

.mf-pt p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .6)
}

/* ============ PRESS STRIP ============ */
.pressbar {
  padding: 52px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--cream);
  overflow: hidden
}

.pressbar-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 26px
}

.pressbar .marquee-vp {
  width: 100%
}

.pressbar .marquee-track {
  align-items: center;
  animation-duration: 38s
}

.press-name {
  flex: none;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #c3c1cb;
  padding: 0 30px;
  white-space: nowrap;
  transition: color .2s var(--ease), transform .2s var(--ease)
}

.press-name:hover {
  color: var(--dark);
  transform: translateY(-1px)
}

@media(max-width:720px) {
  .press-name {
    font-size: 20px;
    padding: 0 20px
  }
}

/* ============ PARTNERS MARQUEE ============ */
.partners {
  padding: 104px 0;
  overflow: hidden
}

.partners .section-head {
  margin-bottom: 44px
}

.marquee-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px
}

.marquee-row:last-child {
  margin-bottom: 0
}

.marquee-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 8px 15px;
  border-radius: 999px
}

.marquee-label.biz {
  background: var(--purple-soft);
  color: var(--purple)
}

.marquee-label.per {
  background: var(--lime);
  color: var(--dark)
}

.marquee-label.hom {
  background: var(--dark);
  color: var(--lime)
}

.marquee-vp {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
}

.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding-right: 14px;
  animation: marq var(--dur, 42s) linear infinite;
  will-change: transform
}

.marquee-row.rev .marquee-track {
  animation-direction: reverse
}

.marquee-vp:hover .marquee-track {
  animation-play-state: paused
}

@keyframes marq {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.plogo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--head);
  white-space: nowrap;
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s
}

.plogo:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow)
}

.plogo .pdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--purple));
  flex: none
}

@media(max-width:720px) {
  .partners {
    padding: 64px 0
  }

  .marquee-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }

  .marquee-label {
    margin-left: 20px
  }

  .marquee-vp {
    width: 100%
  }

  .plogo {
    font-size: 16px;
    padding: 12px 18px
  }
}

@media(prefers-reduced-motion:reduce) {
  .marquee-track {
    animation: none
  }

  .marquee-vp {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none
  }
}

/* ============ FINAL CTA ============ */
.finalcta {
  background: var(--purple-soft);
  padding: 80px 0
}

.finalcta-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center
}

.finalcta h2 {
  font-size: clamp(32px, 4vw, 52px)
}

.finalcta p {
  font-size: 19px;
  color: var(--muted);
  margin: 18px 0 32px
}

.finalcta-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

/* ============ FOOTER ============ */
.footer {
  background: var(--dark);
  color: #fff;
  padding: 80px 0 40px
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 2fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.footer-logo {
  height: 32px;
  filter: brightness(0) invert(1);
  margin-bottom: 18px
}

.footer-tag {
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
  max-width: 320px
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px
}

.footer-cols h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 16px
}

.footer-cols a {
  display: block;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .8);
  padding: 5px 0;
  transition: color .15s
}

/* scoped so the "soon" items below opt out rather than fighting an override */
.footer-cols a:not([aria-disabled="true"]):hover {
  color: var(--lime)
}

/* not navigable yet: no hover shift, no pointer, no transition flicker */
.footer-cols a[aria-disabled="true"] {
  cursor: default;
  transition: none
}

/* SEO link row: the money pages the homepage would otherwise stop linking to.
   Slugs are .htaccess RewriteRules WITHOUT QSA - keep them bare and keep the
   trailing slash, or they 301. */
.footer-industry {
  padding-top: 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.footer-industry h5 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45);
  margin-bottom: 14px
}

.footer-industry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 24px
}

.footer-industry-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  transition: color .15s
}

.footer-industry-links a:hover {
  color: var(--lime)
}

.footer-legal {
  padding-top: 32px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .4);
  line-height: 1.7;
  max-width: 900px
}

/* ============ LIVE ENGINE (dark) ============ */
.le-lede {
  font-size: 16px;
  color: rgba(255, 255, 255, .65);
  margin-top: 14px;
  max-width: 560px
}

.le-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 28px;
  margin-top: 40px
}

.le-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 10px
}

.le-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime)
}

.le-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  animation: lepulse 1.6s infinite
}

@keyframes lepulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(204, 255, 0, .5)
  }

  50% {
    box-shadow: 0 0 0 6px rgba(204, 255, 0, 0)
  }
}

.le-session {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums
}

.le-grid {
  display: grid;
  grid-template-columns: 1fr 170px 1.15fr;
  gap: 28px;
  align-items: start
}

.le-col-label,
.le-mid-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 14px
}

.le-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px
}

.le-sig {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 12px;
  opacity: .35;
  transition: all .4s var(--ease)
}

.le-sig.on {
  opacity: 1;
  border-color: rgba(150, 78, 255, .6);
  background: rgba(101, 20, 221, .3);
  color: #fff
}

.le-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 6px
}

.le-mid-label {
  margin-bottom: 0
}

.le-core {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  display: grid;
  place-items: center
}

.le-core svg {
  width: 36px;
  height: 36px;
  animation: lespin 9s linear infinite
}

@keyframes lespin {
  to {
    transform: rotate(360deg)
  }
}

.le-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(150, 78, 255, .5);
  animation: lering 2.2s var(--ease) infinite
}

@keyframes lering {
  0% {
    transform: scale(.92);
    opacity: 1
  }

  100% {
    transform: scale(1.25);
    opacity: 0
  }
}

.le-fit {
  font-size: 22px;
  font-weight: 800;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em
}

.le-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.le-row:last-child {
  border-bottom: none
}

.le-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff
}

.le-row.top .le-name {
  color: var(--lime)
}

.le-bar {
  position: relative;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  margin-top: 6px;
  overflow: hidden
}

.le-bar i {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #964eff, var(--lime));
  transition: width 1s var(--ease)
}

.le-score {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, .6);
  font-variant-numeric: tabular-nums
}

.le-row.top .le-score {
  color: var(--lime)
}

.le-ticker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .65)
}

.le-ticker-label {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--lime);
  padding: 4px 10px;
  border-radius: 999px
}

#leTicker {
  transition: opacity .3s var(--ease)
}

@media(max-width:1024px) {
  .le-grid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .le-mid {
    flex-direction: row;
    justify-content: flex-start
  }
}

@media(prefers-reduced-motion:reduce) {

  .le-core svg,
  .le-ring,
  .le-pulse {
    animation: none !important
  }

  .le-sig {
    opacity: 1
  }
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.reveal.in {
  opacity: 1;
  transform: none
}

/* ============ RESPONSIVE ============ */

/* ---- Sign in + "Partner with us": header on desktop, menu on mobile ----
   Both sets exist in the DOM at all times and are driven by the same $account,
   so they cannot disagree; only one set is ever visible. 720px is the same
   boundary the menu itself uses to switch between full-screen sheet and
   dropdown, so the header and the menu always change together.
   .menu-only marks the menu's two "Partner with us" triggers (the Company-group
   link and the CTA button); the account row is .mobile-account. */
@media(min-width:721px) {

  .mobile-account,
  .menu-only {
    display: none
  }
}

/* Below this a 158px button plus a 159px logo cannot share the row - they met
   with zero gap at 390px and the logo absorbed all the shrink. The menu carries
   both instead. */
@media(max-width:720px) {

  .nav-signin,
  .nav-right .btn-purple {
    display: none
  }

  .nav-right {
    gap: 12px
  }
}

/* ---- momentum rails: swipeable strips on mobile ----
   Each rail is ~1500px of cards inside a 390px viewport, clipped by
   .momentum's overflow:hidden and positioned only by page scroll - so 6 of the
   10 cards could not be reached at all on a phone. Below 721px each rail
   becomes its own scroll container instead. Deliberately NOT a dots carousel:
   these are unordered proof cards, not the four ordered steps in #how.
   The JS drops its transform here - a translate and a scrollLeft cannot both
   drive the same element (see the `carousel` guard in become-site.js). */
@media(max-width:720px) {
  .rails {
    gap: 12px
  }

  .rail {
    width: auto;
    overflow-x: auto;
    /* no scroll-snap: it fights the ticker's continuous scrollLeft, yanking
       the rail back to a card edge on every frame */
    padding: 4px var(--gutter);
    gap: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: auto;
    will-change: scroll-position
  }

  .rail::-webkit-scrollbar {
    display: none
  }

  /* align-self:flex-end offset the second rail when it was max-content wide;
     as a scroll container it is full width, so the stagger that keeps the two
     rows reading as a wall comes from extra lead-in padding instead. Doing it
     with padding rather than an initial scrollLeft means nothing is sliced off
     the left edge at rest. */
  .rail[data-dir="-1"] {
    align-self: auto;
    padding-left: calc(var(--gutter) + 56px)
  }

  .rail-card {
    width: 78vw;
    max-width: 320px;
    padding: 16px 18px
  }
}

/* ---- how-it-works: a swipeable carousel on mobile ----
   A 2x2 grid of four cards is unreadable on a phone, so below 720px .steps
   becomes one scroll-snapped row: a card per view with the next one peeking, and
   the .howtrack dots - hidden between 721 and 1024 - come back as pagination.
   The section bleeds through the .wrap gutter so a card can sit edge to edge. */
@media(max-width:720px) {
  .howflow {
    /* cancel the .wrap gutter so the row can scroll off both edges */
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1)
  }

  .steps {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px var(--gutter) 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .steps::-webkit-scrollbar {
    display: none
  }

  .step {
    flex: 0 0 82%;
    scroll-snap-align: center;
    padding: 22px 22px 26px
  }

  /* pagination, driven by the same setStep() as the desktop track */
  .howtrack {
    display: flex;
    justify-content: center;
    gap: 8px;
    height: auto;
    margin: 0 0 16px
  }

  .howtrack::before,
  .howtrack-fill {
    display: none
  }

  /* The desktop dots are absolutely placed along the track by per-index rules
     (.howdot[data-i="3"] etc). Those are (0,2,0), so a bare .howdot here would
     lose and dot 4 would keep its translateX(-100%) and render left of dot 3 -
     match the attribute to outrank them. */
  .howtrack .howdot[data-i] {
    position: static;
    left: auto;
    transform: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    cursor: pointer;
    transition: width .3s var(--ease), background .3s, border-color .3s
  }

  .howtrack .howdot[data-i].now {
    width: 22px;
    box-shadow: none
  }
}

/* All three chip sets are exactly 4 wide and total ~316px at their desktop
   size, so the 4th chip orphaned onto its own line wherever the row was
   narrower than that. Two separate bands hit it: below 720px the card spans the
   viewport (~292px of row at 390px), and from 721px to ~900px the matcher is
   still in the hero's narrow second column (~271px of row at 768px). Lay the
   chips out as one 4-up grid instead of a wrapping flex row across both, and
   buy the width back from the gap and the chip padding.
   Below 360px even that is not enough for "Insurance", so fall back to 2x2 -
   a balanced pair of rows rather than a 3+1 orphan. */
@media(max-width:1024px) {
  .matcher {
    padding: 20px
  }

  .matcher-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px
  }

  .chip {
    padding: 10px 4px;
    font-size: 13px;
    text-align: center
  }
}

/* The tightest row on the page: the matcher is still in the hero's second
   column here, so each cell is ~63px and "Insurance" overflowed it. */
@media(min-width:721px) and (max-width:900px) {
  .chip {
    font-size: 12px;
    padding: 10px 2px;
    letter-spacing: -0.01em
  }
}

@media(max-width:359px) {
  .matcher-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:1024px) {
  .verts,
  .pillars {
    grid-template-columns: 1fr
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 24px
  }

  .manifesto-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px
  }
}

@media(max-width:720px) {
  :root {
    --gutter: 20px
  }

  /* Both of these buy vertical space so more of the matcher card clears the
     fold: 40px of hero padding plus the h1's own 20px top margin put 60px of
     nothing between the nav and "Helping Millions". */
  .hero {
    padding: 12px 0 48px
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  /* Sized so "Become Unstoppable" fits on one line of a 320px column */
  .hero h1 {
    margin: 4px 0 16px;
    font-size: clamp(26px, 8.2vw, 48px)
  }

  .hero-lede {
    max-width: none;
    margin-bottom: 0
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .stat {
    border-bottom: 1px solid var(--border)
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-bottom: none
  }

  .stat:nth-child(even) {
    border-right: none
  }

  .section {
    padding: 56px 0
  }

  .manifesto,
  .finalcta {
    padding: 56px 0
  }

  .manifesto-grid,
  .footer-cols {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .wall-row {
    grid-template-columns: 26px 40px 1fr;
    gap: 12px;
    row-gap: 10px
  }

  .wall-rate {
    grid-column: 2/-1;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 8px
  }

  .wall-rate small {
    display: inline
  }

  .wall-pill {
    grid-column: 2/-1;
    justify-self: start
  }

  .wall-view {
    grid-column: 2/-1;
    justify-self: start
  }

  .stat-n {
    font-size: 30px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
  }

  .rail {
    transform: none !important
  }

  .btn::after {
    display: none
  }

  .impact-bar {
    transition: none !important
  }

  .btn,
  .vert,
  .wall-view {
    transition: none !important
  }
}

/* ============ IMPACT STATS (creative) ============ */
.impact {
  padding: 48px 0 56px
}

.impact-head {
  max-width: 660px;
  margin-bottom: 36px
}

.impact-head h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.03em;
  margin-top: 16px
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px
}

.impact-stat {
  position: relative;
  padding: 30px 26px;
  border-radius: 16px;
  background: var(--purple-soft);
  overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease)
}

.impact-stat:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(29, 9, 59, .15)
}

.impact-n {
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(105deg, var(--purple), #964eff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums
}

.impact-bar {
  height: 4px;
  width: 34px;
  border-radius: 999px;
  background: var(--lime);
  margin: 16px 0 14px;
  transition: width .8s var(--ease)
}

.impact-stat.in .impact-bar {
  width: 66px
}

.impact-l {
  font-size: 14.5px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45
}

.impact-stat:nth-child(4) {
  background: var(--dark)
}

.impact-stat:nth-child(4) .impact-n {
  background: none;
  color: var(--lime);
  -webkit-text-fill-color: var(--lime)
}

.impact-stat:nth-child(4) .impact-l {
  color: rgba(255, 255, 255, .72)
}

.impact-stat:nth-child(4) .impact-bar {
  background: #fff
}

@media(max-width:1024px) {
  .impact-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:720px) {
  .impact {
    padding: 72px 0
  }
}

@media(max-width:520px) {
  .impact-grid {
    grid-template-columns: 1fr
  }
}

/* ============ PRESS - featured cards ============ */
.pressfeat {
  padding: 72px 0
}

.pressfeat-head {
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center
}

.pressfeat-head h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.03em;
  margin-top: 16px
}

.pressfeat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.pressfeat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s
}

.pressfeat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(101, 20, 221, .06) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none
}

.pressfeat-card:hover::after {
  transform: translateX(120%)
}

.pressfeat-card:hover {
  transform: translateY(-6px);
  border-color: var(--purple);
  box-shadow: 0 20px 44px rgba(29, 9, 59, .14)
}

.pressfeat-mast {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 20px 0
}

.pressfeat-pub {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--head)
}

.pressfeat-meta {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted)
}

.pressfeat-body {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1
}

.pressfeat-quote {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1
}

.pressfeat-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: color .2s
}

.pressfeat-card:hover .pressfeat-go {
  color: var(--purple)
}

.pressfeat-go svg {
  width: 15px;
  height: 15px;
  transition: transform .2s var(--ease)
}

.pressfeat-card:hover .pressfeat-go svg {
  transform: translateX(4px)
}

@media(max-width:1024px) {
  .pressfeat-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:720px) {
  .pressfeat {
    padding: 64px 0
  }

  .pressfeat-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:420px) {
  .pressfeat-grid {
    grid-template-columns: 1fr
  }
}

/* press carousel (auto-scrolling marquee of cards) */
.pressfeat .marquee-vp {
  margin-top: 4px
}

.pressfeat .marquee-track {
  gap: 18px;
  animation-duration: 52s
}

.pressfeat .marquee-track .pressfeat-card {
  width: 288px;
  flex: none;
  margin: 6px 0
}

/* ============ TRUSTPILOT ============ */
/* Reviews come from the official Trustpilot TrustBox (Grid) widget, which injects its
   own iframe - so this section only needs its shell. The previous hand-built rating
   card and review cards were removed: presenting our own markup as Trustpilot content
   is not permitted by Trustpilot. */
.tp {
  padding: 72px 0;
  background: var(--cream)
}

.tp .trustpilot-widget {
  margin-top: 4px;
  min-height: 500px
}

@media(max-width:720px) {
  .tp {
    padding: 64px 0
  }
}

/* ============ PARTNER NETWORK (neat) ============ */
.pnet-card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--cream);
  padding: 14px 40px;
  margin-top: 8px
}

.pnet-group {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 26px 0;
  border-bottom: 1px solid var(--border)
}

.pnet-group:last-child {
  border-bottom: none
}

.pnet-glabel {
  flex: none;
  width: 120px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--head);
  padding-top: 7px
}

.pnet-glabel span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px
}

.pnet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.pchip {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 17px;
  transition: color .18s, border-color .18s, transform .18s var(--ease), box-shadow .18s
}

.pchip:hover {
  color: var(--purple);
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(101, 20, 221, .12))
}

@media(max-width:720px) {
  .pnet-card {
    padding: 8px 22px
  }

  .pnet-group {
    flex-direction: column;
    gap: 12px
  }

  .pnet-glabel {
    width: auto;
    padding-top: 0
  }
}

/* ============ FIT BOARD ============ */
.fitboard {
  display: grid;
  grid-template-columns: 300px 1fr;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  max-width: 1000px;
  margin: 0 auto
}

.fb-console {
  background: var(--dark);
  color: #fff;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 26px
}

.fb-step-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px
}

.fb-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none
}

.fb-seg {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.fb-seg-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-align: left;
  transition: background .18s, color .18s, transform .18s var(--ease)
}

.fb-seg-opt svg {
  width: 20px;
  height: 20px;
  flex: none
}

.fb-seg-opt:hover {
  background: rgba(255, 255, 255, .12)
}

.fb-seg-opt.on {
  background: var(--lime);
  color: var(--dark)
}

.fb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.fb-chip {
  position: relative;
  padding: 9px 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  transition: background .18s, color .18s
}

.fb-chip:hover {
  background: rgba(255, 255, 255, .14)
}

.fb-chip.on {
  background: #fff;
  color: var(--dark)
}

.fb-chip.soon {
  opacity: .6
}

.fb-chip.soon::after {
  content: "soon";
  position: absolute;
  top: -7px;
  right: -5px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--purple-2, #8b3dff);
  color: #fff;
  padding: 2px 5px;
  border-radius: 999px
}

.fb-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.5;
  margin-top: auto
}

.fb-ladder {
  position: relative;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.fb-ladder-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap
}

.fb-ctx {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--head)
}

.fb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted)
}

.fb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint)
}

.fb-status.busy .fb-dot {
  background: var(--purple)
}

.fb-status.settled .fb-dot {
  animation: fbpulse 1.6s var(--ease)
}

@keyframes fbpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 226, 172, .5)
  }

  100% {
    box-shadow: 0 0 0 8px rgba(72, 226, 172, 0)
  }
}

.fb-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1
}

.fb-row {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  will-change: transform
}

.fb-row:hover,
.fb-row:focus-visible,
.fb-row.open {
  border-color: var(--purple);
  box-shadow: 0 2px 8px rgba(101, 20, 221, .12);
  outline: none
}

.fb-row.top {
  background: linear-gradient(90deg, rgba(101, 20, 221, .055), transparent)
}

.fb-row-main {
  display: grid;
  grid-template-columns: 22px 42px 1fr 150px auto;
  align-items: center;
  gap: 14px
}

.fb-rank {
  font-weight: 800;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums
}

.fb-row.top .fb-rank {
  color: var(--purple)
}

.fb-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px
}

.fb-logo-img {
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden
}

.fb-logo-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box
}

.fb-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--head);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.fb-flag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--lime);
  color: var(--dark);
  padding: 3px 8px;
  border-radius: 999px
}

.fb-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px
}

.fb-score-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px
}

.fb-score-top b {
  color: var(--purple);
  font-variant-numeric: tabular-nums
}

.fb-bar {
  height: 7px;
  border-radius: 999px;
  background: #ece9f4;
  overflow: hidden
}

.fb-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--purple);
  transition: width .9s var(--ease)
}

.fb-row.top .fb-bar-fill {
  background: linear-gradient(90deg, var(--purple), var(--lime))
}

.fb-rate {
  font-size: 17px;
  font-weight: 800;
  color: var(--head);
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums
}

.fb-rate small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted)
}

.fb-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s var(--ease), opacity .3s var(--ease), margin-top .3s var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px
}

.fb-row:hover .fb-detail,
.fb-row:focus-visible .fb-detail,
.fb-row.open .fb-detail {
  max-height: 80px;
  opacity: 1;
  margin-top: 11px
}

.fb-detail-label {
  font-weight: 700;
  color: var(--head)
}

/* The wrapper had no rules at all, so the pills were adjacent inline spans with
   nothing between them. Its own row also has to wrap, or a long factor list
   pushes past the card on a narrow screen. */
.fb-factors {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0
}

/* inline-flex, not inline: vertical padding on an inline box does not grow the
   line box, so the pill overflowed its parent by ~3px top and bottom and
   .fb-detail's overflow:hidden sliced the rounded border off */
.fb-factor {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1.45;
  background: var(--purple-soft);
  color: var(--purple);
  border: 1px solid #e2d3fb;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600
}

/* Narrow cards wrap the factors onto 2-3 lines, which needs up to ~118px
   against the 80px cap above. Raised only here: the cap is what the open state
   animates to, so lifting it on desktop - where the row is a single 26px line -
   would make the reveal finish in the first fraction of the transition. */
@media(max-width:720px) {

  .fb-row:hover .fb-detail,
  .fb-row:focus-visible .fb-detail,
  .fb-row.open .fb-detail {
    max-height: 160px
  }
}

.fb-foot {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px
}

/* opens the shared #termsModal on /blog/advertising-disclosure/ */
.fb-foot-link {
  color: var(--purple);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px
}

.fb-foot-link:hover {
  text-decoration: none
}

/* shown in place of the ranked rows for a service with no partners live yet */
.fb-soon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 2px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--purple-soft);
  border: 1px solid #e2d3fb;
  font-size: 14px;
  line-height: 1.5;
  color: var(--head)
}

.fb-soon svg {
  width: 20px;
  height: 20px;
  color: var(--purple);
  flex: none;
  margin-top: 1px
}

.fb-soon b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 3px
}

/* with the rows gone the column is mostly empty - centre the panel so it reads as intentional */
.fb-ladder.is-soon {
  justify-content: center
}

.fb-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background: linear-gradient(100deg, transparent 30%, rgba(101, 20, 221, .10) 50%, transparent 70%);
  background-size: 220% 100%
}

.fb-scan.run {
  opacity: 1;
  animation: fbscan .7s var(--ease)
}

@keyframes fbscan {
  from {
    background-position: 160% 0
  }

  to {
    background-position: -60% 0
  }
}

.fb-row.intro {
  opacity: 0;
  transform: translateY(10px)
}

.fb-row.intro.in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease)
}

@media(max-width:780px) {
  .fitboard {
    grid-template-columns: 1fr
  }

  .fb-row-main {
    grid-template-columns: 20px 38px 1fr;
    row-gap: 10px
  }

  .fb-score {
    grid-column: 2/-1
  }

  .fb-rate {
    grid-column: 2/-1;
    text-align: left;
    display: flex;
    gap: 8px;
    align-items: baseline
  }

  .fb-rate small {
    display: inline
  }
}

@media(prefers-reduced-motion:reduce) {

  .fb-bar-fill,
  .fb-row,
  .fb-detail {
    transition: none
  }

  .fb-scan {
    display: none
  }

  .fb-row.intro {
    opacity: 1;
    transform: none
  }
}

/* ============ SCROLL-EXPAND INTRO ============ */
.sx {
  position: relative;
  height: 220vh;
  background: #04030a
}

.sx-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #04030a
}

.sx-media {
  position: relative;
  width: var(--sxw, 360px);
  height: var(--sxh, 460px);
  border-radius: var(--sxr, 22px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  will-change: width, height
}

.sx-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.sx-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 52% 55%, transparent 40%, rgba(4, 3, 10, .55) 100%);
  opacity: var(--sxscrim, .5)
}

.sx-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  padding: 0 24px;
  opacity: var(--sxcenter, 0);
  transition: opacity .3s var(--ease);
  pointer-events: none
}

.sx-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime)
}

.sx-tagline {
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin-top: 14px;
  text-wrap: balance
}

.sx-titles {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  z-index: 3
}

.sx-word {
  font-size: clamp(30px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.02;
  will-change: transform, opacity
}

.sx-word-l {
  transform: translateX(calc(var(--sxsplit, 0) * -1))
}

.sx-word-r {
  transform: translateX(var(--sxsplit, 0));
  color: var(--lime)
}

.sx-titles {
  opacity: var(--sxtitles, 1)
}

.sx-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: var(--sxhint, 1);
  z-index: 4
}

.sx-hint svg {
  width: 20px;
  height: 20px;
  animation: sxbob 1.8s var(--ease) infinite
}

@keyframes sxbob {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(5px)
  }
}

@media(max-width:720px) {
  .sx {
    height: 180vh
  }
}

@media(prefers-reduced-motion:reduce) {
  .sx {
    height: auto
  }

  .sx-stage {
    position: relative;
    height: auto;
    padding: 80px 0
  }

  .sx-media {
    width: min(92vw, 1100px);
    height: auto;
    aspect-ratio: 16/9
  }

  .sx-hint svg {
    animation: none
  }

  .sx-titles {
    position: relative;
    inset: auto;
    margin-bottom: 24px
  }
}

/* ============ PARTNER WITH US ============ */
.partner {
  padding: 72px 0
}

.partner-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow)
}

.partner-left {
  background: var(--dark);
  color: #fff;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.partner-left .eyebrow {
  color: var(--lime)
}

.partner-left .eyebrow .dot {
  background: var(--lime)
}

.partner-left h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 16px 0 18px
}

.partner-left h2 .lime {
  color: var(--lime)
}

.partner-left p {
  font-size: 16.5px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 440px
}

.partner-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.btn-ghost-dark {
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  background: transparent
}

.btn-ghost-dark:hover {
  border-color: var(--lime);
  color: var(--lime)
}

.partner-right {
  background: var(--purple-soft);
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px
}

.partner-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2d3fb
}

.partner-stat:last-child {
  padding-bottom: 0;
  border-bottom: none
}

.partner-stat .pn {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--purple);
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.partner-stat .pl {
  font-size: 14.5px;
  color: var(--muted);
  font-weight: 600
}

@media(max-width:820px) {
  .partner {
    padding: 56px 0
  }

  .partner-card {
    grid-template-columns: 1fr
  }

  .partner-left,
  .partner-right {
    padding: 40px 28px
  }
}

/* ============ PARTNER CONTACT MODAL ============ */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto
}

.pmodal[hidden] {
  display: none !important
}

.pmodal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 9, 59, .55);
  backdrop-filter: blur(3px);
  animation: pmFade .22s var(--ease)
}

.pmodal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(29, 9, 59, .32);
  padding: 34px 34px 28px;
  animation: pmIn .28s var(--ease)
}

@keyframes pmFade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes pmIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.pmodal-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s
}

.pmodal-x:hover {
  background: var(--cream);
  color: var(--head)
}

.pmodal-head {
  margin-bottom: 22px;
  padding-right: 34px
}

.pmodal-head h2 {
  font-size: clamp(24px, 3vw, 31px);
  margin: 14px 0 10px
}

.pmodal-head p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5
}

.pmodal-form {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.pm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.pm-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.pm-field>span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--head);
  letter-spacing: .01em
}

.pm-field>span i {
  color: var(--purple);
  font-style: normal
}

.pm-field input,
.pm-field textarea,
.pm-field select {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%
}

.pm-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5
}

.pm-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696d71' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px
}

.pm-field input:focus,
.pm-field textarea:focus,
.pm-field select:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(101, 20, 221, .14)
}

.pm-field.invalid input,
.pm-field.invalid textarea,
.pm-field.invalid select {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .12)
}

.pm-err {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #fef3f2;
  border: 1px solid #fda29b;
  color: #912018;
  font-size: 13.5px;
  line-height: 1.45
}

.pm-err[hidden] {
  display: none !important
}

#pmSubmit {
  margin-top: 4px
}

#pmSubmit[disabled] {
  opacity: .6;
  cursor: default;
  transform: none !important;
  filter: none !important
}

.pm-legal {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
  margin-top: 2px
}

.pm-legal a {
  color: var(--purple);
  text-decoration: underline
}

.pmodal-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 16px 0 8px
}

.pmodal-done[hidden] {
  display: none !important
}

.pmodal-form[hidden] {
  display: none !important
}

.pmodal-done .pm-done-ico {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--mint-bg);
  color: #0a7d5c;
  display: grid;
  place-items: center
}

.pmodal-done .pm-done-ico svg {
  width: 28px;
  height: 28px
}

.pmodal-done h3 {
  font-size: 23px
}

.pmodal-done p {
  font-size: 15px;
  color: var(--muted);
  max-width: 380px
}

.pmodal-done .btn {
  margin-top: 8px
}

/* Badge hidden - permitted only because the modal carries Google's required
   "protected by reCAPTCHA / Privacy Policy / Terms of Service" attribution.
   If that text is ever removed from .pm-legal, drop this rule too. */
.grecaptcha-badge {
  visibility: hidden
}

@media(max-width:560px) {
  .pmodal {
    padding: 12px 10px
  }

  .pmodal-card {
    padding: 26px 20px 22px;
    border-radius: 16px
  }

  .pm-row {
    grid-template-columns: 1fr
  }
}

@media(prefers-reduced-motion:reduce) {

  .pmodal-card,
  .pmodal-backdrop {
    animation: none
  }
}

/* ============ TERMS / PRIVACY MODAL ============ */
/* Reuses the .pmodal shell (backdrop, centring, [hidden] guard) with a much wider
   card, since it frames a full legal document rather than a form. The current
   homepage does this with Bootstrap's .modal-lg + jQuery via
   assets/js/become-co-terms.js - this page has neither, so it is reimplemented
   in vanilla against the same URLs and the same ?header=0 param. */
.pmodal--wide {
  align-items: center;
  padding: 20px 16px
}

.pmodal-card--wide {
  max-width: 1060px;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 18px;
  max-height: calc(100vh - 40px)
}

.tm-title {
  font-size: 22px;
  letter-spacing: -0.02em;
  padding-right: 40px;
  margin-bottom: 14px
}

.tm-frame-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream)
}

.tm-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  border: none;
  background: #fff
}

.tm-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--muted);
  background: var(--cream);
  pointer-events: none
}

.tm-loading[hidden] {
  display: none !important
}

.tm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  flex-wrap: wrap
}

.tm-open {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline
}

.tm-open:hover {
  color: var(--head)
}

@media(max-width:720px) {
  .pmodal--wide {
    padding: 10px 8px
  }

  .pmodal-card--wide {
    padding: 20px 16px 14px;
    max-height: calc(100vh - 20px);
    border-radius: 14px
  }

  .tm-title {
    font-size: 19px
  }

  .tm-frame {
    min-height: 70vh
  }
}

/* ============ FAQ ACCORDION (shared) ============ */
/* Lives here, not in a page stylesheet, because two pages render it - the
   Services page's single FAQ block and the whole of /faq/ - and the controller
   that drives it (the `FAQ accordion` block in become-site.js, guarded on
   #faq) is already shared. It was services-page.css-only until 2026-10-29;
   moving it was verified to leave /services/ byte-identical.

   The panel animates on max-height, so the JS writes a pixel value on open and
   clears it on close. The trigger is a <button>, never an <a>. */
.faq {
  padding: 104px 0
}

.faq-grid {
  max-width: 820px;
  margin: 0 auto
}

.faq-item {
  border-bottom: 1px solid var(--border)
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  text-align: left;
  font-size: 19px;
  font-weight: 700;
  color: var(--head);
  letter-spacing: -0.01em
}

.faq-icon {
  width: 30px;
  height: 30px;
  flex: none;
  position: relative
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--purple);
  border-radius: 2px;
  transition: transform .3s var(--ease)
}

.faq-icon::before {
  width: 16px;
  height: 2px;
  top: 14px;
  left: 7px
}

.faq-icon::after {
  width: 2px;
  height: 16px;
  top: 7px;
  left: 14px
}

.faq-item.open .faq-icon {
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease)
}

.faq-a-inner {
  padding: 0 0 26px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  max-width: 680px
}

@media (max-width:720px) {
  .faq {
    padding: 64px 0
  }

  .faq-q {
    font-size: 17px
  }
}

/* ============ PHOTOGRAPHY ============ */
/* Ported 2026-10-14 from the Claude Design bundle ("Become Website Images").
   Every photo is local under /become-ng-hp/assets/photos/ - the page still
   makes zero third-party image calls, same rule as the partner logos. The
   bundle's hero-photo / hero-chip rules are deliberately not ported: the
   design file defines them but never uses them in its own markup. */

/* --- hero: the people line under the lede --- */
.hero-people {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px
}

.hp-stack {
  display: flex
}

.hp-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  margin-left: -12px;
  overflow: hidden;
  background: var(--purple-soft);
  box-shadow: 0 2px 6px rgba(29, 9, 59, .08)
}

.hp-av:first-child {
  margin-left: 0
}

.hp-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hp-txt {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35
}

.hp-txt strong {
  display: block;
  color: var(--head);
  font-weight: 800;
  font-size: 15px
}

/* --- verticals cards --- */
/* The negative margin is the design's: .vert pads 36/32, so -8px leaves the
   photo inset 28px from the top and 24px from the sides. */
.vert-photo {
  position: relative;
  height: 190px;
  margin: -8px -8px 20px;
  border-radius: 12px;
  overflow: hidden
}

.vert-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* --- momentum mosaic --- */
/* Three tiles, one per vertical, above the rails. The design's own grid put
   .mo-c at columns 2/4 and left the top-right cell empty; both wide tiles are
   spanned here instead so the block packs solid. */
.mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 16px;
  margin: 8px 0 44px
}

.mo {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden
}

.mo-a {
  grid-row: 1/3
}

.mo-b,
.mo-c {
  grid-column: 2/4
}

.mo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mo figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  max-width: calc(100% - 28px);
  box-shadow: 0 7px 20px rgba(57, 56, 57, .1);
  pointer-events: none
}

.mo figcaption .rail-tag {
  align-self: flex-start;
  margin-bottom: 4px
}

.mo figcaption b {
  display: block;
  line-height: 1.2;
  font-size: 17px;
  font-weight: 800;
  color: var(--head);
  letter-spacing: -.01em
}

.mo figcaption span:last-child {
  display: block;
  line-height: 1.35;
  font-size: 12.5px;
  color: var(--muted)
}

/* --- final CTA --- */
.fc-card {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  text-align: left
}

.fc-copy {
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.finalcta .fc-copy h2 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 15ch;
  margin: 14px 0 0
}

.finalcta .fc-copy p {
  font-size: 16px;
  max-width: 42ch;
  margin: 16px 0 0;
  color: var(--muted)
}

.fc-copy .finalcta-btns {
  justify-content: flex-start;
  margin-top: 28px
}

.fc-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted)
}

.fc-trust span {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap
}

.fc-trust svg {
  width: 15px;
  height: 15px;
  color: var(--purple)
}

/* The photo is absolutely positioned rather than a flex child: cta-customer.jpg
   is portrait (900x1350), so an in-flow img takes its intrinsic 750px height
   and drags the whole grid row with it. Out of flow it fills whatever height
   the copy column sets and never drives it. */
.fc-media {
  position: relative;
  margin: 0;
  min-height: 260px;
  overflow: hidden;
  border-left: 1px solid var(--border)
}

.fc-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%
}

@media (max-width:1024px) {
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 300px 220px
  }

  .mo-a {
    grid-row: auto;
    grid-column: 1/3
  }

  .mo-b,
  .mo-c {
    grid-column: auto
  }

  .fc-card {
    grid-template-columns: 1fr
  }

  .fc-copy {
    padding: 44px 32px
  }

  /* Stacked, so the figure needs a height of its own - the photo is out of
     flow and no longer supplies one. */
  .fc-media {
    height: 320px;
    border-left: 0;
    border-top: 1px solid var(--border)
  }

  .fc-media img {
    object-position: 50% 45%
  }
}

@media (max-width:720px) {
  /* The mobile matcher sitting high in the hero is deliberate (commit
     183e20416, "lift the mobile matcher above the fold"). Measured, the people
     line costs the matcher CTA 84px at 390px and 123px at 360px and below,
     where its text wraps to three lines - so it is desktop-only, gated on the
     same 720/721 boundary the header and the menu already switch on. */
  .hero-people {
    display: none
  }

  .vert-photo {
    height: 160px
  }

  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 240px
  }

  .mo-a,
  .mo-b,
  .mo-c {
    grid-column: auto
  }

  .fc-copy {
    padding: 32px 22px
  }

  .fc-media {
    height: 260px
  }
}