/* Preview adjustments kept separate from the supplied redesign archive. */
/* A single bundled display face avoids decorative or mixed-font J/j glyphs. */
@font-face {
  font-family: "Sales Serif";
  src: url('/fonts/sales-serif.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sales Serif";
  src: url('/fonts/sales-serif-italic.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

body.fx {
  --f-display: "Sales Serif", Georgia, serif;
}

.fx .fx-hero > .wrap {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.fx .fx-hero > .wrap > div {
  width: 100%;
}

.fx .fx-hero h1 {
  max-width: 16em;
  margin-inline: auto;
}

.fx .fx-hero .lead {
  margin-inline: auto;
}

.fx .fx-hero .tags,
.fx .fx-hero .ctas,
.fx .fx-hero .fx-hstats {
  justify-content: center;
}

.fx .fx-hero .fx-heromedia {
  max-width: 960px;
}

/* Center the sales narrative, without centering form fields or long lists. */
.fx main > .sec > .wrap > h2,
.fx .sh,
.fx .fx-shead,
.fx .fx-band,
.fx .fx-pillar__head,
.fx .fx-bonus__head,
.fx .scene__text,
.fx .fx-about__text {
  text-align: center;
  margin-inline: auto;
}

.fx .sh,
.fx .fx-shead {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.fx .sh h2,
.fx .sh .lede,
.fx .scene__text p,
.fx .fx-band {
  margin-inline: auto;
}

.fx .fx-pillar,
.fx .fx-bonus {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.fx .fx-pillar > *,
.fx .fx-bonus > * {
  width: 100%;
  max-width: 900px;
}

.fx .fx-pillar__head,
.fx .fx-bonus__head {
  max-width: 760px;
}

.fx .fx-pillar__head .tags,
.fx .fx-bonus__head .tags,
.fx .tabs__list,
.fx .tabs__panel .tags,
.fx .fx-cd__g,
.fx .fx-cta,
.fx .fx-vis {
  justify-content: center;
}

.fx .scene:not(.fx-sum) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.fx .scene__text {
  max-width: 760px;
}

.fx .fx-card,
.fx .ticks,
.fx .faq__list,
.fx .fx-order {
  text-align: left;
}

/* A failed or slow preview video must never leave an empty mockup. */
.fx .fx-vis {
  justify-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.fx .fx-vis .fx-shotset {
  width: 100%;
  min-width: 0;
  max-width: 900px;
  justify-self: stretch;
}

.fx .fx-shotset .frame {
  background-image: url('/redesign/fx/bm/app-textace-generator.webp');
  background-size: cover;
  background-position: top center;
}

.fx .fx-shotset .frame video {
  background: transparent;
}

/* Fit complete screenshots into the screen instead of cropping their content. */
.fx .dv__scr img,
.fx .tour__screens > img {
  object-fit: contain;
  object-position: center;
}

.fx .dv__scr {
  background: var(--paper);
}

.fx .fx-tour .tour__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 900px;
  margin-inline: auto;
}

.fx .fx-tour .tour__device {
  order: 0;
  width: 100%;
  padding-top: 0;
}

.fx .fx-tour .tour__step {
  text-align: center;
  align-items: center;
}

.fx .fx-tour .tour__screens > :first-child:not(:has(~ .on)) {
  opacity: 1;
  transform: none;
}
/* Word-reveal masks must not clip descenders or italic overhangs (j, y, g, p). */
body.fx .wd {
  padding: 0.04em 0.14em 0.3em;
  margin: -0.04em -0.14em -0.3em;
}

body.fx h1 .wd,
body.fx h2 .wd {
  margin-right: calc(-0.14em + 0.02em);
}

/* Center every remaining narrative block; long lists, chats, cases and forms stay left for readability. */
body.fx main .sec {
  text-align: center;
}

body.fx main .sec :is(h2, h3, p, .lede, .fx-big, .fx-pull__q, .fx-pull__p, .fx-pull__k, .fx-stats, .fx-steps, .bmflow, .fx-vs, .stepx > p) {
  margin-inline: auto;
}

body.fx main .sec :is(.stepx, .fx-stat, .fx-cta, .fx-cta__p) {
  justify-items: center;
  align-items: center;
}

body.fx main .sec :is(.bmflow, .fx-stats, .tags, .stories-nav) {
  justify-content: center;
}

body.fx main .sec :is(.ticks, .faq__list, .fx-faqgroup, .fx-order, form, .chat, .fx-rows, .fx-case, .fx-card) {
  text-align: left;
}

/* Stacked pillar heads must scroll with their content instead of covering it. */
body.fx .fx-pillar__head {
  position: static;
}

body.fx main .sec :is(.fx-box, .fx-out, .fx-cd) {
  justify-items: center;
}

body.fx main .sec :is(.fx-free, .fx-cta, .fx-more > summary) {
  justify-content: center;
}

body.fx main .sec .fx-swipe {
  justify-content: center;
}

body.fx main .sec .fx-pull {
  margin-inline: auto;
  justify-items: center;
}

body.fx main .sec :is(.fx-after, .fx-sum, .fx-guar, .fx-guar__l) {
  justify-items: center !important;
  text-align: center;
}

body.fx main .sec .fx-h3 {
  text-align: center;
  margin-inline: auto;
}

body.fx main .sec .fx-cta {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

body.fx main .sec h3.fx-h3 {
  justify-self: center;
  width: 100%;
}

body.fx main .sec .fx-shead {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Keep the trust figures below the portrait, never over the face or photo. */
body.fx .fx-trust .bm-me {
  width: 100%;
  max-width: 760px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
}

body.fx .fx-trust .bm-me__ph {
  grid-column: 1 / -1;
  width: min(360px, 100%);
  margin-bottom: 8px;
}

body.fx .fx-trust .bm-me .flo--num {
  position: static !important;
  inset: auto !important;
  transform: none;
  animation: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  padding: 16px;
  text-align: center;
}

body.fx .fx-trust .bm-me .flo--num b {
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 8px;
}

@media (max-width: 599px) {
  body.fx .fx-trust .bm-me {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}