/* =========================================================================
   BFCM landing page — standalone stylesheet.

   Self-contained on purpose: this is linked from a Webflow Embed, so it can
   rely on nothing from the Next.js app. Everything is scoped under .tw-bfcm
   so Webflow's base styles can't leak in and ours can't leak out.

   Fonts ship with the stylesheet. Vercel serves the woff2/woff with
   Access-Control-Allow-Origin: *, and these url()s resolve against this file's
   own location, so the face loads from Vercel whether the page is served from
   here or pasted into Webflow — no font upload on the Webflow side.
   ========================================================================= */

@font-face {
  font-family: 'TWK Lausanne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url(../fonts/TWKLausanne-400.woff2) format('woff2'),
    url(../fonts/TWKLausanne-400.woff) format('woff');
}
@font-face {
  font-family: 'TWK Lausanne';
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src:
    url(../fonts/TWKLausanne-650.woff2) format('woff2'),
    url(../fonts/TWKLausanne-650.woff) format('woff');
}

.tw-bfcm {
  /* ---- tokens, mirrored from the app's tokens.css ---- */
  --deep-ocean: #033855;
  --deeper-ocean: #03293e;
  --sky: #c7ffff;
  --aqua: #99ffff;
  --beach: #f6f2eb;
  --white: #fff;
  --light-gray: #eaedef;
  --gray: #98a2a8;
  --mid-gray: #808080;
  --dark-gray: #71797e;

  --fw-regular: 400;
  --fw-bold: 650;
  --lh-display: 1.15;
  --ls-display: -0.02em;

  /* Container. The BFCM board is drawn at 1600 with 130px gutters, so content
     caps at 1340. The 65px floor keeps narrower desktops off the bezel and
     matches the rest of the site; mobile drops to 24px below. */
  --pad-x: max(65px, calc((100% - 1340px) / 2));

  font-family: 'TWK Lausanne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: var(--fw-regular);
  color: var(--deep-ocean);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- scoped reset: neutralise whatever the host page brings ---- */
.tw-bfcm *,
.tw-bfcm *::before,
.tw-bfcm *::after {
  box-sizing: border-box;
}
.tw-bfcm h1,
.tw-bfcm h2,
.tw-bfcm h3,
.tw-bfcm h4,
.tw-bfcm p,
.tw-bfcm figure,
.tw-bfcm blockquote {
  margin: 0;
}
/* Host pages style bare element selectors — Webflow ships `h2 { color: … }`
   and `h2 { font-family: … }`. An element selector beats an inherited value
   however specific the container is, so both have to be re-inherited element
   by element, or headings take the host's colour and every run of text takes
   its typeface. Our own rules are class-based and still win over this. */
.tw-bfcm h1,
.tw-bfcm h2,
.tw-bfcm h3,
.tw-bfcm h4,
.tw-bfcm h5,
.tw-bfcm h6,
.tw-bfcm p,
.tw-bfcm span,
.tw-bfcm li,
.tw-bfcm label,
.tw-bfcm figcaption,
.tw-bfcm blockquote,
.tw-bfcm a,
.tw-bfcm button,
.tw-bfcm input,
.tw-bfcm figure,
.tw-bfcm div {
  color: inherit;
  font-family: inherit;
}
/* Webflow gives blockquote a rule and indent; the testimonial quotes supply
   their own treatment. */
.tw-bfcm blockquote {
  padding: 0;
  border: 0;
  font-style: inherit;
  font-weight: inherit;
}
.tw-bfcm ul,
.tw-bfcm ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tw-bfcm img,
.tw-bfcm svg,
.tw-bfcm video {
  display: block;
  max-width: 100%;
}
.tw-bfcm a {
  color: inherit;
  text-decoration: none;
}
.tw-bfcm button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ---- type scale (display = headings, text = body) ---- */
.tw-bfcm .t-h1,
.tw-bfcm .t-h2,
.tw-bfcm .t-h3,
.tw-bfcm .t-h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.tw-bfcm .t-h1 { font-size: 64px; }
.tw-bfcm .t-h2 { font-size: 40px; }
.tw-bfcm .t-h3 { font-size: 32px; }
.tw-bfcm .t-h4 { font-size: 28px; }

.tw-bfcm .t-body-l { font-size: 20px; line-height: 1.2; letter-spacing: -0.005em; }
.tw-bfcm .t-body   { font-size: 16px; line-height: 1.2; letter-spacing: -0.005em; }
.tw-bfcm .t-body-s { font-size: 14px; line-height: 1.2; letter-spacing: -0.005em; }
.tw-bfcm .t-eyebrow{ font-size: 12px; line-height: 1.2; letter-spacing: -0.005em; }
.tw-bfcm .t-bold   { font-weight: var(--fw-bold); }

/* visible to screen readers only */
.tw-bfcm .bfcm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- section shell ---- */
.tw-bfcm .bfcm-section {
  padding: 100px var(--pad-x);
}

/* =========================================================================
   Email sign-up band (Figma 2892:3800)
   Heading + supporting copy on the left, email capture pill on the right.
   ========================================================================= */
.tw-bfcm .bfcm-signup {
  background: var(--white);
  padding: 100px var(--pad-x) 50px;
}
.tw-bfcm .bfcm-signup-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.tw-bfcm .bfcm-signup-text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 500px;
  flex: 0 1 500px;
}
.tw-bfcm .bfcm-signup-sub {
  color: var(--mid-gray);
}

/* ---- email capture pill ----
   A 3px light-grey frame around a transparent input, with the button sitting
   inside it. Height comes from the button (12px padding + 19.2px text + 3+3
   frame = 49px), so nothing here is hard-coded. */
.tw-bfcm .bfcm-emailform {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 460px;
  flex: 0 0 auto;
  padding: 3px;
  background: var(--light-gray);
  border-radius: 8px;
}
.tw-bfcm .bfcm-emailform input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px 0 20px;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--deep-ocean);
  background: none;
  border: 0;
  border-radius: 5px;
}
.tw-bfcm .bfcm-emailform input::placeholder {
  color: var(--gray);
  opacity: 1; /* Firefox dims placeholders by default */
}
.tw-bfcm .bfcm-emailform input:focus-visible {
  outline: 2px solid var(--deep-ocean);
  outline-offset: 1px;
}
.tw-bfcm .bfcm-emailform button {
  flex: 0 0 auto;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--white);
  background: var(--deep-ocean);
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-emailform button:hover {
  background: var(--deeper-ocean);
}

/* ---- the same pill, rendered by HubSpot ----
   HubSpot owns the markup, so these override its `.hs-*` classes to land on
   the design above. Only works while the form is set to "raw HTML" there;
   as an iframe none of this reaches it. Same approach as /bookdemo.
   HubSpot already hides the UTM and gclid wrappers itself. */
/* The column sizing lives on the wrapper so the eyebrow and the pill share a
   width and a left edge. */
/* 500 rather than 460: "Get your free BFCM prep guide" is a long button, and
   at 460 it left the field too narrow to show its own placeholder. The text
   column beside it can shrink, so the extra width comes out of the gap. */
.tw-bfcm .bfcm-signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 500px;
  flex: 0 0 auto;
}
.tw-bfcm .bfcm-signup-eyebrow {
  font-size: 14px;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-hsform {
  width: 100%;
}
.tw-bfcm .bfcm-hsform form {
  /* errors hang off this rather than growing the pill */
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px;
  background: var(--light-gray);
  border-radius: 8px;
}
.tw-bfcm .bfcm-hsform .hs_email {
  flex: 1 1 auto;
  min-width: 0;
}
/* the design carries its prompt in the placeholder, so the label is for
   screen readers only rather than removed outright */
.tw-bfcm .bfcm-hsform .hs_email > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.tw-bfcm .bfcm-hsform .hs_email .input {
  width: 100%;
}
/* Addressed by id, as /bookdemo does. Even with css:'' HubSpot injects an
   inline stylesheet whose selector carries six :not() clauses — (0,7,2), which
   outweighs any sensible class chain. One id outranks the lot. */
#bfcm-hsform input.hs-input {
  width: 100%;
  padding: 0 8px 0 20px;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--deep-ocean);
  background: none;
  border: 0;
  border-radius: 5px;
}
#bfcm-hsform input.hs-input::placeholder {
  color: var(--gray);
  opacity: 1;
}
#bfcm-hsform input.hs-input:focus-visible {
  outline: 2px solid var(--deep-ocean);
  outline-offset: 1px;
}
.tw-bfcm .bfcm-hsform .hs_submit {
  flex: 0 0 auto;
}
.tw-bfcm .bfcm-hsform .hs-field-desc {
  display: none;
}
.tw-bfcm .bfcm-hsform input.hs-button {
  padding: 12px 18px;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--white);
  background: var(--deep-ocean);
  border: 0;
  border-radius: 5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-hsform input.hs-button:hover {
  background: var(--deeper-ocean);
}
/* Validation sits under the pill. Absolute so an error can't stretch the
   field and shove the headline beside it out of alignment. */
.tw-bfcm .bfcm-hsform .hs-error-msgs {
  position: absolute;
  top: calc(100% + 6px);
  left: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* HubSpot also emits a form-level rollup — "Please complete all required
   fields." — which said the same thing as the field error and landed on the
   exact same coordinates, overlapping it and collapsing to 0 wide so its text
   ran one word per line. There is only one visible field, so the field-level
   message is the whole story. */
.tw-bfcm .bfcm-hsform .hs_error_rollup {
  display: none;
}
.tw-bfcm .bfcm-hsform .hs-error-msgs label,
.tw-bfcm .bfcm-hsform .hs-error-msg {
  font-size: 13px;
  line-height: 1.3;
  color: #c0392b;
}
.tw-bfcm .bfcm-hsform .hs-input.error {
  background: none;
}
/* the confirmation HubSpot swaps in after a successful submit */
.tw-bfcm .bfcm-hsform .submitted-message {
  font-size: 16px;
  line-height: 1.4;
  color: var(--deep-ocean);
}

/* =========================================================================
   Moby greeting panel (Figma 2892:3810)
   One flat export — the headline, the capsule and its icon are all part of the
   picture, so nothing is layered over it. Sized by the image's own ratio so
   none of the composition gets cropped.
   ========================================================================= */
.tw-bfcm .bfcm-greet {
  background: var(--white);
  /* near-full-bleed: 62.744px gutters at the 1600 board width */
  padding: 20px max(24px, calc((100% - 1474.512px) / 2));
}
.tw-bfcm .bfcm-greet-frame {
  width: 100%;
}
.tw-bfcm .bfcm-greet-card {
  width: 100%;
  aspect-ratio: 2948 / 1200;
  background: url(images/moby-greeting-bg.webp) center / cover no-repeat;
  border-radius: 32px;
}

/* TEMPORARY — hidden at the team's request while the panel is reconsidered.
   Kept here rather than removed from the markup so bringing it back is a
   one-line change with no re-paste in Webflow. display:none also stops the
   browser fetching the image at all, so it costs nothing while hidden. */
.tw-bfcm .bfcm-greet {
  display: none;
}

/* =========================================================================
   Contents bar (Figma 2892:3914)
   Frosted capsule holding the four in-page anchors.
   ========================================================================= */
.tw-bfcm .bfcm-contents {
  /* Pins for the rest of the page. --bfcm-sticky-top exists so this can be
     offset if Webflow's own header is sticky above it. */
  position: sticky;
  top: var(--bfcm-sticky-top, 0px);
  z-index: 20;
  /* 100px gutters at the 1600 board width */
  padding: 20px max(24px, calc((100% - 1400px) / 2));
  /* keep the backdrop blur sampling this section only */
  isolation: isolate;
}
/* clicking a pill shouldn't tuck the heading under the pinned bar */
.tw-bfcm .bfcm-plan,
.tw-bfcm .bfcm-measure,
.tw-bfcm .bfcm-compare,
.tw-bfcm .bfcm-act {
  scroll-margin-top: 100px;
}
.tw-bfcm .bfcm-contents-bar {
  /* Palette swapped wholesale by .is-on-dark below, so every child just reads
     these and nothing needs to know which band it's floating over. */
  --bar-label: var(--deep-ocean);
  --pill-idle-bg: rgba(3, 56, 85, 0.12);
  --pill-idle-fg: var(--dark-gray);
  --pill-on-bg: var(--deep-ocean);
  --pill-on-fg: var(--white);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 8px 8px 30px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  /* padding is animated because it reclaims the label's inset on mobile */
  transition: background-color 0.25s ease, padding 0.3s ease;
}
/* over a deep-ocean band the 30%-white capsule reads as mid-blue, so the
   dark-on-light palette has to invert */
.tw-bfcm .bfcm-contents-bar.is-on-dark {
  --bar-label: var(--white);
  --pill-idle-bg: rgba(255, 255, 255, 0.22);
  --pill-idle-fg: rgba(255, 255, 255, 0.88);

  background: rgba(255, 255, 255, 0.16);
}
.tw-bfcm .bfcm-contents-label {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bar-label);
  white-space: nowrap;
  transition: color 0.25s ease;
}

/* The pills never wrap — past the point where they stop fitting the row
   becomes a horizontal scroll strip, which keeps the capsule one line tall
   at every width without guessing a breakpoint. */
.tw-bfcm .bfcm-contents-list {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.tw-bfcm .bfcm-contents-list::-webkit-scrollbar {
  display: none;
}
.tw-bfcm .bfcm-contents-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  /* Resting state: every pill sits blue until the first tracked section
     arrives. The bar picks up .is-armed at that point and the set drops back
     to grey with only the current one lit. */
  color: var(--pill-on-fg);
  background: var(--pill-on-bg);
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.tw-bfcm .bfcm-contents-bar.is-armed .bfcm-contents-pill {
  color: var(--pill-idle-fg);
  background: var(--pill-idle-bg);
}
/* the section currently under the bar */
.tw-bfcm .bfcm-contents-bar.is-armed .bfcm-contents-pill.is-active,
.tw-bfcm .bfcm-contents-bar.is-armed .bfcm-contents-pill:hover {
  color: var(--pill-on-fg);
  background: var(--pill-on-bg);
}
.tw-bfcm .bfcm-contents-pill:focus-visible {
  outline: 2px solid var(--deep-ocean);
  outline-offset: 2px;
}
.tw-bfcm .bfcm-contents-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: var(--white);
  border-radius: 50%;
}

@media (max-width: 700px) {
  /* The label earns its room at rest — it's what tells you the bar is a table
     of contents at all — but not once the bar arms, when the pills need the
     width. Collapsed rather than display:none so it animates with the rest. */
  .tw-bfcm .bfcm-contents-label {
    /* no shrink: the scrolling pill strip would otherwise squeeze this to a
       couple of clipped characters. max-width still drives the collapse. */
    flex: 0 0 auto;
    max-width: 160px;
    overflow: hidden;
    font-size: 20px;
    transition: max-width 0.3s ease, opacity 0.2s ease;
  }
  .tw-bfcm .bfcm-contents-bar.is-armed .bfcm-contents-label {
    max-width: 0;
    opacity: 0;
  }

  /* Pinned, this bar is charged against every screenful, so trim it back:
     95px (12% of a 812px viewport) down to ~67px (8%). Desktop is untouched. */
  .tw-bfcm .bfcm-contents { padding: 10px 24px; }
  .tw-bfcm .bfcm-contents-bar { padding: 6px 6px 6px 18px; gap: 12px; }
  .tw-bfcm .bfcm-contents-bar.is-armed { padding: 6px; gap: 0; }
  .tw-bfcm .bfcm-contents-pill { padding: 8px 16px; }
  .tw-bfcm .bfcm-contents-dot { width: 12px; height: 12px; }

  .tw-bfcm .bfcm-plan,
  .tw-bfcm .bfcm-measure,
  .tw-bfcm .bfcm-compare,
  .tw-bfcm .bfcm-act {
    scroll-margin-top: 76px;
  }
}

/* =========================================================================
   Plan with complete context (Figma 2892:3916)
   Deep-ocean band: heading + copy, then a sky call-out card whose right half
   is a fixed-proportion "guide cover" composition.
   ========================================================================= */
.tw-bfcm .bfcm-plan {
  display: flex;
  flex-direction: column;
  gap: 80px;
  background: var(--deep-ocean);
  padding: 100px var(--pad-x);
}
.tw-bfcm .bfcm-plan-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  width: 100%;
}
.tw-bfcm .bfcm-plan-text {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 550px;
  max-width: 100%;
}
.tw-bfcm .bfcm-plan-text h2 {
  color: var(--sky);
}
.tw-bfcm .bfcm-plan-text p {
  color: var(--white);
}

/* ---- call-out card ---- */
.tw-bfcm .bfcm-callout {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  background: var(--sky);
  border-radius: 24px;
  overflow: hidden;
}
.tw-bfcm .bfcm-callout-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex: 0 0 auto;
  padding: 48px 0 48px 32px;
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-callout-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tw-bfcm .bfcm-callout-copy h3 {
  width: 330px;
  max-width: 100%;
  font-size: 28px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.tw-bfcm .bfcm-callout-copy p {
  width: 310px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.tw-bfcm .bfcm-callout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--white);
  background: var(--deep-ocean);
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-callout-btn:hover {
  background: var(--deeper-ocean);
}
.tw-bfcm .bfcm-callout-btn:focus-visible {
  outline: 2px solid var(--deep-ocean);
  outline-offset: 2px;
}

/* ---- guide-cover banner ----
   One flat export of the whole banner: gradient, spine, cover art, logo and
   cover type. Exactly 2x of the 877x539 board it sits in. */
.tw-bfcm .bfcm-callout-banner {
  flex: 0 0 877px;
  max-width: 877px;
}
.tw-bfcm .bfcm-callout-board {
  width: 100%;
  aspect-ratio: 877 / 539;
  background: url(images/guide-cover.webp) center / cover no-repeat;
  border-radius: 0 24px 24px 0;
}

/* ---- blog cards (Figma 3220:21905) ---- */
.tw-bfcm .bfcm-cards {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
}
.tw-bfcm .bfcm-card {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  /* Figma fixes this at 420px. min-height renders identically there but lets a
     card grow instead of spilling when the column narrows. */
  min-height: 420px;
  padding: 10px;
  background: var(--white);
  border-radius: 24px;
}
.tw-bfcm .bfcm-card-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  padding: 20px;
}
.tw-bfcm .bfcm-card-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}
.tw-bfcm .bfcm-card-chip {
  padding: 10px;
  background: var(--sky);
  border-radius: 10px;
  line-height: 0;
}
.tw-bfcm .bfcm-card-icon {
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.tw-bfcm .bfcm-card-icon--storefront { background-image: url(images/icon-storefront.svg); }
.tw-bfcm .bfcm-card-icon--sell { background-image: url(images/icon-sell.svg); }
.tw-bfcm .bfcm-card-icon--email { background-image: url(images/icon-attach-email.svg); }
.tw-bfcm .bfcm-card-icon--trophy { background-image: url(images/icon-trophy.svg); }
.tw-bfcm .bfcm-card-icon--terminal { background-image: url(images/icon-terminal.svg); }
.tw-bfcm .bfcm-card-icon--memory { background-image: url(images/icon-memory.svg); }
.tw-bfcm .bfcm-card-icon--arrows { background-image: url(images/icon-arrows-input.svg); }
.tw-bfcm .bfcm-card-icon--google { background-image: url(images/icon-google.svg); }
.tw-bfcm .bfcm-card-icon--meta { background-image: url(images/icon-meta.svg); }
/* TikTok ships its own sky tile, so it skips the chip and runs the full 60 */
.tw-bfcm .bfcm-card-icon--tiktok {
  width: 60px;
  height: 60px;
  background-image: url(images/icon-tiktok.svg);
}

.tw-bfcm .bfcm-card-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-card-text h3 {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 28px;
  letter-spacing: -0.02em;
}
.tw-bfcm .bfcm-card-text p {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.01em;
}
/* cards 2 and 3 carry a grey body in the design; card 1 does not */
.tw-bfcm .bfcm-card-text p.is-muted {
  color: var(--gray);
}

.tw-bfcm .bfcm-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-card-cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 0 12px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tw-bfcm .bfcm-card-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: var(--deep-ocean);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}
/* The glyph is drawn pointing up-and-right, so no rotation. Sized as a
   percentage of the button rather than a fixed length: the design puts the
   arrow across 15 of 38px, and a percentage keeps that ratio on both the 42px
   and 38px buttons without restating it. */
.tw-bfcm .bfcm-card-cta-icon::before {
  content: '';
  width: 39.5%;
  height: 39.5%;
  background: url(images/arrow-ne.svg) center / contain no-repeat;
}
.tw-bfcm a.bfcm-card-cta:hover .bfcm-card-cta-icon {
  background: var(--deeper-ocean);
}

/* Smaller CTA variant. Only the third Act card uses it — see the note in the
   markup; it's an inconsistency carried over from the design rather than an
   intentional variant. The 38px graphic bakes in its own button background. */
.tw-bfcm .bfcm-card-cta--sm .bfcm-card-cta-label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
}
/* Same button and glyph as the others, just the smaller box the design uses
   here — rather than the flattened 38px export, which baked in its own
   background and so couldn't share a hover state or track colour changes. */
.tw-bfcm .bfcm-card-cta--sm .bfcm-card-cta-icon {
  width: 38px;
  height: 38px;
  border-radius: 6.32px;
}
.tw-bfcm a.bfcm-card-cta:focus-visible {
  outline: 2px solid var(--deep-ocean);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Stack the card once the 877px banner and the copy stop coexisting. */
@media (max-width: 1180px) {
  .tw-bfcm .bfcm-callout {
    flex-direction: column;
  }
  .tw-bfcm .bfcm-callout-panel {
    padding: 40px 32px;
    gap: 32px;
    width: 100%;
  }
  /* the 330/310 column widths only make sense beside the banner */
  .tw-bfcm .bfcm-callout-copy h3,
  .tw-bfcm .bfcm-callout-copy p {
    width: 100%;
    max-width: 560px;
  }
  .tw-bfcm .bfcm-callout-banner {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  .tw-bfcm .bfcm-callout-board {
    border-radius: 0;
  }
}

/* =========================================================================
   Webinar promo (Figma 3076:8421)

   The right-hand dashboard is a flat export of Figma node 3076:8436 (764x590,
   exactly the card's height). In the file it's ~40 nested layers — five
   stacked blur passes, mix-blend-color-dodge glows and SVG-masked charts —
   for a picture that is entirely decorative. An image is both truer to the
   design and far lighter than reproducing that stack. The left column stays
   real markup so the copy is selectable and readable by screen readers.
   ========================================================================= */
.tw-bfcm .bfcm-webinar {
  display: flex;
  justify-content: center;
  background: var(--white);
  padding: 100px var(--pad-x);
}
.tw-bfcm .bfcm-webinar-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1310px;
  max-width: 100%;
  height: 590px;
  background: var(--deep-ocean);
  border-radius: 24px;
  overflow: hidden;
}
.tw-bfcm .bfcm-webinar-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  padding: 48px 32px;
}
.tw-bfcm .bfcm-webinar-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}
.tw-bfcm .bfcm-webinar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--sky);
  border-radius: 6px;
}
.tw-bfcm .bfcm-webinar-pill::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--deep-ocean);
  border-radius: 50%;
}
.tw-bfcm .bfcm-webinar-pill span {
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--deep-ocean);
  white-space: nowrap;
}
.tw-bfcm .bfcm-webinar-copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 100%;
}
.tw-bfcm .bfcm-webinar-copy h2 {
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sky);
}
.tw-bfcm .bfcm-webinar-sub {
  width: 403px;
  max-width: 100%;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
}
.tw-bfcm .bfcm-webinar-date {
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sky);
}
.tw-bfcm .bfcm-webinar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--deep-ocean);
  background: var(--sky);
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-webinar-btn:hover {
  background: var(--aqua);
}
.tw-bfcm .bfcm-webinar-btn:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
.tw-bfcm .bfcm-webinar-visual {
  flex: 0 0 764px;
  align-self: stretch;
  background: url(images/webinar-dashboard.webp) center / cover no-repeat;
}

@media (max-width: 1180px) {
  .tw-bfcm .bfcm-webinar-card {
    flex-direction: column;
    height: auto;
  }
  .tw-bfcm .bfcm-webinar-text {
    align-self: auto;
    width: 100%;
    gap: 40px;
    padding: 40px 32px;
  }
  .tw-bfcm .bfcm-webinar-visual {
    flex: 0 0 auto;
    align-self: auto;
    width: 100%;
    aspect-ratio: 764 / 590;
  }
}

/* =========================================================================
   Measure what's actually working (Figma 2892:9585)
   Same card as the Plan section, but fixed-width in a full-bleed track that
   runs off the right edge — the four cards don't fit the container by design.
   ========================================================================= */
.tw-bfcm .bfcm-measure {
  display: flex;
  flex-direction: column;
  gap: 60px;
  background: var(--light-gray);
  padding: 100px 0;
  /* contains the track's 100vw so the page itself never scrolls sideways */
  overflow-x: clip;
}
.tw-bfcm .bfcm-measure-head {
  padding-inline: var(--pad-x);
}
/* heading on the left, carousel controls pinned bottom-right */
.tw-bfcm .bfcm-measure-head-row {
  display: flex;
  gap: 60px;
  align-items: flex-end;
  width: 100%;
}
.tw-bfcm .bfcm-measure-head-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  flex: 0 1 600px;
  width: 600px;
  max-width: 100%;
}
.tw-bfcm .bfcm-measure-nav {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
}
.tw-bfcm .bfcm-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: var(--deeper-ocean);
  border-radius: 8px;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.tw-bfcm .bfcm-carousel-btn::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url(images/arrow-left.svg) center / contain no-repeat;
}
.tw-bfcm .bfcm-carousel-btn--next::before {
  rotate: 180deg;
}
.tw-bfcm .bfcm-carousel-btn:hover:not(:disabled) {
  background: var(--deep-ocean);
}
.tw-bfcm .bfcm-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.tw-bfcm .bfcm-carousel-btn:focus-visible {
  outline: 2px solid var(--deep-ocean);
  outline-offset: 2px;
}
.tw-bfcm .bfcm-measure-head h2 {
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-measure-head p {
  color: var(--dark-gray);
}

/* Full-bleed scroller. --pad-x resolves against the section (viewport-wide),
   so the first card lines up with the heading above it and the mobile gutter
   override is inherited for free. */
.tw-bfcm .bfcm-measure-track {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--pad-x);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* snap targets the scrollport edge, which ignores padding — without this the
     first card would land flush to the viewport instead of on the gutter */
  scroll-padding-inline-start: var(--pad-x);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tw-bfcm .bfcm-measure-track::-webkit-scrollbar {
  display: none;
}
.tw-bfcm .bfcm-measure-track .bfcm-card {
  flex: 0 0 min(433px, calc(100vw - 2 * var(--pad-x)));
  min-height: 420px;
  scroll-snap-align: start;
}

/* =========================================================================
   Unlock more BFCM revenue with Sonar (Figma 2892:4140)

   Two equal cards. The right one is a flat export of Figma node 2892:4152 —
   it holds a full iPhone app mock (2892:4153 alone is 527x1146 with well over
   a hundred nested frames, clipped by the card). Decorative and non-interactive,
   so an image is both truer and far lighter. The left card stays real markup.
   ========================================================================= */
.tw-bfcm .bfcm-sonar {
  display: flex;
  flex-direction: column;
  gap: 60px;
  background: var(--white);
  padding: 120px var(--pad-x) 100px;
}
.tw-bfcm .bfcm-sonar-head h2 {
  width: 750px;
  max-width: 100%;
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-sonar-cards {
  display: flex;
  gap: 20px;
  align-items: stretch;
}
/* Not `flex: 1 1 0`: under border-box a zero basis is clamped up to the card's
   own padding (120px here), so the padded card would enter the distribution
   pre-loaded and the two would resolve 720/600. A percentage basis — half the
   row minus half the 20px gap — keeps them honestly equal. */
.tw-bfcm .bfcm-sonar-stat,
.tw-bfcm .bfcm-sonar-visual {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
}
.tw-bfcm .bfcm-sonar-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 101px 60px 60px;
  background: var(--deep-ocean);
  border-radius: 32px;
  overflow: hidden;
  color: var(--white);
}
.tw-bfcm .bfcm-sonar-stat-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 500px;
  max-width: 100%;
}
.tw-bfcm .bfcm-sonar-figures {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  width: 100%;
}
.tw-bfcm .bfcm-sonar-figure {
  font-size: 88px;
  line-height: 88px;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.tw-bfcm .bfcm-sonar-lede {
  font-size: 40px;
  line-height: 42px;
  letter-spacing: -0.025em;
}
.tw-bfcm .bfcm-sonar-note {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
  width: 100%;
}
.tw-bfcm .bfcm-sonar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.01em;
  /* the design specifies black here, not deep-ocean */
  color: #000;
  background: var(--sky);
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-sonar-btn:hover {
  background: var(--aqua);
}
.tw-bfcm .bfcm-sonar-btn:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
/* The ratio lives on an inner element on purpose. With aspect-ratio on the flex
   item itself, its cross size feeds back into its main size and the two cards
   resolve unevenly (720/600 instead of 660/660). Inside a plain flex item the
   width is settled by flex alone, and the child then supplies the row height
   that stretches the stat card to match — no hard-coded 692px. */
.tw-bfcm .bfcm-sonar-visual-inner {
  aspect-ratio: 660 / 692;
  background: url(images/sonar-phone.webp) center top / cover no-repeat;
  border-radius: 32px;
}

@media (max-width: 900px) {
  .tw-bfcm .bfcm-sonar-cards {
    flex-direction: column;
  }
  .tw-bfcm .bfcm-sonar-stat,
  .tw-bfcm .bfcm-sonar-visual {
    flex: 0 0 auto;
    width: 100%;
  }
  .tw-bfcm .bfcm-sonar-stat {
    padding: 48px 32px;
    gap: 48px;
  }
  .tw-bfcm .bfcm-sonar-figure { font-size: 64px; line-height: 64px; }
  .tw-bfcm .bfcm-sonar-lede { font-size: 28px; line-height: 32px; }
  .tw-bfcm .bfcm-sonar-figures { gap: 20px; }
}

/* =========================================================================
   See how you compare (Figma 3097:9446)

   Two cards, each capped by a flat export of its Figma "Image" node
   (3160:11667 / 3160:11479). Both are decorative product mocks, and the first
   one's floating stat cards are set in Inter — a face this page doesn't load —
   so rebuilding them in markup would render in a fallback and drift.
   ========================================================================= */
.tw-bfcm .bfcm-compare {
  display: flex;
  flex-direction: column;
  gap: 60px;
  background: var(--white);
  padding: 100px var(--pad-x);
}
.tw-bfcm .bfcm-compare-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 550px;
  max-width: 100%;
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-compare-cards {
  display: flex;
  gap: 50px;
  align-items: stretch;
}
.tw-bfcm .bfcm-compare-card {
  display: flex;
  flex-direction: column;
  /* half the row minus half the gap — see the Sonar note on flex-basis */
  flex: 1 1 calc(50% - 25px);
  min-width: 0;
  min-height: 760px;
  background: var(--deep-ocean);
  border-radius: 16px;
  overflow: hidden;
}
.tw-bfcm .bfcm-compare-visual {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 645 / 430;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.tw-bfcm .bfcm-compare-visual--benchmarks {
  background-image: url(images/compare-benchmarks.webp);
}
.tw-bfcm .bfcm-compare-visual--diversity {
  background-image: url(images/compare-diversity.webp);
}
.tw-bfcm .bfcm-compare-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 32px;
}
.tw-bfcm .bfcm-compare-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 500px;
  max-width: 100%;
}
.tw-bfcm .bfcm-compare-text h3 {
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--sky);
}
.tw-bfcm .bfcm-compare-text p {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--white);
}
.tw-bfcm .bfcm-compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 20px;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--deep-ocean);
  background: var(--sky);
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-compare-btn:hover {
  background: var(--aqua);
}
.tw-bfcm .bfcm-compare-btn:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .tw-bfcm .bfcm-compare-cards {
    flex-direction: column;
    gap: 32px;
  }
  .tw-bfcm .bfcm-compare-card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }
}

/* =========================================================================
   What people are saying (Figma 2983:27733)
   Full-bleed testimonial carousel. Note this section gutters at 65px, not the
   130px the rest of the page uses.
   ========================================================================= */
.tw-bfcm .bfcm-quotes {
  --quote-gutter: 65px;

  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--deep-ocean);
  padding: 100px 0;
  overflow-x: clip;
}
.tw-bfcm .bfcm-quotes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-inline: var(--quote-gutter);
}
.tw-bfcm .bfcm-quotes-head h2 {
  color: var(--white);
}
.tw-bfcm .bfcm-quotes-nav {
  display: flex;
  gap: 20px;
  flex: 0 0 auto;
}

.tw-bfcm .bfcm-quotes-track {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--quote-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--quote-gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tw-bfcm .bfcm-quotes-track::-webkit-scrollbar {
  display: none;
}

.tw-bfcm .bfcm-quote {
  display: flex;
  align-items: stretch;
  flex: 0 0 min(1200px, calc(100vw - 2 * var(--quote-gutter)));
  min-height: 592px;
  border-radius: 32px;
  overflow: hidden;
  scroll-snap-align: start;
}
/* 426 / 1200 and 774 / 1200 — kept proportional so the split survives a
   narrower card instead of collapsing the photo */
.tw-bfcm .bfcm-quote-photo {
  flex: 0 0 35.5%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.tw-bfcm .bfcm-quote-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 64px 64px 32px;
}
.tw-bfcm .bfcm-quote-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  width: 100%;
}
.tw-bfcm .bfcm-quote-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.tw-bfcm .bfcm-quote-text blockquote {
  width: 630px;
  max-width: 100%;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* hangs the opening quote mark into the margin so the text edge stays flush */
  text-indent: -0.45em;
}
.tw-bfcm .bfcm-quote-credit {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tw-bfcm .bfcm-quote-logo {
  align-self: flex-start;
  height: 35px;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---- per-brand theming and assets ---- */
.tw-bfcm .bfcm-quote--sky .bfcm-quote-body {
  background: var(--sky);
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-quote--ocean .bfcm-quote-body {
  background: var(--deeper-ocean);
  color: var(--white);
}

.tw-bfcm .bfcm-quote-photo--rhoback { background-image: url(images/q-rhoback.webp); }
/* Figma crops this one off-centre (image at -10.33%, 139.15% wide) */
.tw-bfcm .bfcm-quote-photo--im8 {
  background-image: url(images/q-im8.webp);
  background-position: 26.4% center;
}
.tw-bfcm .bfcm-quote-photo--oofos { background-image: url(images/q-oofos.webp); }
.tw-bfcm .bfcm-quote-photo--nobl { background-image: url(images/q-nobl.webp); }

.tw-bfcm .bfcm-quote-logo--rhoback { width: 155.45px; background-image: url(images/logo-rhoback.svg); }
.tw-bfcm .bfcm-quote-logo--im8 { width: 136.02px; background-image: url(images/logo-im8.svg); }
.tw-bfcm .bfcm-quote-logo--oofos { width: 136px; background-image: url(images/logo-oofos.svg); }
.tw-bfcm .bfcm-quote-logo--nobl { width: 79.64px; background-image: url(images/logo-nobl.svg); }

/* ---- progress dots ---- */
.tw-bfcm .bfcm-quotes-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--quote-gutter);
}
.tw-bfcm .bfcm-quotes-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  background: var(--white);
  border-radius: 58px;
  opacity: 0.4;
  transition: width 0.25s ease, opacity 0.25s ease;
}
.tw-bfcm .bfcm-quotes-dot.is-active {
  width: 18px;
  opacity: 1;
}

@media (max-width: 900px) {
  .tw-bfcm .bfcm-quotes { --quote-gutter: 24px; padding: 60px 0; }
  /* the 426px photo has no room to earn its keep beside the quote */
  .tw-bfcm .bfcm-quote { flex-direction: column; min-height: 0; }
  .tw-bfcm .bfcm-quote-photo { flex: 0 0 auto; aspect-ratio: 4 / 3; }
  .tw-bfcm .bfcm-quote-body { padding: 32px 24px 24px; }
  .tw-bfcm .bfcm-quote-text { gap: 24px; }
  .tw-bfcm .bfcm-quote-text blockquote { font-size: 22px; }
  .tw-bfcm .bfcm-quote-inner { gap: 32px; }
}

/* =========================================================================
   Act while the moment still matters (Figma 3097:9569)
   Reuses the .bfcm-card component from the Plan section.
   ========================================================================= */
.tw-bfcm .bfcm-act {
  display: flex;
  flex-direction: column;
  gap: 60px;
  background: var(--light-gray);
  padding: 120px var(--pad-x) 100px;
}
.tw-bfcm .bfcm-act-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  width: 650px;
  max-width: 100%;
}
.tw-bfcm .bfcm-act-head h2 {
  color: var(--deep-ocean);
}
.tw-bfcm .bfcm-act-head p {
  color: var(--mid-gray);
}

/* =========================================================================
   AI built for BFCM (Figma 2892:4477)
   Sky call-out with a video thumbnail. The thumbnail is a flat export of
   Figma node 3076:7071 — two stacked image layers plus the play overlay and
   its glow — so it ships as one asset.
   ========================================================================= */
.tw-bfcm .bfcm-moby-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 470px;
  /* The panel inverted with the two-CTA revision — deep ocean behind sky copy,
     where it used to be sky behind deep-ocean copy. */
  background: var(--deep-ocean);
  border-radius: 24px;
  overflow: hidden;
}
.tw-bfcm .bfcm-moby-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  /* Widened from 433 when the second CTA landed — the pill and the link need
     one unbroken row, and the artwork gives up the difference. */
  flex: 0 0 525px;
  padding: 48px 0 48px 32px;
}
.tw-bfcm .bfcm-moby-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  color: var(--sky);
}
.tw-bfcm .bfcm-moby-copy h2 {
  width: 330px;
  max-width: 100%;
  font-size: 28px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.tw-bfcm .bfcm-moby-copy p {
  width: 310px;
  max-width: 100%;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* The pill and the text link sit on one row, 22px apart. They wrap on narrow
   screens rather than pushing the link off the card. */
.tw-bfcm .bfcm-moby-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.tw-bfcm .bfcm-moby-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 18px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--deep-ocean);
  background: var(--sky);
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-moby-btn:hover {
  background: var(--aqua);
}
/* Sky, not deep-ocean: the ring sits on the card's dark artwork. */
.tw-bfcm .bfcm-moby-btn:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
/* 14x16.8 glyph centred in an 18px box — it overhangs its own padding box in
   the design, so the box is sized independently of the artwork */
.tw-bfcm .bfcm-moby-btn-play {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: url(images/icon-play-ocean.svg) center / 14px 16.8px no-repeat;
}
/* 14px, not the pill's 16 — the two labels share a baseline in the design but
   the link is set a step smaller, same as the small card CTA. */
.tw-bfcm .bfcm-moby-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.2;
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  color: var(--sky);
  white-space: nowrap;
}
.tw-bfcm .bfcm-moby-link:hover .bfcm-moby-link-arrow {
  transform: translateX(3px);
}
.tw-bfcm .bfcm-moby-link:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
.tw-bfcm .bfcm-moby-link-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: url(images/arrow-right-sky.svg) center / contain no-repeat;
  transition: transform 0.2s ease;
}
.tw-bfcm .bfcm-moby-video {
  display: block;
  flex: 0 1 auto;
  align-self: stretch;
  aspect-ratio: 815 / 470;
  background: url(images/moby-video.webp) center / cover no-repeat;
}
.tw-bfcm .bfcm-moby-video:focus-visible {
  outline: 3px solid var(--deep-ocean);
  outline-offset: -3px;
}

@media (max-width: 900px) {
  .tw-bfcm .bfcm-moby-card {
    flex-direction: column;
    height: auto;
  }
  .tw-bfcm .bfcm-moby-text {
    flex: 0 0 auto;
    align-self: auto;
    width: 100%;
    gap: 32px;
    padding: 32px 24px;
  }
  .tw-bfcm .bfcm-moby-video {
    flex: 0 0 auto;
    align-self: auto;
    width: 100%;
  }
}

/* =========================================================================
   Video modal
   Opened by the Moby thumbnail and its button. The player is injected on open
   and torn out on close — so nothing is requested from YouTube until someone
   asks for it, and closing genuinely stops playback rather than hiding it.
   ========================================================================= */
.tw-bfcm .bfcm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tw-bfcm .bfcm-modal[hidden] {
  display: none;
}
.tw-bfcm .bfcm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 41, 62, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tw-bfcm .bfcm-modal-panel {
  position: relative;
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tw-bfcm .bfcm-modal-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
}
.tw-bfcm .bfcm-modal-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tw-bfcm .bfcm-modal-close {
  align-self: flex-end;
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.tw-bfcm .bfcm-modal-close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.tw-bfcm .bfcm-modal-close:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
}
/* the X, drawn rather than fetched */
.tw-bfcm .bfcm-modal-close::before,
.tw-bfcm .bfcm-modal-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}
.tw-bfcm .bfcm-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.tw-bfcm .bfcm-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* the thumbnail is a link, so give it a hint that it does something */
.tw-bfcm .bfcm-moby-video {
  transition: opacity 0.2s ease;
}
.tw-bfcm .bfcm-moby-video:hover {
  opacity: 0.92;
}

@media (prefers-reduced-motion: no-preference) {
  .tw-bfcm .bfcm-modal:not([hidden]) .bfcm-modal-panel {
    animation: bfcm-modal-in 0.22s ease-out both;
  }
  @keyframes bfcm-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: none; }
  }
}

/* Stack once the two fixed-width columns (500 + 460 + 40 gap) stop fitting. */
@media (max-width: 1100px) {
  .tw-bfcm .bfcm-signup-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .tw-bfcm .bfcm-signup-text {
    width: 100%;
    flex: 0 1 auto;
    max-width: 500px;
  }
  .tw-bfcm .bfcm-signup-form {
    width: 100%;
    max-width: 500px;
    flex: 0 1 auto;
  }
  .tw-bfcm .bfcm-emailform {
    width: 100%;
    max-width: 460px;
  }
}

@media (max-width: 900px) {
  .tw-bfcm { --pad-x: 24px; }
  .tw-bfcm .t-h1 { font-size: 40px; }
  .tw-bfcm .t-h2 { font-size: 32px; }
  .tw-bfcm .t-h3 { font-size: 28px; }
  .tw-bfcm .bfcm-section { padding: 60px 24px; }

  .tw-bfcm .bfcm-signup { padding: 60px var(--pad-x) 40px; }
  .tw-bfcm .bfcm-signup-inner { gap: 32px; }
  .tw-bfcm .bfcm-signup-text { gap: 24px; }
  /* let the headline find its own break rather than forcing the desktop one */
  .tw-bfcm .bfcm-signup-text h2 br { display: none; }

  .tw-bfcm .bfcm-greet { padding: 20px var(--pad-x); }

  .tw-bfcm .bfcm-plan { padding: 60px var(--pad-x); gap: 48px; }
  .tw-bfcm .bfcm-plan-inner { gap: 32px; }
  .tw-bfcm .bfcm-cards { flex-direction: column; }
  /* flex-basis switches to the block axis in a column, so `flex: 1 1 0` would
     hand every card a 0 height. Let content size them instead. */
  .tw-bfcm .bfcm-card { flex: 0 0 auto; min-height: 0; }
  .tw-bfcm .bfcm-plan-text { gap: 24px; }
  .tw-bfcm .bfcm-callout-panel { padding: 32px 24px; }
  .tw-bfcm .bfcm-callout-copy { gap: 20px; }

  .tw-bfcm .bfcm-webinar { padding: 60px var(--pad-x); }
  .tw-bfcm .bfcm-webinar-text { padding: 32px 24px; gap: 32px; }
  .tw-bfcm .bfcm-webinar-top { gap: 28px; }
  .tw-bfcm .bfcm-webinar-copy { gap: 28px; }
  .tw-bfcm .bfcm-webinar-copy h2 { font-size: 32px; }
  .tw-bfcm .bfcm-webinar-sub,
  .tw-bfcm .bfcm-webinar-date { font-size: 20px; }

  .tw-bfcm .bfcm-sonar { padding: 60px var(--pad-x); gap: 32px; }

  .tw-bfcm .bfcm-compare { padding: 60px var(--pad-x); gap: 32px; }
  .tw-bfcm .bfcm-compare-head { gap: 24px; }
  .tw-bfcm .bfcm-compare-body { padding: 24px; }
  .tw-bfcm .bfcm-compare-text h3 { font-size: 32px; }

  .tw-bfcm .bfcm-act { padding: 60px var(--pad-x); gap: 32px; }
  .tw-bfcm .bfcm-act-head { gap: 24px; }

  .tw-bfcm .bfcm-measure { padding: 60px 0; gap: 32px; }
  .tw-bfcm .bfcm-measure-head-inner { gap: 24px; flex: 1 1 auto; width: auto; }
  /* no room to sit beside the heading — drop the controls under it */
  .tw-bfcm .bfcm-measure-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .tw-bfcm .bfcm-measure-nav { flex: 0 0 auto; justify-content: flex-start; }
}

/* The button label is long enough that at phone widths it leaves the field
   only ~50px — too narrow to type in. Below 560 the pill becomes a stack:
   field on top, button full width beneath, both still inside the grey frame. */
@media (max-width: 560px) {
  .tw-bfcm .bfcm-hsform form {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
  }
  .tw-bfcm .bfcm-hsform .hs_email,
  .tw-bfcm .bfcm-hsform .hs_submit {
    flex: 1 0 100%;
  }
  #bfcm-hsform input.hs-input {
    padding: 12px 14px;
  }
  .tw-bfcm .bfcm-hsform input.hs-button {
    width: 100%;
  }
  /* the pill is two rows tall now, so the error can't sit on top of it */
  .tw-bfcm .bfcm-hsform .hs-error-msgs {
    position: static;
    margin-top: 6px;
  }
}

@media (max-width: 420px) {
  .tw-bfcm .bfcm-emailform button { padding: 12px 14px; }
  .tw-bfcm .bfcm-emailform input { padding-left: 14px; }
}