/* ==========================================================================
   Fit Busy Mum — shared styles for the hand-built page templates
   (Home, About Me, Contact). Loaded only on those templates.

   Tokens mirror fbm-lp-playbook.md section 3 so these pages sit in the same
   visual system as the landing pages, without going through the page builder.
   Everything is namespaced under .fbmp so it can never leak into the theme.
   ========================================================================== */

.fbmp {
  /* colour */
  --ink: #1e1530;
  --ink-80: rgba(30, 21, 48, 0.8);
  --ink-64: rgba(30, 21, 48, 0.64);
  --ink-40: rgba(30, 21, 48, 0.4);
  --ink-12: rgba(30, 21, 48, 0.12);
  --ink-07: rgba(30, 21, 48, 0.07);
  --lime: #e9fe57;
  --lime-hover: #e3fe34;
  --lav: #e9e0f5;
  --offwhite: #f8f8f8;
  --grey: #f7f7f7;
  --gold: #f2b705;

  /* radius */
  --r-card: 27px;
  --r-mini: 20px;
  --r-img: 16px;
  --r-pill: 60px;

  /* shadow: always ink-tinted, always two layers */
  --sh-card: 0 1px 2px rgba(30, 21, 48, 0.04), 0 8px 24px -14px rgba(30, 21, 48, 0.12);
  --sh-mini: 0 1px 2px rgba(30, 21, 48, 0.04), 0 4px 24px rgba(30, 21, 48, 0.08);
  --sh-cta: 0 4px 16px rgba(30, 21, 48, 0.16);
  --sh-lift: 0 2px 4px rgba(30, 21, 48, 0.06), 0 18px 40px -20px rgba(30, 21, 48, 0.28);

  /* motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --d-press: 150ms;
  --d-hover: 200ms;

  /* Footage correction. Kept in CSS so it stays reversible and free.
     Two values because the material differs: measured mean chroma is
     8.9-9.9 for workout frames and 15.5-23.7 for the studio session. */
  --fx-video: brightness(1.03) saturate(1.13) contrast(1.03);
  --fx-photo: brightness(1.02) saturate(1) contrast(1.02);

  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.fbmp *,
.fbmp *::before,
.fbmp *::after { box-sizing: border-box; }

.fbmp h1, .fbmp h2, .fbmp h3, .fbmp h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.fbmp p { margin: 0 0 1rem; }
.fbmp p:last-child { margin-bottom: 0; }
.fbmp a { color: inherit; }
.fbmp img, .fbmp video { max-width: 100%; display: block; }

/* --- type scale --------------------------------------------------------- */
.fbmp .h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.07; }
.fbmp .h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.14; }
.fbmp .h3 { font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); font-weight: 600; line-height: 1.25; }

.fbmp .lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.62; color: var(--ink-80); }
/* Microcopy carries the objections, so it never drops below 16px. */
.fbmp .micro {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-64);
}
.fbmp .measure { max-width: 38rem; }
.fbmp .measure-wide { max-width: 46rem; }

/* --- layout ------------------------------------------------------------- */
.fbmp .sec { padding: clamp(2.75rem, 6vw, 5rem) 1rem; }
.fbmp .sec--tight { padding: clamp(2rem, 4vw, 3rem) 1rem; }
.fbmp .wrap { max-width: 1280px; margin: 0 auto; }
.fbmp .wrap--mid { max-width: 1100px; margin: 0 auto; }
.fbmp .wrap--narrow { max-width: 900px; margin: 0 auto; }
.fbmp .wrap--copy { max-width: 720px; margin: 0 auto; }

.fbmp .bg-ink { background: var(--ink); color: #fff; }
.fbmp .bg-ink h1, .fbmp .bg-ink h2, .fbmp .bg-ink h3 { color: #fff; }
.fbmp .bg-ink .lead, .fbmp .bg-ink .micro { color: rgba(255, 255, 255, 0.72); }
.fbmp .bg-lav { background: var(--lav); }
.fbmp .bg-off { background: var(--offwhite); }
.fbmp .bg-grey { background: var(--grey); }

.fbmp .card {
  background: #fff;
  border: 1px solid var(--ink-07);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.fbmp .card--pad { padding: clamp(1.5rem, 4vw, 3rem); }

.fbmp .cols { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .fbmp .cols--5545 { grid-template-columns: 55fr 45fr; }
  .fbmp .cols--4555 { grid-template-columns: 45fr 55fr; }
  .fbmp .cols--2 { grid-template-columns: 1fr 1fr; }
}

/* --- hand-drawn underline ----------------------------------------------
   Same gesture as the Beginner's Challenge hero. Lime reads 15.6:1 on ink
   but only 1.12:1 on white, so on light backgrounds the stroke goes ink.
   ------------------------------------------------------------------------ */
.fbmp .mark { position: relative; display: inline-block; }
.fbmp .mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  height: 0.3em;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C60 3, 120 12, 170 7 S260 4, 296 8' fill='none' stroke='%231E1530' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}
.fbmp .bg-ink .mark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C60 3, 120 12, 170 7 S260 4, 296 8' fill='none' stroke='%23E9FE57' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* only the key word carries the stroke, so long phrases stay free to wrap */
.fbmp .mark--word { white-space: nowrap; }

/* --- buttons ------------------------------------------------------------ */
.fbmp .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sh-cta);
  transition: background var(--d-hover) ease, transform var(--d-press) var(--ease),
              box-shadow var(--d-hover) ease;
}
/* The Elementor kit styles bare `button:hover` and `button:focus`, so colour
   has to be pinned on every state or the label turns white on lime. */
.fbmp .btn,
.fbmp .btn:hover,
.fbmp .btn:focus,
.fbmp .btn:active,
.fbmp .btn:focus-visible { color: var(--ink); background: var(--lime); text-decoration: none; }
.fbmp .btn:active { transform: scale(0.97); }
.fbmp .btn .arw { transition: transform var(--d-hover) var(--ease); }
.fbmp .btn--ghost,
.fbmp .btn--ghost:hover,
.fbmp .btn--ghost:focus { background: transparent; box-shadow: none; border: 2px solid var(--ink); color: var(--ink); }
.fbmp .bg-ink .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.fbmp .btn--wide { width: 100%; justify-content: center; }

@media (hover: hover) and (pointer: fine) {
  .fbmp .btn:hover,
  .fbmp .btn:focus-visible { background: var(--lime-hover); }
  .fbmp .btn:hover .arw { transform: translate(3px, -3px); }
  .fbmp .btn--ghost:hover { background: var(--ink); color: #fff; }
  .fbmp .btn[disabled]:hover { background: var(--lime); }
}

/* --- stars and review cards --------------------------------------------- */
.fbmp .stars { display: inline-flex; gap: 2px; color: var(--gold); line-height: 1; }
.fbmp .stars svg { width: 16px; height: 16px; fill: currentColor; }
.fbmp .stars .off { color: rgba(30, 21, 48, 0.22); }

.fbmp .rv {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--ink-07);
  border-radius: var(--r-mini);
  box-shadow: var(--sh-mini);
  padding: 1.25rem;
  position: relative;
}
.fbmp .rv__top { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.6rem; }
.fbmp .rv__av {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #efeaf9, #e0d4f1);
  display: grid; place-items: center;
  font-family: 'Poppins', sans-serif; font-weight: 700;
}
.fbmp .rv__who { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1rem; }
.fbmp .rv__where { font-family: 'Poppins', sans-serif; font-size: 0.875rem; color: var(--ink-64); }
.fbmp .rv__chip {
  display: inline-block; margin-top: 0.3rem;
  font-family: 'Poppins', sans-serif; font-size: 0.875rem;
  background: rgba(30, 21, 48, 0.05); border-radius: 100px; padding: 0.15rem 0.55rem;
}
.fbmp .rv__q { font-size: 1rem; line-height: 1.6; margin-top: 0.6rem; }
.fbmp .masonry { columns: 3; column-gap: 12px; }
@media (max-width: 900px) { .fbmp .masonry { columns: 2; } }
@media (max-width: 600px) { .fbmp .masonry { columns: 1; } }

/* --- forms --------------------------------------------------------------
   Every control is 1rem. Below 16px iOS Safari zooms the page on focus and
   never zooms back out, which is where a phone user gives up.
   ------------------------------------------------------------------------ */
.fbmp .field { display: block; margin-bottom: 1rem; }
.fbmp .field > span {
  display: block; margin-bottom: 0.35rem;
  font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 1rem;
}
.fbmp .field input,
.fbmp .field select,
.fbmp .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink-12);
  border-radius: 14px;
  transition: border-color var(--d-hover) ease, box-shadow var(--d-hover) ease;
}
.fbmp .field textarea { min-height: 150px; resize: vertical; }
.fbmp .field input:focus,
.fbmp .field select:focus,
.fbmp .field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30, 21, 48, 0.12);
}
/* while the form posts: soften the fields and lock the button, so nobody
   presses send twice on a slow connection */
.fbmp .form-body { transition: filter 0.2s ease, opacity 0.2s ease; }
.fbmp .is-sending .form-body { filter: blur(2px); opacity: 0.55; pointer-events: none; }
.fbmp .btn[disabled] { cursor: progress; opacity: 0.9; }
.fbmp .spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(30, 21, 48, 0.25);
  border-top-color: var(--ink);
  animation: fbm-spin 0.7s linear infinite;
}
@keyframes fbm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fbmp .spin { animation-duration: 2s; }
  .fbmp .is-sending .form-body { filter: none; }
}

/* honeypot: off-screen rather than display:none, so bots still fill it */
.fbmp .hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.fbmp .formnote {
  border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  font-size: 1rem; border: 1.5px solid var(--ink-12); background: #fff;
}
.fbmp .formnote--ok { border-color: rgba(30, 21, 48, 0.2); background: var(--lav); }

/* --- self-serve cards ---------------------------------------------------- */
.fbmp .fixit { display: grid; gap: 1rem; }
@media (min-width: 760px) { .fbmp .fixit { grid-template-columns: repeat(3, 1fr); } }
.fbmp .fixit a {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--ink-07); border-radius: var(--r-mini); padding: 1.25rem;
  box-shadow: var(--sh-mini);
  transition: transform var(--d-hover) var(--ease), box-shadow var(--d-hover) ease;
}
.fbmp .fixit a:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .fbmp .fixit a:hover { box-shadow: var(--sh-lift); } }
.fbmp .fixit h3 { margin-bottom: 0.35rem; }
.fbmp .fixit p { font-size: 1rem; color: var(--ink-64); margin: 0; }
.fbmp .fixit .go {
  display: inline-block; margin-top: 0.75rem;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
  border-bottom: 2px solid var(--lime);
}

/* --- FAQ ---------------------------------------------------------------- */
.fbmp details.qa { border-bottom: 1px solid var(--ink-12); }
.fbmp details.qa summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.35;
}
.fbmp details.qa summary::-webkit-details-marker { display: none; }
.fbmp details.qa summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: 'Manrope', sans-serif; font-size: 1.5rem; color: var(--ink-64);
}
.fbmp details.qa summary::after { transition: transform var(--d-hover) var(--ease); }
.fbmp details.qa.is-open summary::after { content: "\2013"; }
/* 0fr to 1fr animates cleanly without knowing the content height up front */
.fbmp details.qa .a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s var(--ease);
}
.fbmp details.qa.is-open .a-wrap { grid-template-rows: 1fr; }
.fbmp details.qa .a { overflow: hidden; min-height: 0; }
.fbmp details.qa .a > * { padding: 0 0 1.25rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-80); max-width: 44rem; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .fbmp details.qa .a-wrap { transition: none; }
}
.fbmp details.qa .a a { font-weight: 600; }

/* --- who is on the other end -------------------------------------------- */
.fbmp .who { display: flex; gap: 1.25rem; align-items: center; max-width: 22rem; padding: 1.1rem 1.25rem; }
.fbmp .who__ph {
  flex: 0 0 84px; width: 84px; height: 84px;
  border-radius: 50%; object-fit: cover;
  filter: var(--fx-photo);
}

/* --- clips --------------------------------------------------------------- */
.fbmp .clip { position: relative; overflow: hidden; border-radius: var(--r-img); background: var(--lav); }
.fbmp .clip video, .fbmp .clip img { width: 100%; height: 100%; object-fit: cover; filter: var(--fx-video); }
.fbmp .clip--p { aspect-ratio: 3 / 4; }
.fbmp .clip--s { aspect-ratio: 1 / 1; }
.fbmp .clip--w { aspect-ratio: 16 / 9; }
/* the still stands in for the loop when motion is switched off; the two-class
   selector is needed to beat `.clip img` on specificity */
.fbmp .clip .clip__still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fbmp .clip video[autoplay] { display: none; }
  .fbmp .clip .clip__still { display: block; }
}

/* --- click to hear -------------------------------------------------------
   The decorative loops are not interactive, so they must not invite a click.
   Only the clip that has something to play gets a pointer, and it gets an
   explicit button rather than relying on the video itself reading as tappable. */
.fbmp .clip video { cursor: default; }
.fbmp .clip--hear .clip__full { display: none; width: 100%; height: 100%; object-fit: cover; }
.fbmp .clip--hear.is-playing .clip__loop { display: none; }
.fbmp .clip--hear.is-playing .clip__full { display: block; }
.fbmp .clip--hear.is-playing .hear { display: none; }

.fbmp .hear {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(30, 21, 48, 0.86);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background var(--d-hover) ease, transform var(--d-press) var(--ease);
  /* The Elementor kit styles bare <button>, including text-transform, which
     shouted this label in capitals. Same trap as the button colour, different
     property, so pin both here. */
  text-transform: none;
  letter-spacing: normal;
}
.fbmp .hear__i { display: inline-flex; flex: 0 0 auto; }
.fbmp .hear__i svg { width: 22px; height: 22px; }
.fbmp .hear__t { flex: 1 1 auto; }
.fbmp .hear__d { flex: 0 0 auto; font-weight: 500; color: rgba(255, 255, 255, 0.66); font-size: 0.9375rem; }
.fbmp .hear:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  .fbmp .hear:hover { background: var(--ink); }
}

/* --- CTA inside the story -------------------------------------------------
   These wrappers are <div>, never <p>: the child theme carries a legacy
   `p a { text-decoration: underline !important }`, which no class can outrank.
   The note below is a <p> only because the link sits outside it. */
.fbmp .chapter__cta { margin-top: 1.5rem; }
.fbmp .letters__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}
/* Scoped to the note, not to `span` — a bare `span` here also caught the arrow
   inside the button and rendered it a size too big and in the wrong colour. */
.fbmp .letters__cta-note {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1.0625rem;
  color: var(--ink-64);
}

/* --- skip target focus --------------------------------------------------- */
.fbmp :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- About: chapters, pull quotes, the struck list, letters ------------- */
.fbmp .chapter { display: grid; gap: 1rem 2.5rem; padding: clamp(2rem, 5vw, 3.25rem) 0; border-top: 1px solid var(--ink-12); }
@media (min-width: 860px) { .fbmp .chapter { grid-template-columns: 7rem 1fr; } }
.fbmp .chapter__no {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.125rem;
  color: var(--ink-64); letter-spacing: 0.02em; padding-top: 0.35rem; margin: 0;
}
.fbmp .chapter p { max-width: 34rem; font-size: 1.125rem; line-height: 1.65; color: var(--ink-80); }
.fbmp .chapter p strong { color: var(--ink); font-weight: 600; }

.fbmp .pull {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.22; letter-spacing: -0.015em;
  color: var(--ink); max-width: 30rem; margin: 1.5rem 0 0;
}

/* Pull quote as an object: rule above, one lime marker, source underneath. */
.fbmp .pullq { margin: 0; }
.fbmp .pullq blockquote {
  margin: 0; padding-top: 1.25rem; border-top: 2px solid var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem); line-height: 1.4; letter-spacing: -0.008em;
  text-wrap: pretty;
}
.fbmp .pullq blockquote em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 94%, transparent 94%);
}
.fbmp .pullq figcaption { font-family: 'Poppins', sans-serif; font-size: 1rem; color: var(--ink-64); margin-top: 0.9rem; }

/* The list that renders the point: five things crossed off, one never reached. */
.fbmp ol.strike { list-style: none; margin: 0; padding: 0; }
.fbmp ol.strike li {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem); line-height: 1.5;
  padding: 0.35rem 0; border-bottom: 1px solid var(--ink-07);
  color: var(--ink-64); text-decoration: line-through; text-decoration-thickness: 2px;
}
.fbmp ol.strike li.strike__me { color: var(--ink); text-decoration: none; }

.fbmp .then-now { display: grid; gap: 1px; background: var(--ink-12); border-radius: var(--r-mini); overflow: hidden; }
@media (min-width: 760px) { .fbmp .then-now { grid-template-columns: 1fr 1fr; } }
.fbmp .then-now > div { background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); }
.fbmp .then-now__k {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-64); margin: 0 0 0.75rem;
}
.fbmp .then-now p { color: var(--ink-80); }

.fbmp .notlist { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.fbmp .notlist li { display: flex; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.55; }
.fbmp .notlist li em {
  font-style: normal; color: var(--ink-64);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; flex: 0 0 1.5rem;
}

.fbmp .strip { display: flex; gap: 0.75rem; }
.fbmp .strip .clip { flex: 1; }
.fbmp .strip .clip:nth-child(odd) { transform: rotate(-1.5deg); }
.fbmp .strip .clip:nth-child(even) { transform: rotate(1.5deg); }

.fbmp .letters { display: grid; gap: 1rem; }
@media (min-width: 820px) { .fbmp .letters { grid-template-columns: repeat(3, 1fr); } }
.fbmp .letter { margin: 0; padding: 1.5rem; border-radius: var(--r-mini); box-shadow: var(--sh-mini); }
.fbmp .letter p { margin: 0.75rem 0 0; }
.fbmp .letter footer { margin-top: 0.75rem; }

/* --- Home: hero list, numbers band, doors, the 48-frame wall, steps ----- */
.fbmp .ticks { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 0.6rem; }
.fbmp .ticks li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1.0625rem; color: rgba(255, 255, 255, 0.86); }
.fbmp .ticks svg { flex: 0 0 22px; margin-top: 0.2rem; }

.fbmp .numbers { display: grid; gap: 1px; background: rgba(255, 255, 255, 0.14); border-radius: var(--r-mini); overflow: hidden; }
@media (min-width: 760px) { .fbmp .numbers { grid-template-columns: repeat(4, 1fr); } }
.fbmp .numbers > div { background: var(--ink); padding: 1.5rem 1.25rem; }
.fbmp .numbers b {
  display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; color: #fff;
}
.fbmp .numbers span { display: block; margin-top: 0.4rem; font-family: 'Poppins', sans-serif; font-size: 1rem; color: rgba(255, 255, 255, 0.72); }

.fbmp .door { display: flex; flex-direction: column; height: 100%; }
.fbmp .door__body { padding: clamp(1.5rem, 3vw, 2rem); flex: 1; display: flex; flex-direction: column; }
.fbmp .door__body .btn { margin-top: auto; }
/* a small cover, not a lifestyle photo: the card is about the choice */
.fbmp .door__cover { width: 132px; margin-bottom: 1.25rem; }
.fbmp .door__cover img {
  width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 2px 4px rgba(30, 21, 48, 0.06), 0 14px 30px -18px rgba(30, 21, 48, 0.35);
  transform: rotate(-2deg);
}
.fbmp .door__tag { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink-64); margin: 0; }

/* 48 frames from one 8x6 sprite: a single request instead of forty-eight */
.fbmp .sheet { display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.25rem; }
@media (min-width: 640px) { .fbmp .sheet { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .fbmp .sheet { grid-template-columns: repeat(4, 1fr); } }
.fbmp .wk__n { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--ink-64); margin: 0 0 0.4rem; }
.fbmp .wk__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.fbmp .wk__row i {
  display: block; aspect-ratio: 3 / 4; border-radius: 3px; background: var(--lav);
  background-image: url(../../../uploads/2026/08/fbm-sheet-sprite.webp);
  background-size: 800% 600%;
  background-position: calc(var(--c) * 100% / 7) calc(var(--r) * 100% / 5);
  filter: var(--fx-video);
}
/* dealt one frame at a time, left to right, week after week */
.fbmp .sheet--deal .wk__row i {
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  transition-delay: calc(var(--i) * 10ms);
}
.fbmp .sheet--deal.is-in .wk__row i { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fbmp .sheet--deal .wk__row i { opacity: 1; transform: none; transition: none; }
}

.fbmp .ledger { margin: 0; display: grid; gap: 0.65rem; }
.fbmp .ledger > div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink-12); padding-bottom: 0.5rem; }
.fbmp .ledger > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fbmp .ledger dt { margin: 0; }
.fbmp .ledger dd { margin: 0; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; }

.fbmp .steps { counter-reset: fbmstep; display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 820px) { .fbmp .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.fbmp .steps > div::before {
  counter-increment: fbmstep; content: "0" counter(fbmstep);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2.5rem;
  display: block; line-height: 1; margin-bottom: 0.5rem; color: var(--ink-64);
}
.fbmp .steps p { color: var(--ink-80); margin-top: 0.5rem; }

.fbmp .rating-inline { display: inline-flex; align-items: baseline; gap: 0.4rem; font-family: 'Poppins', sans-serif; font-size: 1rem; color: var(--ink-64); }
.fbmp .rating-inline b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.375rem; color: var(--ink); }
.fbmp .rating-inline .stars { align-self: center; }
.fbmp .rv__q { margin: 0.6rem 0 0; }

/* answers shown, not hidden: no click between a question and its answer */
.fbmp .qa-open { border-top: 1px solid var(--ink-12); padding: 1.25rem 0; }
.fbmp .qa-open p { margin-top: 0.5rem; color: var(--ink-80); }

/* Punctuation after an underlined word must not wrap onto its own line. */
.fbmp .nobr { white-space: nowrap; }

/* Numbers band, light variant: it sits under the ink hero, so ink cells there
   merged into one block. White cells on off-white keep it a separate object. */
.fbmp .bg-off .numbers { background: var(--ink-12); }
.fbmp .bg-off .numbers > div { background: #fff; }
.fbmp .bg-off .numbers b { color: var(--ink); }
.fbmp .bg-off .numbers span { color: var(--ink-64); }

/* --- 404 (added 05.08.2026) ---------------------------------------------
   Three doors: the challenge takes the wide column, the two recovery cards
   share the narrow one and stay equal in height to each other. */
.fbmp .nf-grid { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 900px) { .fbmp .nf-grid { grid-template-columns: 1.12fr 1fr; } }
.fbmp .nf-side { display: grid; gap: 1rem; grid-auto-rows: 1fr; }

.fbmp .nf-main { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); height: 100%; }
.fbmp .nf-main__cover { width: 132px; margin-bottom: 1.25rem; }
.fbmp .nf-main__cover img { width: 100%; height: auto; border-radius: 10px; box-shadow: var(--sh-mini); }
.fbmp .nf-main .btn { margin-top: auto; }

.fbmp .nf-mini { display: flex; flex-direction: column; padding: clamp(1.375rem, 2.6vw, 1.75rem); height: 100%; }
.fbmp .nf-mini__top { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.6rem; }
.fbmp .nf-mini__ic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 100px;
  overflow: hidden; background: var(--lav); display: grid; place-items: center;
}
.fbmp .nf-mini__ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fbmp .nf-mini__ic svg { width: 26px; height: 26px; }
/* The button sits on the card floor so both recovery cards line up. */
.fbmp .nf-mini .btn { margin-top: auto; align-self: flex-start; }

.fbmp .nf-tag { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink-64); margin: 0; }
.fbmp .nf-foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; }
.fbmp .nf-foot a { font-family: 'Poppins', sans-serif; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lime); }