/* The Field Manual for AI-Leveraged Growth — book landing page.
   Extends /styles.css; shares its tokens, header, footer, buttons, and form
   styles. The dark bands take their navy + blueprint-grid language from the
   book cover so the page reads as the book's own room inside the site. */

:root {
  --fm-ink-deep: #0d1626;
  --fm-navy-2: #111d33;
  --fm-grid-line: rgba(159, 213, 207, 0.07);
  --fm-orange: #e0892b;
  --fm-cloud: #c7d3e2;
}

.fm-page {
  background: var(--white);
}

/* Content fades out under the floating header pill instead of slicing through
   the gap above it: a fixed blurred strip spans the viewport top on this page. */
.fm-header-veil {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 45;
  height: 100px;
  pointer-events: none;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
  mask-image: linear-gradient(180deg, #000 58%, transparent);
}

/* ---- shared dark-band language ------------------------------------ */

.fm-eyebrow {
  color: #9fd5cf;
}

.fm-hero,
.fm-thesis-band,
.fm-results-band,
.fm-teams-band,
.fm-get-band {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--fm-ink-deep), var(--fm-navy-2));
  color: var(--fm-cloud);
}

/* The finale is ONE dark room: the window band and the get band share a
   single gradient, grid, and pointer glow so the light crosses the seam. */
.fm-finale {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--fm-ink-deep), var(--fm-navy-2));
  color: var(--fm-cloud);
}

.fm-finale .fm-window-band,
.fm-finale .fm-get-band {
  overflow: visible;
  background: transparent;
}

.fm-hero::before,
.fm-results-band::before,
.fm-teams-band::before,
.fm-finale::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--fm-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--fm-grid-line) 1px, transparent 1px),
    radial-gradient(circle at var(--mx, 74%) var(--my, 30%), rgba(15, 118, 110, 0.22), transparent 34%);
  background-size: 42px 42px, 42px 42px, auto;
  content: "";
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Light never clips. The hero ends against the white problem band, so the
   pointer glow and the grid both have to be spent before they reach the seam
   instead of getting cut off by it. */
.fm-hero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}

.fm-hero h1,
.fm-thesis-band blockquote,
.fm-results-band h2,
.fm-teams-band h2,
.fm-get-band h2 {
  color: var(--white);
}

/* ---- hero ----------------------------------------------------------- */

/* Top padding clears the fixed header pill, so it belongs to the header's
   height, not the viewport width. 104px leaves ~20px between the pill's bottom
   border and the eyebrow's line box (~29px to the glyph), which is the same
   clearance the phone breakpoint has always shipped; the 12px it gives back
   goes to the CTA, which was landing under the fold at 1440x900.

   One hero measure: the scene and the stats hairline below it share
   `--fm-hero-width`, so the hero has a single outer edge at every viewport
   instead of a 979px scene inside a 1180px rule. The clamp is redefined per
   breakpoint below; the scene's fold clamp is what usually binds it. */
.fm-hero {
  --fm-hero-width: min(100%, var(--max));
  padding: 104px 24px 100px;
  text-align: center;
}

/* The hero is one centered column: a short statement, then one large 16:9
   scene that carries the story visually. No second focal object. */
.fm-hero-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 940px);
  margin: 0 auto;
}

/* The headline is one sentence with one payoff. `balance` handles the split
   at desktop ("The next growth curve / is built, not hired."); the nowrap span
   in the markup is what stops the phone from orphaning "not hired." onto a
   third line. 21ch holds the two-line shape from 760px up. */
.fm-hero h1 {
  max-width: 21ch;
  margin: 0 auto 18px;
  font-size: 3.55rem;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.fm-nowrap {
  white-space: nowrap;
}

/* Narrower than the H1 so the copy block keeps its pyramid silhouette. */
.fm-hero-lede {
  max-width: 50ch;
  margin: 10px auto 0;
  color: var(--fm-cloud);
  font-size: 1.14rem;
  line-height: 1.55;
}

.fm-trust-line {
  margin: 14px 0 0;
  color: rgba(199, 211, 226, 0.72);
  font-size: 0.88rem;
}

.button.fm-ghost {
  border-color: rgba(199, 211, 226, 0.34);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}

.button.fm-ghost:hover,
.button.fm-ghost:focus-visible {
  border-color: rgba(199, 211, 226, 0.62);
  background: rgba(255, 255, 255, 0.09);
}

.fm-hero .button.primary {
  background: var(--teal);
  box-shadow: 0 16px 38px rgba(15, 118, 110, 0.32);
}

/* The CTA group sits under the scene: the visual sells, then the ask. */
.fm-hero-cta {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin: 0 auto;
}

.fm-hero-cta .hero-actions {
  justify-content: center;
  margin-top: 18px;
}

/* ---- hero scene: one 16:9 photographic frame --------------------------
   The hero's single focal object is a raster, so this block only has to do
   three things: hold a true 16:9 box at every width, cover-fit the image into
   it, and dissolve its hard bottom edge into the page ground. No parallax, no
   draw-in; a photograph earns its weight standing still. */

.fm-hero-scene {
  position: relative;
  z-index: 1;
  width: var(--fm-hero-width);
  margin: 12px auto 0;
  /* <figure> carries a UA margin. */
  margin-inline: auto;
  border-radius: 14px;
  /* The gradient below is painted on ::after, which would square off the
     rounded corners without this. */
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.fm-hero-scene picture {
  display: block;
}

.fm-hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* The source is 1650x928 after the 16:9 crop, so cover only ever trims
     sub-pixel rounding. object-position keeps the causeway terminus and the
     rising light in frame if a future box is ever narrower than 16:9. */
  object-fit: cover;
  object-position: 50% 46%;
}

/* The image's bottom edge would otherwise stop as a cut line above the CTA.
   Same 22% ramp into the page ground the composite study shipped. */
.fm-hero-scene::after {
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(to bottom, rgba(6, 11, 20, 0), rgba(6, 11, 20, 0.55));
  content: "";
  pointer-events: none;
}

/* Entrance: the frame carries the page's shared `.reveal` (fade + 16px rise,
   once, already reduced-motion safe in styles.css) and nothing else. No
   bespoke hero animation, no loop, no parallax. */

/* The hairline strip is the hero's bottom edge, so it takes the same measure as
   the scene above it (`--fm-hero-width`) rather than the page's 1180 text
   measure. REVERT (one line): add `--fm-hero-strip-width: min(100%, var(--max));`
   to the `.fm-hero` rule and the strip goes back to the full 1180 width. */
.fm-hero-stats {
  text-align: left;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: var(--fm-hero-strip-width, var(--fm-hero-width));
  margin: 58px auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(159, 213, 207, 0.16);
}

.fm-hero-stats span {
  display: block;
  color: var(--white);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.fm-hero-stats .fm-stat-icon {
  display: block;
  margin-bottom: 10px;
  color: #9fd5cf;
}

.fm-hero-stats .fm-stat-icon svg {
  width: 22px;
  height: 22px;
}

.fm-hero-stats small {
  display: block;
  margin-top: 4px;
  max-width: 21ch;
  color: rgba(199, 211, 226, 0.78);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* ---- problem band --------------------------------------------------- */

.fm-problem-band {
  background: var(--white);
}

.fm-lane,
.fm-problem-band .section-intro,
.fm-problem-ledger,
.fm-results-band .section-intro,
.fm-results-grid,
.fm-ev-callout,
.fm-audience-band .section-intro,
.fm-audience-grid,
.fm-inside-band .section-intro,
.fm-pyramid-layout,
.fm-chapter-map,
.fm-artifacts,
.fm-faq-band .section-intro,
.fm-speaking-layout,
.fm-author-layout,
.fm-inquiry-layout {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.fm-problem-ledger {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.fm-problem-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

/* Blueprint-quiet stat visuals in the right rail of each problem row. */
.fm-stat-visual {
  display: grid;
  gap: 10px;
  align-content: center;
}

.fm-visual-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fm-capacity-bar {
  display: flex;
  height: 22px;
  border: 1px solid rgba(20, 35, 59, 0.22);
  border-radius: 3px;
  overflow: hidden;
}

.fm-capacity-lost {
  background: repeating-linear-gradient(
    -45deg,
    rgba(140, 95, 43, 0.5) 0 5px,
    rgba(140, 95, 43, 0.14) 5px 10px
  );
}

/* Stat-bar widths as classes (no inline style attributes — the site's strict
   CSP forbids them). */
.fm-w-62 { width: 62%; }
.fm-w-100 { width: 100%; }
.fm-w-34 { width: 34%; }
.fm-w-5 { width: 5%; }

.fm-capacity-left {
  flex: 1;
  background: rgba(15, 118, 110, 0.55);
}

.fm-account-dots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.fm-account-dots span {
  height: 22px;
  border: 1px solid rgba(15, 118, 110, 0.6);
  border-radius: 3px;
  background: rgba(15, 118, 110, 0.5);
}

.fm-account-dots span.is-low {
  border-color: rgba(140, 95, 43, 0.55);
  background: repeating-linear-gradient(
    -45deg,
    rgba(140, 95, 43, 0.42) 0 5px,
    rgba(140, 95, 43, 0.1) 5px 10px
  );
}

.fm-funnel {
  display: grid;
  gap: 5px;
}

.fm-funnel-step {
  height: 14px;
  border: 1px solid rgba(20, 35, 59, 0.22);
  border-radius: 2px;
  background: rgba(20, 35, 59, 0.08);
}

.fm-funnel-step.fm-funnel-end {
  min-width: 14px;
  border-color: rgba(140, 95, 43, 0.65);
  background: rgba(140, 95, 43, 0.55);
}

.fm-problem-row strong {
  color: var(--teal-dark);
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.fm-problem-row h3 {
  margin-bottom: 8px;
}

.fm-problem-row p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
}

.fm-problem-close {
  margin: 38px 0 0;
  max-width: 700px;
  padding: 6px 0 6px 26px;
  border-left: 3px solid var(--fm-orange);
  color: var(--navy);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.4;
}

/* The turn of the story: lands directly under the productivity-theater quote,
   aligned with its text edge (26px pad + 3px border). */
.fm-problem-kicker {
  margin: 16px 0 0;
  max-width: 700px;
  padding-left: 29px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.55;
}

/* ---- thesis band ---------------------------------------------------- */

.fm-thesis-band {
  padding: 96px 24px;
  background: linear-gradient(180deg, var(--fm-navy-2), var(--fm-ink-deep));
}

.fm-thesis-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 880px);
  margin: 0 auto;
  text-align: center;
}

.fm-thesis-band blockquote {
  margin: 0 0 26px;
  font-size: 2.55rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.fm-thesis-line {
  display: block;
}

.fm-thesis-payoff {
  display: block;
  margin-top: 6px;
  color: var(--fm-orange);
}

.fm-thesis-question {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(199, 211, 226, 0.86);
  font-size: 1.06rem;
  line-height: 1.6;
}

.fm-thesis-question em {
  color: var(--white);
}

/* Inline links on the dark statement bands keep the teal-mist accent. */
.fm-thesis-band .fm-inline-link {
  color: #9fd5cf;
}

/* ---- window band (reuses the thesis-band room, quieter type scale) ---- */

.fm-window-band blockquote {
  max-width: 820px;
  margin-inline: auto;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0;
}

.fm-window-band .fm-thesis-question {
  max-width: 620px;
}

/* First-vs-second divergence, drawn in the page's blueprint stroke language:
   two paths from one origin; the first compounds, the second stays shallow. */
.fm-window-visual {
  max-width: 560px;
  margin: 30px auto 24px;
}

.fm-window-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.fm-window-base {
  stroke: rgba(159, 213, 207, 0.25);
  stroke-width: 1;
}

.fm-window-path-first {
  stroke: #9fd5cf;
  stroke-width: 2.4;
}

.fm-window-path-second {
  stroke: rgba(224, 137, 43, 0.75);
  stroke-width: 2;
}

.fm-window-dot-first {
  fill: #9fd5cf;
}

.fm-window-dot-second {
  fill: #e0892b;
}

.fm-window-visual text {
  fill: #9fd5cf;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.fm-window-visual .fm-window-label-second {
  fill: rgba(224, 137, 43, 0.9);
}

/* SVG text scales with the viewBox; hold the labels above a readable floor
   on phones. */
@media (max-width: 480px) {
  .fm-window-visual text {
    font-size: 17px;
  }
}

/* Draw-in on reveal; everything renders complete without JS or with reduced
   motion. */
.has-js .fm-window-visual path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.has-js .fm-window-visual.is-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms ease 150ms;
}

.has-js .fm-window-visual circle,
.has-js .fm-window-visual text {
  opacity: 0;
}

.has-js .fm-window-visual.is-visible circle,
.has-js .fm-window-visual.is-visible text {
  opacity: 1;
  transition: opacity 420ms ease 1050ms;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .fm-window-visual path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
  }

  .has-js .fm-window-visual circle,
  .has-js .fm-window-visual text {
    opacity: 1;
    transition: none;
  }
}

/* ---- inside band ---------------------------------------------------- */

.fm-inside-band {
  background: var(--soft);
}

.fm-pyramid-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  gap: 38px;
  align-items: center;
  margin-top: 18px;
}

.fm-pyramid {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.fm-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font-weight: 750;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.fm-layer span {
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.fm-layer[data-layer="0"] { width: 46%; min-width: 240px; }
.fm-layer[data-layer="1"] { width: 59%; min-width: 260px; }
.fm-layer[data-layer="2"] { width: 72%; min-width: 280px; }
.fm-layer[data-layer="3"] { width: 85%; min-width: 300px; }
.fm-layer[data-layer="4"] { width: 98%; min-width: 320px; }

.fm-layer:hover,
.fm-layer:focus-visible {
  border-color: var(--teal);
  transform: translateY(-1px);
}

.fm-layer.is-active {
  border-color: var(--teal-dark);
  background: var(--teal-dark);
  color: var(--white);
}

.fm-layer.is-active span {
  color: #9fd5cf;
}

.fm-pyramid-cue {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fm-layer-detail {
  align-self: center;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.fm-layer-detail strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 1.22rem;
}

.fm-layer-detail p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
}

.fm-layer-detail small {
  display: block;
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: pre-line;
}

.fm-chapter-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 46px;
}

.fm-part {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.fm-part-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 8px;
  color: var(--teal-dark);
  background: var(--soft);
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.fm-part-icon svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) {
  .fm-part:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.4);
    box-shadow: var(--shadow);
  }

  .fm-part:hover .fm-part-icon {
    color: var(--fm-orange);
    border-color: rgba(224, 137, 43, 0.45);
    transform: scale(1.06);
  }
}

.fm-part-label {
  display: block;
  margin-bottom: 10px;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Labels wrap to different line counts across the row; reserving a two-line
   block keeps all four card paragraphs on one shared top edge. */
@media (min-width: 1081px) {
  .fm-part-label {
    min-height: 3em;
  }
}

.fm-part p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.fm-artifacts {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  margin-top: 46px;
  padding: 28px 30px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  background: var(--white);
}

.fm-artifacts-head {
  margin: 0;
  color: var(--navy);
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
}

/* The bullet list rides a connected blueprint rail: one vertical line, a node
   per deliverable — quiet, but no longer furniture. */
.fm-artifacts ul {
  position: relative;
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
  color: var(--muted);
}

.fm-artifacts ul::before {
  position: absolute;
  left: 4px;
  top: 0.62em;
  bottom: 0.62em;
  width: 1px;
  background: linear-gradient(180deg, var(--teal), rgba(224, 137, 43, 0.75));
  content: "";
}

.fm-artifacts li {
  position: relative;
}

.fm-artifacts li::before {
  position: absolute;
  left: -26px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: var(--white);
  content: "";
}

.fm-artifacts li:last-child::before {
  border-color: var(--fm-orange);
}

/* ---- results band ---------------------------------------------------
   The payoff moment is the page's deliberate temperature change: the one
   mid-page dark room, so the after-figures are the brightest objects on
   the page. Contrast does the work; no counters, no animation. */

.fm-results-band > * {
  position: relative;
  z-index: 1;
}

/* The lede is the disclaimer for the figures below it; a qualifier never
   renders fainter than the claims it qualifies. */
.fm-results-band .section-lede {
  color: var(--fm-cloud);
}

.fm-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.fm-result {
  padding: 24px 22px;
  border: 1px solid rgba(159, 213, 207, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.fm-result-from {
  display: inline-block;
  color: rgba(199, 211, 226, 0.62);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-color: rgba(224, 137, 43, 0.65);
  text-decoration-thickness: 2px;
}

.fm-result-to {
  display: block;
  margin-top: 4px;
  color: var(--white);
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* Before/after delta bars: widths encode the card's own numbers (before as a
   fraction of the after midpoint), so the visual never overstates the copy.
   Static by design: the movement is the story, not the animation. */
.fm-result-bars {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}

.fm-result-bars span {
  display: block;
  height: 6px;
  border-radius: 2px;
}

.fm-result-bar-from {
  background: rgba(224, 137, 43, 0.45);
}

.fm-result-bar-to {
  background: #9fd5cf;
}

.fm-rb-67 { width: 67%; }
.fm-rb-77 { width: 77%; }
.fm-rb-82 { width: 82%; }
.fm-rb-85 { width: 85%; }
.fm-rb-100 { width: 100%; }

.fm-result p {
  margin: 12px 0 0;
  color: rgba(199, 211, 226, 0.78);
  font-size: 0.92rem;
}

.fm-ev-callout {
  margin-top: 26px;
  padding: 30px 34px;
  border-left: 3px solid var(--fm-orange);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.04);
}

/* The page's largest financial claim: the claim reads at full contrast and
   its qualifier reads at the SAME body legibility, never fainter. */
.fm-ev-callout p {
  max-width: 760px;
  margin: 0 0 8px;
  color: var(--fm-cloud);
  font-size: 1.24rem;
  line-height: 1.45;
}

.fm-ev-callout strong {
  color: var(--white);
  font-weight: 800;
}

.fm-ev-callout small {
  color: var(--fm-cloud);
  font-size: 0.9rem;
}

/* Proof stacked; now the ask. Rides directly under the enterprise-value
   callout so the buy decision sits next to the strongest number. */
.fm-results-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px 28px;
  width: min(100%, var(--max));
  margin: 30px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.fm-results-cta {
  border-top-color: rgba(159, 213, 207, 0.2);
}

.fm-results-cta p {
  max-width: 560px;
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
}

.fm-results-cta .button.primary {
  background: var(--teal);
  box-shadow: 0 14px 32px rgba(15, 118, 110, 0.3);
}

/* ---- audience band --------------------------------------------------- */

.fm-audience-band {
  background: var(--white);
}

.fm-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 26px;
}

.fm-audience-card {
  padding: 26px 24px;
  border-top: 3px solid var(--teal-dark);
  border-radius: 0 0 8px 8px;
  background: var(--soft);
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, opacity 200ms ease;
}

.fm-audience-card.fm-accent-teal { border-top-color: var(--teal); }
.fm-audience-card.fm-accent-navy { border-top-color: var(--navy); }
.fm-audience-card.fm-accent-brass { border-top-color: var(--fm-orange); }

.fm-audience-card.fm-accent-teal h3,
.fm-audience-card.fm-accent-teal .fm-card-icon { color: var(--teal-dark); }
.fm-audience-card.fm-accent-navy h3,
.fm-audience-card.fm-accent-navy .fm-card-icon { color: var(--navy); }
.fm-audience-card.fm-accent-brass h3,
.fm-audience-card.fm-accent-brass .fm-card-icon { color: var(--brass); }

.fm-card-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  transition: transform 200ms ease, border-color 200ms ease;
}

.fm-card-icon svg {
  width: 24px;
  height: 24px;
}

/* Spotlight: hovering one audience card quiets the others and lifts the one
   under the pointer. Find-your-card is the module's whole job. */
@media (hover: hover) {
  .fm-audience-grid:hover .fm-audience-card:not(:hover) {
    opacity: 0.55;
  }

  .fm-audience-card:hover {
    transform: translateY(-4px);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .fm-audience-card:hover .fm-card-icon {
    transform: scale(1.08);
    border-color: currentColor;
  }
}

.fm-audience-card h3 {
  margin-bottom: 10px;
}

.fm-audience-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.fm-audience-note {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-style: italic;
}

/* ---- teams / PE band ------------------------------------------------- */

.fm-teams-band {
  padding: 108px 24px;
}

.fm-teams-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 56px;
  align-items: center;
  width: min(100%, var(--max));
  margin: 0 auto;
}

.fm-teams-copy {
  order: -1;
  max-width: 720px;
}

/* One book fanning out to a portfolio: source cover bright, the rest of the
   grid rendered as blueprint outlines of the same artifact. */
.fm-portfolio-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 128px));
  gap: 18px;
  justify-content: center;
  align-self: center;
}

.fm-mini-cover {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(159, 213, 207, 0.42);
  border-radius: 4px;
  background:
    linear-gradient(rgba(159, 213, 207, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 213, 207, 0.07) 1px, transparent 1px),
    rgba(255, 255, 255, 0.03);
  background-size: 12px 12px, 12px 12px;
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

/* Hovering a ghost "prints" it a step: brighter frame, warmer mark. */
@media (hover: hover) {
  .fm-mini-cover:hover {
    transform: translateY(-3px);
    border-color: rgba(224, 137, 43, 0.55);
    background-color: rgba(255, 255, 255, 0.06);
  }

  .fm-mini-cover:hover::after {
    background: rgba(224, 137, 43, 0.28);
  }

  .fm-mini-cover.is-source:hover {
    transform: translateY(-3px) scale(1.03);
  }
}

/* Each ghost is a deliberate blueprint placeholder of the same cover:
   title bars up top, the pyramid mark below — unmistakably drawn, not broken. */
.fm-mini-cover::before {
  position: absolute;
  inset: 12% 18% auto 18%;
  height: 4px;
  border-radius: 1px;
  background: rgba(159, 213, 207, 0.5);
  box-shadow: 0 8px 0 -1px rgba(159, 213, 207, 0.32);
  content: "";
}

.fm-mini-cover::after {
  position: absolute;
  inset: 38% 24% 22% 24%;
  background: rgba(159, 213, 207, 0.16);
  border: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.fm-mini-cover.is-source::before {
  display: none;
}

.fm-mini-cover.is-source {
  border-color: rgba(224, 137, 43, 0.6);
  box-shadow: 0 18px 44px rgba(2, 6, 14, 0.5);
}

.fm-mini-cover.is-source::after {
  display: none;
}

.fm-mini-cover.is-source img {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  object-fit: cover;
}

/* Progressive fill: ghosts materialize across the grid after reveal. */
.has-js .fm-portfolio-visual .fm-mini-cover:not(.is-source) {
  opacity: 0;
  transition: opacity 500ms ease;
}

.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:not(.is-source) {
  opacity: 1;
}

.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(2) { transition-delay: 120ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(3) { transition-delay: 240ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(4) { transition-delay: 360ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(5) { transition-delay: 480ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(6) { transition-delay: 600ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(7) { transition-delay: 720ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(8) { transition-delay: 840ms; }
.has-js .fm-portfolio-visual.is-visible .fm-mini-cover:nth-child(9) { transition-delay: 960ms; }

@media (prefers-reduced-motion: reduce) {
  .has-js .fm-portfolio-visual .fm-mini-cover:not(.is-source) {
    opacity: 1;
    transition: none;
  }
}

.fm-teams-band h2 {
  margin-bottom: 18px;
  font-size: 3.1rem;
  line-height: 1.05;
}

.fm-teams-copy > p {
  max-width: 640px;
  color: var(--fm-cloud);
  font-size: 1.08rem;
  line-height: 1.6;
}

.fm-teams-list {
  display: grid;
  gap: 12px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.fm-teams-list li {
  position: relative;
  max-width: 620px;
  padding-left: 24px;
  color: rgba(199, 211, 226, 0.88);
  line-height: 1.5;
}

.fm-teams-list li::before {
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: var(--fm-orange);
  content: "";
}

.fm-teams-list strong {
  color: var(--white);
}

.fm-teams-band .button.primary {
  background: var(--teal);
}

/* ---- speaking band ---------------------------------------------------- */

.fm-speaking-band {
  background: var(--white);
}

.fm-speaking-copy > p {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.6;
}

.fm-speaking-band h2 {
  max-width: 720px;
}

.fm-talks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 30px 0;
}

.fm-talk {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.fm-talk-number {
  display: block;
  margin-bottom: 12px;
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.fm-talk-number::after {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--teal), var(--fm-orange));
  content: "";
  transition: width 260ms ease;
}

@media (hover: hover) {
  .fm-talk:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 118, 110, 0.4);
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .fm-talk:hover .fm-talk-number::after {
    width: 100%;
  }

  .fm-speaker-creds span {
    transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .fm-speaker-creds span:hover {
    border-color: var(--teal);
    color: var(--teal-dark);
    transform: translateY(-1px);
  }
}

.fm-talk strong {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 1.14rem;
  font-weight: 800;
  line-height: 1.28;
}

.fm-talk p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.fm-speaker-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}

.fm-speaker-creds span {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.84rem;
  font-weight: 750;
}

/* ---- author band ------------------------------------------------------ */

.fm-author-band {
  background: var(--soft);
}

.fm-author-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}

.fm-author-portrait {
  max-width: 300px;
  margin: 0;
}

/* Drafting-mark frame: teal corner tick top-left, brass bottom-right, the
   same paired accents the rest of the page's blueprint language uses. */
.fm-portrait-frame {
  position: relative;
  display: block;
}

.fm-portrait-frame::before,
.fm-portrait-frame::after {
  position: absolute;
  width: 36px;
  height: 36px;
  content: "";
  pointer-events: none;
}

.fm-portrait-frame::before {
  top: -10px;
  left: -10px;
  border-top: 2px solid var(--teal);
  border-left: 2px solid var(--teal);
}

.fm-portrait-frame::after {
  right: -10px;
  bottom: -10px;
  border-right: 2px solid var(--fm-orange);
  border-bottom: 2px solid var(--fm-orange);
}

.fm-author-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.fm-author-portrait figcaption {
  display: grid;
  gap: 2px;
  margin-top: 18px;
}

.fm-author-portrait strong {
  color: var(--navy);
}

.fm-author-portrait span {
  color: var(--muted);
  font-size: 0.88rem;
}

.fm-author-copy > p {
  max-width: 660px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.62;
}

.fm-author-copy em {
  color: var(--navy);
}

/* Demoted book shelf: on THIS page the other titles are author credibility
   below the final CTA, not alternatives. Plain text, no covers, no links; the
   site-wide shelf elsewhere is untouched. */
.fm-also-by {
  position: relative;
  z-index: 1;
  width: min(100%, 1010px);
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(159, 213, 207, 0.16);
  color: rgba(199, 211, 226, 0.62);
  font-size: 0.9rem;
}

.fm-also-by span {
  color: rgba(199, 211, 226, 0.85);
  font-weight: 700;
}

/* ---- inquiry band ------------------------------------------------------ */

.fm-inquiry-band {
  background: var(--white);
}

.fm-inquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(340px, 1.08fr);
  gap: 48px;
  align-items: center;
}

.fm-inquiry-copy > p {
  max-width: 520px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.fm-inline-link {
  color: var(--teal-dark);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

select {
  width: 100%;
  border: 1px solid #cfd8e0;
  border-radius: 6px;
  background: #fbfcfd;
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

select:focus {
  border-color: var(--teal);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.11);
}

/* ---- FAQ band ----------------------------------------------------------- */

.fm-faq-band {
  background: var(--soft);
}

.fm-faq-list {
  display: grid;
  gap: 10px;
  margin-top: 26px;
  max-width: 860px;
  margin-inline: 0;
}

.fm-faq {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.fm-faq summary {
  padding: 20px 48px 20px 24px;
  position: relative;
  color: var(--navy);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.fm-faq summary::-webkit-details-marker {
  display: none;
}

.fm-faq summary::after {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--teal-dark);
  border-bottom: 2px solid var(--teal-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
  content: "";
}

.fm-faq {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
  .fm-faq:hover {
    border-color: rgba(15, 118, 110, 0.4);
  }
}

/* Open questions carry a visible held state (native click toggle). */
.fm-faq[open] {
  border-color: var(--teal);
  box-shadow: 0 10px 28px rgba(15, 118, 110, 0.1);
}

.fm-faq[open] summary::after {
  border-color: var(--fm-orange);
}

.fm-faq[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.fm-faq p {
  margin: 0;
  padding: 0 24px 22px;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---- get band ------------------------------------------------------------ */

.fm-get-band {
  padding: 108px 24px;
}

.fm-get-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 58px;
  align-items: center;
  width: min(100%, 1010px);
  margin: 0 auto;
}

.fm-get-cover {
  width: 280px;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 30px 66px rgba(2, 6, 14, 0.62);
}

.fm-get-band h2 {
  margin-bottom: 14px;
  font-size: 2.9rem;
  line-height: 1.05;
}

.fm-get-copy > p {
  max-width: 560px;
  color: var(--fm-cloud);
  font-size: 1.06rem;
  line-height: 1.6;
}

.fm-get-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.fm-get-band .button.primary {
  background: var(--teal);
}

.fm-buy-note {
  margin: 14px 0 0;
  color: rgba(199, 211, 226, 0.66);
  font-size: 0.86rem;
}

/* ---- sticky buy bar (mobile) ---------------------------------------------- */

.fm-sticky-buy {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(159, 213, 207, 0.2);
  border-radius: 10px;
  background: rgba(13, 22, 38, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(2, 6, 14, 0.5);
  transform: translateY(calc(100% + 24px));
  transition: transform 240ms ease;
}

.fm-sticky-buy.is-visible {
  transform: translateY(0);
}

.fm-sticky-buy img {
  width: 34px;
  height: auto;
  border-radius: 3px;
}

.fm-sticky-buy span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fm-sticky-buy .button {
  flex: 0 0 auto;
  width: auto; /* the site's mobile rule makes .button full-width; not in this flex row */
  min-height: 38px;
  padding: 0 14px;
  background: var(--teal);
  color: var(--white);
  font-size: 0.86rem;
}

/* ---- responsive ------------------------------------------------------------ */

/* ---- hero scene fold clamp -------------------------------------------------
   The scene is wide-format, so width IS height: every extra pixel of width
   pushes everything under it further down the page. Two things have to clear
   the first fold: the WHOLE image (a photograph cut by the fold reads as a
   loading bug, not as a tease) and the primary CTA under it.

   Derivation, in CSS pixels at the desktop copy block:
     - hero top padding + copy block put the scene's top edge at y 342, and
       that is width-independent (the H1 is capped at 21ch, so it holds its
       two-line shape from 1081px up);
     - the scene sits 18px above the CTA group's top edge, so
       ctaTop = 360 + sceneHeight;
     - requiring ctaTop <= viewportHeight - 15 gives
       sceneHeight <= 100vh - 375; the 384 constant used below spends the
       extra 9px on slack so the gate is not sitting on its own limit;
     - the image is 16:9, so width = height * 1.7778. (The old 2.11 divisor
       came from the retired 1600x746 SVG, which was a wider box.)
   The image-above-fold rule needs only sceneHeight <= 100vh - 342, so the CTA
   rule is the binding one and the picture clears the fold by construction.
   Measured, not assumed: both rules are gated at 1440x900, 1600x900,
   1728x1000 and 1920x1080.
   A 780px floor keeps very short viewports shrinking the scene, not erasing it.

   This lives at the desktop breakpoint, not only at 1600px: a 1440x900 laptop
   is the tightest common case, not the widest. */
@media (min-width: 1081px) {
  .fm-hero {
    --fm-hero-width: min(100%, var(--max), max(780px, calc((100vh - 384px) * 1.7778)));
  }
}

@media (min-width: 1600px) {
  .fm-problem-row {
    grid-template-columns: 240px minmax(0, 1fr) 380px;
  }

  /* Wide canvas: the scene is the hero's one focal object, so above 1600px the
     hero measure is allowed past the 1180 text measure to 80vw. The fold clamp
     above still applies and is usually the binding constraint. */
  .fm-hero {
    --fm-hero-width: min(100%, 80vw, max(780px, calc((100vh - 384px) * 1.7778)));
  }
}

@media (max-width: 1080px) {
  /* padding-top is 116px from the base rule now; this breakpoint no longer
     needs to correct it. */

  .fm-hero h1 {
    font-size: 3rem;
  }

  .fm-hero-scene {
    margin-top: 34px;
  }

  .fm-hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .fm-thesis-band blockquote {
    font-size: 2rem;
  }

  .fm-problem-row {
    grid-template-columns: 200px 1fr;
  }

  .fm-stat-visual {
    grid-column: 2;
    max-width: 340px;
  }

  .fm-teams-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .fm-portfolio-visual {
    grid-template-columns: repeat(3, minmax(64px, 88px));
    justify-content: start;
  }

  .fm-pyramid-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .fm-chapter-map,
  .fm-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fm-talks {
    grid-template-columns: 1fr;
  }

  .fm-teams-band h2 {
    font-size: 2.4rem;
  }

  .fm-inquiry-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .fm-author-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 760px) {
  .fm-hero {
    padding: 104px 20px 44px;
  }

  .fm-hero h1 {
    max-width: none;
    font-size: 2.35rem;
  }

  .fm-hero-lede {
    font-size: 1.04rem;
  }

  /* Phone: the scene goes edge to edge (the hero pads 20px) so the one
     focal object stays as large as the screen allows. Full bleed means the
     frame treatment goes with it: rounded corners and a drop shadow only read
     as a frame when there is page around them. */
  .fm-hero-scene {
    width: calc(100% + 40px);
    margin: 26px -20px 0;
    border-radius: 0;
    box-shadow: none;
  }

  .fm-problem-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 0;
  }

  .fm-stat-visual {
    grid-column: 1;
    max-width: 320px;
  }

  .fm-problem-row strong {
    font-size: 2.3rem;
  }

  .fm-problem-close {
    font-size: 1.12rem;
  }

  .fm-thesis-band {
    padding: 72px 20px;
  }

  .fm-thesis-band blockquote {
    font-size: 1.6rem;
  }

  .fm-window-band blockquote {
    font-size: 1.32rem;
  }

  .fm-chapter-map,
  .fm-results-grid,
  .fm-audience-grid {
    grid-template-columns: 1fr;
  }

  .fm-artifacts {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
  }

  .fm-ev-callout {
    padding: 22px;
  }

  .fm-ev-callout p {
    font-size: 1.08rem;
  }

  .fm-teams-band,
  .fm-get-band {
    padding: 72px 20px;
  }

  .fm-get-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    justify-items: start;
  }

  .fm-get-cover {
    width: min(240px, 64vw);
  }

  /* Keep the sticky buy bar from trapping the form submit at mobile. */
  .fm-inquiry-band {
    padding-bottom: 150px;
  }

  .fm-get-band h2 {
    font-size: 2.1rem;
  }

  .fm-sticky-buy {
    display: flex;
  }

  .fm-layer {
    font-size: 0.88rem;
    min-height: 46px;
  }

  .fm-layer[data-layer="0"] { min-width: 200px; }
  .fm-layer[data-layer="1"] { min-width: 225px; }
  .fm-layer[data-layer="2"] { min-width: 250px; }
  .fm-layer[data-layer="3"] { min-width: 275px; }
  .fm-layer[data-layer="4"] { min-width: 100%; }
}

@media (max-width: 460px) {
  /* Phone type is sized off the longest line, not off taste. "The next growth
     curve" measures ~10.74x the font size, and the H1 gets viewport minus the
     hero's 40px of side padding, so 8.2vw is the largest size that still lands
     the two-line shape at 390 and 360. The 1.75rem floor stops very narrow
     phones from shrinking the headline to fit; below ~350px it takes a clean
     third line instead, with the payoff phrase still whole. */
  .fm-hero h1 {
    font-size: clamp(1.75rem, 8.2vw, 2.05rem);
  }

  .fm-hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
  }

  .fm-hero-stats span {
    font-size: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fm-sticky-buy {
    transition: none;
  }

  .fm-layer,
  .fm-other-books a {
    transition: none;
  }
}