/** Shopify CDN: Minification failed

Line 1397:0 Unexpected "}"

**/
/* Fine Foams homepage sections. All sizes/colours ported from the approved
   design comps (Fine Foams Homepage.dc.html); rem values use Dawn's 10px base. */

.ff-section {
  max-width: 124rem;
  margin: 0 auto;
  padding: 9.6rem 3.2rem 0;
}
.ff-section--first { padding-top: 3.6rem; }
.ff-section--last { padding-bottom: 0; }
.ff-section h1,
.ff-section h2 { margin: 0; }

.ff-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3.2rem;
  margin-bottom: 3.2rem;
}
.ff-section__head h2 {
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-top: 1.2rem;
}
/* Desktop shows the head link; mobile shows the one under the grid instead.
   See the comment in ff-collection-grid.liquid for why there are two. */
.ff-collection-grid__viewall--bottom { display: none; }
.ff-textlink {
  font-size: 1.35rem;
  color: var(--ff-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(38, 43, 26, 0.25);
  padding-bottom: 0.3rem;
  white-space: nowrap;
}
.ff-textlink:hover { color: var(--ff-ink); border-bottom-color: var(--ff-ink); }
/* As a <button> (e.g. "Which size should I get?"): strip Dawn/UA button chrome */
button.ff-textlink {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(38, 43, 26, 0.25);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0.3rem;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-body-family);
  font-size: 1.3rem;
  color: var(--ff-muted);
  line-height: 1.3;
}
button.ff-textlink:hover { color: var(--ff-ink); border-bottom-color: var(--ff-ink); }

/* Pills */
.ff-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1.6rem 3rem;
  font-family: var(--ff-font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.ff-pill--light { background: var(--ff-canvas); color: var(--ff-ink); }
.ff-pill--light:hover { background: var(--ff-sand); color: var(--ff-ink); }
.ff-pill--ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); }
.ff-pill--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.ff-pill--ghost-cream { background: transparent; color: var(--ff-cream); border: 1px solid rgba(244, 243, 236, 0.42); }
.ff-pill--ghost-cream:hover { border-color: var(--ff-cream); background: rgba(244, 243, 236, 0.08); color: var(--ff-cream); }
.ff-pill--ghost { background: transparent; color: var(--ff-ink); border: 1px solid rgba(38, 43, 26, 0.4); }
.ff-pill--ghost:hover { background: var(--ff-sand); border-color: var(--ff-ink); color: var(--ff-ink); }
.ff-pill--dark { background: var(--ff-olive-deep); color: var(--ff-canvas); }
.ff-pill--dark:hover { background: #3a4128; color: var(--ff-canvas); }
.ff-pill--buy { background: var(--ff-terracotta); color: #fff; padding: 1.7rem 3.4rem; }
.ff-pill--buy:hover { background: #7e3319; color: #fff; }

.ff-stars { color: #e8b93b; letter-spacing: 2px; font-size: 1.3rem; }
.ff-stars--lg { letter-spacing: 3px; font-size: 1.6rem; }
.ff-kicker--dark { color: #a8ac9c; }
.ff-chip-dark {
  display: inline-block;
  background: var(--ff-olive-deep);
  color: var(--ff-canvas);
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 2rem;
}
.ff-media-placeholder { position: absolute; inset: 0; background: var(--ff-sand); }

@keyframes ffQuoteIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ── Hero ── */
.ff-hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 2rem;
  align-items: stretch;
}
.ff-hero__panel {
  background: var(--ff-olive);
  border-radius: 20px;
  padding: 5.6rem 5.2rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ff-hero__kicker {
  font-family: var(--ff-font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 2rem;
}
.ff-hero__panel h1 {
  font-size: 5.4rem;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin-bottom: 1.8rem;
  color: #fff; /* Dawn base.css forces heading colour to the scheme foreground; restate the panel's white */
}
.ff-hero__panel p {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.6;
  max-width: 44ch;
  opacity: 0.86;
  margin: 0 0 2.8rem;
}
.ff-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.ff-hero__proof {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 1.35rem;
}
.ff-hero__proof span:last-child { opacity: 0.8; }
.ff-hero__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ff-sand);
  min-width: 0;
  min-height: 56rem;
}
.ff-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff-hero__shade { display: none; }

/* ── Collection grid ── */
.ff-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ff-swap-short { display: none; }
.ff-product-card {
  background: #fff;
  border: 1px solid rgba(38, 43, 26, 0.08);
  border-radius: 16px;
  padding: 1.4rem 1.4rem 2.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.ff-product-card:hover {
  border-color: rgba(38, 43, 26, 0.2);
  box-shadow: 0 18px 34px -22px rgba(38, 43, 26, 0.35);
  transform: translateY(-3px);
}
.ff-product-card__media {
  position: relative;
  background: var(--ff-sand);
  border-radius: 12px;
  aspect-ratio: 1 / 0.92;
  margin-bottom: 1.8rem;
  overflow: hidden;
}
.ff-product-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff-product-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  white-space: nowrap;
  font-size: 1.25rem;
  color: var(--ff-muted);
}
.ff-product-card__rating .ff-stars { font-size: 1.2rem; }
.ff-product-card__name { font-size: 1.7rem; font-weight: 500; margin-bottom: 0.6rem; }
.ff-product-card__swatches {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.ff-product-card__swatches span {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(38, 43, 26, 0.22);
  flex: none;
}
.ff-product-card__note {
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--ff-muted);
  line-height: 1.55;
  max-width: 32ch;
  margin: 0 auto 1.4rem;
}
.ff-product-card__price { font-size: 1.3rem; color: var(--ff-muted); margin-bottom: 1.8rem; }
.ff-product-card .ff-pill { display: block; margin-top: auto; padding: 1.4rem 2.6rem; }

/* ── Difference (dark card) ── */
.ff-difference {
  background: var(--ff-olive-deep);
  border-radius: 20px;
  padding: 5.6rem;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4.8rem;
  align-items: center;
}
.ff-difference h2 {
  color: var(--ff-cream);
  font-size: 3.6rem;
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -0.02em;
  margin: 1.8rem 0;
}
.ff-difference h2 span { opacity: 0.5; }
.ff-difference > div > p {
  color: #a8ac9c;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.65;
  max-width: 48ch;
  margin: 0 0 3rem;
}
.ff-difference__list {
  display: grid;
  gap: 1px;
  background: rgba(244, 243, 236, 0.12);
  border-radius: 14px;
  overflow: hidden;
}
.ff-difference__row { background: var(--ff-olive-deep); padding: 2.4rem 2.6rem; }
.ff-difference__tag {
  font-family: var(--ff-font-mono);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ff-sand);
  margin-bottom: 0.9rem;
}
.ff-difference__body { color: var(--ff-cream); font-size: 1.55rem; line-height: 1.55; max-width: 38ch; }

/* ── Bundle ── */
.ff-bundle {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 4.8rem;
  align-items: center;
}
.ff-bundle__copy h2 {
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin-bottom: 1.4rem;
}
.ff-bundle__copy p {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ff-muted);
  max-width: 40ch;
  margin: 0 0 2.6rem;
}
.ff-bundle__ctas { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.ff-bundle__afterpay { font-size: 1.3rem; color: var(--ff-muted); }
.ff-bundle__media-stack { min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.ff-bundle__hero {
  position: relative;
  background: var(--ff-sand);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ff-bundle__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ff-bundle__pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.ff-bundle__pin--up { flex-direction: column-reverse; }
.ff-bundle__pin span {
  background: var(--ff-canvas);
  border: 1px solid rgba(38, 43, 26, 0.25);
  color: var(--ff-ink);
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  font-family: var(--ff-font-mono);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ff-bundle__pin i { width: 1px; height: 2.6rem; border-left: 1px dashed rgba(38, 43, 26, 0.5); }
.ff-bundle__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.ff-bundle__thumb {
  position: relative;
  background: var(--ff-sand);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 0.78;
}
.ff-bundle__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Assurance ── */
.ff-assurance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ff-assurance__card { border-radius: 16px; padding: 3.2rem 3.4rem; }
.ff-assurance__card--sand { background: var(--ff-sand); }
.ff-assurance__card--olive { background: var(--ff-olive); }
.ff-assurance__title { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1rem; }
.ff-assurance__card p {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ff-muted);
  max-width: 34ch;
  margin: 0;
}
.ff-assurance__card--olive .ff-assurance__title { color: var(--ff-canvas); }
.ff-assurance__card--olive p { color: rgba(251, 251, 246, 0.92); } /* 0.82 computed to 4.44:1 on olive — under AA */

/* ── Reviews ── */
.ff-reviews { margin: 0 auto; max-width: 100rem; }
.ff-reviews [hidden] { display: none !important; }
.ff-reviews__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}
.ff-reviews__title { font-size: 2.3rem; font-weight: 500; letter-spacing: -0.015em; }
.ff-reviews__subheading { text-align: center; font-size: 1.45rem; font-weight: 300; color: var(--ff-muted); margin: 0.8rem 0 0; }
.ff-reviews__tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.ff-reviews__tabs button {
  border-radius: 999px;
  padding: 1.2rem 2.2rem;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body-family);
  font-size: 1.35rem;
  background: var(--ff-sand);
  color: var(--ff-ink);
  transition: background-color 200ms ease;
}
.ff-reviews__tabs button:hover { background: #e0d4b9; }
.ff-reviews__tabs button.is-active { background: var(--ff-olive-deep); color: var(--ff-canvas); font-weight: 500; }
.ff-reviews__stage { display: flex; align-items: center; gap: 2.4rem; margin-top: 0.8rem; }
.ff-reviews__arrow {
  flex: none;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 999px;
  border: 1px solid rgba(38, 43, 26, 0.25);
  background: none;
  cursor: pointer;
  color: var(--ff-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.ff-reviews__arrow:hover { border-color: var(--ff-ink); background: var(--ff-sand); }
.ff-reviews__stage figure { flex: 1; min-width: 0; text-align: center; margin: 0; }
.ff-reviews__quotebox { min-height: 3.4em; display: flex; align-items: center; justify-content: center; }
.ff-reviews__quotebox blockquote {
  display: block;
  text-align: center;
  font-size: 3.3rem;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 0;
  border: 0;
}
.ff-reviews__stage figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 2rem;
  font-size: 1.45rem;
  color: var(--ff-muted);
}
.ff-reviews__dots { display: flex; justify-content: center; gap: 0.8rem; margin-top: 2.4rem; }
.ff-reviews__dots button {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(38, 43, 26, 0.22);
}
/* background-color, not the shorthand: `background` resets background-clip and
   would let the fill escape into the transparent tap-target border on mobile */
.ff-reviews__dots button:hover { background-color: rgba(38, 43, 26, 0.45); }
.ff-reviews__dots button.is-active { background-color: var(--ff-olive); }
.ff-reviews__ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
}
.ff-reviews__ctas .ff-pill { padding: 1.5rem 3rem; }
.ff-reviews__stat { text-align: center; margin-top: 2rem; }

/* ── Signup ── */
.ff-signup {
  background: var(--ff-olive);
  border-radius: 20px;
  padding: 5.2rem;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 4.8rem;
  align-items: center;
  color: #fff;
}
.ff-signup h2 {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
  color: #fff; /* Dawn base.css forces heading colour to the scheme foreground; restate the panel's white */
}
.ff-signup p { font-weight: 300; font-size: 1.55rem; line-height: 1.6; opacity: 0.85; max-width: 44ch; margin: 0; }
.ff-signup__form { display: flex; flex-direction: column; gap: 1.2rem; }
.ff-signup__form input[type='email'] {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 1.5rem 2.2rem;
  font-family: var(--font-body-family);
  font-size: 1.45rem;
  color: #fff;
  outline: none;
}
.ff-signup__form input[type='email']::placeholder { color: rgba(255, 255, 255, 0.6); }
.ff-signup__form input[type='email']:focus { border-color: var(--ff-sand); }
.ff-signup__success { font-size: 1.55rem; font-weight: 500; }
.ff-signup__error { font-size: 1.3rem; color: var(--ff-sand); }

/* ── Page intro ── */
.ff-page-intro { padding-top: 5.2rem; }
.ff-page-intro > div { max-width: 82rem; }
.ff-page-intro h1 {
  font-size: 6rem;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 1.8rem 0 2rem;
}
.ff-page-intro h1 span { color: var(--ff-muted); }
.ff-page-intro p { font-size: 1.8rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); max-width: 56ch; margin: 0; }

/* ── Guidance card (in the product grid) ── */
.ff-guidance-card {
  background: var(--ff-sand);
  border-radius: 16px;
  padding: 3.4rem 3rem;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.ff-guidance-card .ff-kicker { margin-bottom: 1.4rem; }
.ff-guidance-card__title { font-size: 2.2rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; margin-bottom: 1.2rem; }
.ff-guidance-card p { font-size: 1.45rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); margin: 0 0 2.2rem; }
.ff-guidance-card .ff-textlink { margin-top: auto; align-self: flex-start; }

/* ── Promise strip ── */
.ff-promise {
  display: grid;
  /* column count set per-section from the tile count (see ff-promise-strip.liquid) */
  grid-template-columns: repeat(var(--promise-cols, 4), 1fr);
  gap: 1px;
  background: rgba(244, 243, 236, 0.12);
  border-radius: 16px;
  overflow: hidden;
}
.ff-promise__tile { background: var(--ff-olive-deep); padding: 2.6rem 2.4rem; display: flex; flex-direction: column; gap: 1.2rem; }
.ff-promise__icon { color: #8b9367; display: flex; flex: none; }
.ff-promise__title { color: var(--ff-cream); font-size: 1.65rem; font-weight: 500; line-height: 1.25; }
.ff-promise__tag { color: #a8ac9c; }

/* Light variant. On the landing pages this strip sits directly above the dark
   closing CTA, and two dark bands in a row read as one block — so the strip
   goes warm and quiet and lets the CTA own the only dark moment on the page. */
.ff-promise--light { background: rgba(38, 43, 26, 0.14); }
.ff-promise--light .ff-promise__tile { background: var(--ff-sand); }
.ff-promise--light .ff-promise__icon { color: var(--ff-olive); }
.ff-promise--light .ff-promise__title { color: var(--ff-ink); }
.ff-promise--light .ff-promise__tag { color: var(--ff-muted); }

/* ── CTA banner ── */
.ff-cta-banner {
  background: var(--ff-sand);
  border-radius: 20px;
  padding: 6.4rem 5.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  flex-wrap: wrap;
}
.ff-cta-banner--olive { background: var(--ff-olive); }
.ff-cta-banner--olive h2, .ff-cta-banner--olive p { color: #fff; }
.ff-cta-banner--olive p { opacity: 0.85; }
.ff-cta-banner__copy { max-width: 52ch; }
.ff-cta-banner__copy h2 { font-size: 3.8rem; font-weight: 500; line-height: 1.06; letter-spacing: -0.024em; margin-bottom: 1.2rem; }
.ff-cta-banner__copy p { font-size: 1.6rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); margin: 0; }
.ff-cta-banner__ctas { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

/* ── Mobile ── */
@media screen and (max-width: 989px) {
  .ff-section { padding-left: 2rem; padding-right: 2rem; padding-top: 6.4rem; }
  .ff-section--first { padding-top: 2.4rem; }
  .ff-section__head h2 { font-size: clamp(2.6rem, 7vw, 3.4rem); }

  /* Collection grid: the "view all" link moves below the products so the
     heading gets the full width instead of being squeezed into three lines. */
  .ff-collection-grid__viewall--top { display: none; }
  /* Centred under the grid. The link is inline-block so its underline hugs the
     text rather than spanning the row, so the centring is done by the block
     wrapper's text-align, not by the link itself. */
  .ff-collection-grid__viewall--bottom {
    display: block;
    width: fit-content;
    margin: 2.8rem auto 0;
  }
  /* With the link gone the head is a single column, so let the heading run the
     full width and balance its own line breaks. */
  .ff-section:has(.ff-collection-grid__viewall) .ff-section__head { display: block; }
  .ff-section:has(.ff-collection-grid__viewall) .ff-section__head h2 {
    max-width: none;
    text-wrap: balance;
  }

  /* Hero: copy overlaid on image */
  .ff-hero { grid-template-columns: 1fr; gap: 0; }
  .ff-hero__panel,
  .ff-hero__media { grid-area: 1 / 1; border-radius: 20px; }
  .ff-hero__media { min-height: 56rem; }
  .ff-hero__panel {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    background: linear-gradient(200deg, rgba(38, 43, 26, 0.18) 0%, rgba(38, 43, 26, 0.42) 45%, rgba(38, 43, 26, 0.82) 100%);
    padding: 3.2rem 2.2rem 2.8rem;
  }
  .ff-hero__panel h1 { font-size: clamp(3.2rem, 8.5vw, 4.4rem); }

  /* Two per row on mobile. The homepage adds --feature to promote its first card
     to full width; the collection page runs an even two-up grid. */
  /* minmax(0,1fr) rather than 1fr: a plain 1fr track keeps an auto minimum, so the
     widest card content would make the columns unequal. */
  .ff-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .ff-product-grid--feature .ff-product-card:first-child { grid-column: 1 / -1; }

  /* Grid items default to min-width:auto, so a nowrap title below would set the
     column's minimum and push the second card off-screen. Let them shrink. */
  .ff-product-grid .ff-product-card { min-width: 0; }

  /* Compact treatment for every card that shares a row — on --feature that is
     everything after the first, on the plain grid it is all of them. */
  .ff-product-grid--feature .ff-product-card:not(:first-child),
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card { padding: 1.2rem 1.2rem 1.6rem; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-product-card__note,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card__note { display: none; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-swap-long,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-swap-long { display: none; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-swap-short,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-swap-short { display: inline; }

  /* Cards are ~139px of usable width, so the title has to come down a step to
     hold one line. Equal-height rows then line the swatches, price and button
     up across both cards. */
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-product-card__name {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.8rem;
    white-space: nowrap;
    /* safety net: truncate rather than spill out of the card on a tiny screen */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* On the even two-up grid the product names are longer than the card is wide,
     so let them wrap to two lines instead of truncating to an ellipsis. Fixed
     min-height keeps the swatches, price and button aligned across the row. */
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card__name {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 0.8rem;
    min-height: 3.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-product-card__rating,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card__rating { margin-bottom: 0.8rem; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-product-card__swatches,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card__swatches { gap: 0.5rem; margin-bottom: 0.8rem; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-product-card__swatches span,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card__swatches span { width: 1.2rem; height: 1.2rem; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-product-card__price,
  .ff-product-grid:not(.ff-product-grid--feature) .ff-product-card__price { margin-bottom: 1.2rem; }
  .ff-product-grid--feature .ff-product-card:not(:first-child) .ff-pill {
    padding: 1.1rem 1.2rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
  /* Collection grid runs a shorter button than the homepage. Kept at 0.8rem
     padding (~34px tall) rather than going smaller: the audience skews 42-62 and
     anything under ~32px gets fiddly to hit on a phone. */
  .ff-product-grid:not(.ff-product-grid--feature) .ff-pill {
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    letter-spacing: 0.08em;
  }

  /* badges read as labels, not headlines */
  .ff-product-grid .ff-product-card .ff-badge-dark {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    padding: 0.4rem 0.9rem;
    top: 0.8rem;
    left: 0.8rem;
  }
  .ff-difference { grid-template-columns: 1fr; padding: 3.2rem 2.2rem; gap: 2.6rem; }
  .ff-difference h2 { font-size: clamp(2.4rem, 6.6vw, 3rem); }
  .ff-difference > div > p { font-size: 1.5rem; margin-bottom: 2.2rem; }
  .ff-difference__row { padding: 1.8rem; }
  .ff-difference .ff-pill { display: block; text-align: center; }

  .ff-bundle { grid-template-columns: 1fr; gap: 2.8rem; }
  .ff-assurance { grid-template-columns: 1fr; }

  .ff-reviews__head { flex-direction: column; gap: 0.8rem; margin-bottom: 1.8rem; }
  .ff-reviews__title { font-size: 1.8rem; text-align: center; max-width: 24ch; }
  .ff-reviews__tabs { gap: 0.4rem; }
  .ff-reviews__tabs button { padding: 0.8rem 0.9rem; font-size: 1.1rem; flex: none; }
  .ff-reviews__stage { gap: 0; }
  .ff-reviews__arrow { display: none; }
  .ff-reviews__stage figure {
    background: var(--ff-sand);
    border-radius: 20px;
    padding: 2.6rem 2.2rem 2.4rem;
  }
  .ff-reviews__quotebox blockquote { font-size: 2rem; line-height: 1.35; }
  .ff-reviews__ctas { gap: 0.9rem; }
  /* keep both labels on one line down to a 320px phone */
  .ff-reviews__ctas .ff-pill {
    flex: 1;
    padding: 1.1rem 1.2rem;
    font-size: 1rem;
    letter-spacing: 0.07em;
    white-space: nowrap;
  }
  .ff-reviews__dots button {
    width: 2.7rem;
    height: 2.7rem;
    border: 0.8rem solid transparent;
    background-clip: padding-box;
    margin: -0.8rem;
  }

  .ff-signup { grid-template-columns: 1fr; padding: 3rem 2.2rem; gap: 1.8rem; }
  .ff-signup h2 { font-size: 2.3rem; margin-bottom: 0.8rem; }
  .ff-signup p { font-size: 1.45rem; }

  /* The page intro and the grid beneath it read as one unit, so the grid does not
     need a full section's worth of air above it. Scoped with :has() so only a
     grid that directly follows an intro tightens up — every other section
     boundary keeps its normal rhythm. */
  .shopify-section:has(> .ff-page-intro) + .shopify-section > .ff-section { padding-top: 3.2rem; }

  /* The guidance card is a paragraph of prose, not a product. In a 160px column
     it breaks two words to a line, so give it a row of its own. */
  .ff-product-grid .ff-guidance-card { grid-column: 1 / -1; }

  .ff-page-intro { padding-top: 2.2rem; }
  .ff-page-intro h1 { font-size: clamp(3.2rem, 8.5vw, 4.4rem); }
  .ff-page-intro p { font-size: 1.5rem; }
  .ff-promise { grid-template-columns: 1fr; }
  .ff-promise__tile { flex-direction: row; align-items: center; padding: 1.5rem 1.8rem; }
  .ff-promise__title { flex: 1; font-size: 1.45rem; }
  /* Tags must wrap here: a nowrap tag longer than its half of the row overflows
     the tile, and .ff-promise clips the overflow, so every tag in the strip
     loses its tail. Wrapping keeps long tags whole. */
  .ff-promise__tag { text-align: right; white-space: normal; max-width: 52%; line-height: 1.5; }
  .ff-promise__title { min-width: 0; }
  .ff-cta-banner { padding: 3rem 2.2rem; }
  .ff-cta-banner__copy h2 { font-size: 2.4rem; }
  .ff-cta-banner__ctas { width: 100%; flex-direction: column; align-items: stretch; text-align: center; }
  .ff-cta-banner__ctas .ff-textlink { align-self: center; }
}

/* ============ Story pages (Why Muslin / About / Care) ============ */
.ff-pill--olive { background: var(--ff-olive); color: #fff; }
.ff-pill--olive:hover { background: #4c5632; color: #fff; }

.ff-story-hero { text-align: center; }
.ff-story-hero__inner { max-width: 78rem; margin: 0 auto; }
.ff-story-hero h1 { font-size: clamp(3.8rem, 6vw, 6.2rem); font-weight: 500; line-height: 1.03; letter-spacing: -0.03em; margin: 1.8rem 0 2.2rem; }
.ff-story-hero h1 span { color: var(--ff-muted); }
.ff-story-hero__text { font-size: 1.8rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); max-width: 56ch; margin: 0 auto; }
.ff-story-hero__ctas { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 3.6rem; }
.ff-story-hero__media { position: relative; border-radius: 2.4rem; overflow: hidden; background: var(--ff-sand); aspect-ratio: 16 / 7.5; margin-top: 5.6rem; }
.ff-story-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ff-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 5.6rem; align-items: center; }
.ff-split--flip .ff-split__media { order: 2; }
.ff-split__media { position: relative; border-radius: 2rem; overflow: hidden; background: var(--ff-sand); aspect-ratio: 1 / 1.1; }
.ff-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-split__step { font-family: var(--ff-font-mono); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--ff-terracotta); margin-bottom: 1.4rem; }
.ff-split h2 { font-size: clamp(3rem, 4vw, 4.2rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.024em; margin: 0 0 1.8rem; max-width: 24ch; }
.ff-split__copy p { font-size: 1.65rem; font-weight: 300; line-height: 1.7; color: var(--ff-muted); max-width: 52ch; margin: 0 0 1.4rem; }
.ff-split__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(38, 43, 26, 0.14); border-radius: 1.6rem; overflow: hidden; margin-top: 3.2rem; }
.ff-split__stat { background: var(--ff-sand); padding: 2.2rem 1.8rem; }
.ff-split__stat-value { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.ff-split__stat-label { font-family: var(--ff-font-mono); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-muted); margin-top: 0.8rem; }

.ff-numbered { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 6.4rem; align-items: start; }
.ff-numbered__intro { position: sticky; top: 12.4rem; }
.ff-numbered__intro h2 { font-size: clamp(3rem, 4vw, 4.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.026em; margin: 0 0 1.8rem; }
.ff-numbered__intro > p { font-size: 1.6rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); max-width: 44ch; margin: 0 0 3.2rem; }
.ff-numbered__quote { background: var(--ff-sand); border-radius: 2rem; padding: 3rem 2.8rem; display: flex; flex-direction: column; gap: 1.4rem; }
.ff-numbered__quote p { font-size: 2rem; font-weight: 400; line-height: 1.4; letter-spacing: -0.012em; margin: 0; }
.ff-numbered__quote-author { font-family: var(--ff-font-mono); font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-muted); }
.ff-numbered__rows { display: flex; flex-direction: column; }
.ff-numbered__row { display: flex; gap: 2.2rem; padding: 2.6rem 0; border-top: 1px solid var(--ff-sage-line); align-items: flex-start; }
.ff-numbered__num { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 999px; border: 1px solid rgba(154, 63, 32, 0.45); color: var(--ff-terracotta); font-family: var(--ff-font-mono); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.ff-numbered__body { display: flex; flex-direction: column; gap: 0.8rem; }
.ff-numbered__title { font-size: 2.1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.ff-numbered__copy { font-size: 1.5rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); max-width: 56ch; }

.ff-process { background: var(--ff-sand); border-radius: 2.4rem; padding: 6.4rem 5.6rem; }
.ff-process__head { max-width: 56ch; margin-bottom: 4.8rem; }
.ff-process__head h2 { font-size: clamp(3rem, 4vw, 4.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.026em; margin: 0 0 1.4rem; }
.ff-process__head p { font-size: 1.6rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); margin: 0; }
.ff-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.ff-process__card { background: var(--ff-canvas); border-radius: 1.8rem; padding: 2.2rem 2.2rem 2.6rem; display: flex; flex-direction: column; }
.ff-process__media { position: relative; border-radius: 1.2rem; overflow: hidden; background: var(--ff-sand); aspect-ratio: 1 / 0.8; margin-bottom: 2rem; }
.ff-process__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-process__num { font-family: var(--ff-font-mono); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--ff-terracotta); margin-bottom: 1rem; }
.ff-process__title { font-size: 1.8rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.8rem; }
.ff-process__card p { font-size: 1.4rem; font-weight: 300; line-height: 1.6; color: var(--ff-muted); margin: 0; }

.ff-panel-foot { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 3.6rem; padding-top: 2.8rem; border-top: 1px solid rgba(38, 43, 26, 0.14); }
.ff-panel-foot__icon { flex: none; color: var(--ff-olive); display: flex; }
.ff-panel-foot p { flex: 1; min-width: 28rem; font-size: 1.45rem; font-weight: 300; line-height: 1.6; color: var(--ff-muted); margin: 0; }
.ff-panel-foot p strong { font-weight: 500; color: var(--ff-ink); }
.ff-panel-foot--dark { border-top-color: rgba(244, 243, 236, 0.14); }
.ff-panel-foot--dark .ff-panel-foot__icon { color: #8b9367; }
.ff-panel-foot--dark p { color: #a8ac9c; }
.ff-panel-foot--dark p strong { color: var(--ff-cream); }

.ff-founder { background: var(--ff-olive-deep); border-radius: 2.4rem; padding: 7.2rem 5.6rem; text-align: center; }
.ff-founder__quote { color: var(--ff-cream); font-size: clamp(2.6rem, 3.5vw, 3.4rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; max-width: 26ch; margin: 2.2rem auto; }
.ff-founder__attribution { font-size: 1.45rem; color: #a8ac9c; }
.ff-founder__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(244, 243, 236, 0.14); border-radius: 1.6rem; overflow: hidden; max-width: 84rem; margin: 4.8rem auto 0; }
.ff-founder__stat { background: var(--ff-olive-deep); padding: 2.8rem 2rem; }
.ff-founder__stat-value { color: var(--ff-cream); font-size: 3.4rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.ff-founder__stat-label { font-family: var(--ff-font-mono); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: #a8ac9c; margin-top: 1rem; }

.ff-values__head { max-width: 60ch; margin-bottom: 4rem; }
.ff-values__head h2 { font-size: clamp(3rem, 4vw, 4.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.026em; margin: 0; }
.ff-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ff-values__card { background: var(--ff-sand); border-radius: 1.8rem; padding: 3.4rem 3rem; }
.ff-values__num { font-family: var(--ff-font-mono); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--ff-terracotta); margin-bottom: 1.6rem; }
.ff-values__title { font-size: 2rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1rem; }
.ff-values__card p { font-size: 1.45rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); margin: 0; }
.ff-values__card a { border-bottom: 1px solid rgba(38, 43, 26, 0.3); color: inherit; text-decoration: none; }

.ff-care { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.ff-care__card { background: var(--ff-sand); border-radius: 2rem; padding: 3.2rem 3rem 2.6rem; }
.ff-care__label { font-family: var(--ff-font-mono); font-size: 1rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.6rem; }
.ff-care__label--do { color: var(--ff-olive); }
.ff-care__label--never { color: var(--ff-terracotta); }
.ff-care__row { display: flex; align-items: flex-start; gap: 1.4rem; padding: 1.6rem 0; border-top: 1px solid var(--ff-sage-line); }
.ff-care__icon { flex: none; display: flex; margin-top: 1px; }
.ff-care__card--do .ff-care__icon { color: var(--ff-olive); }
.ff-care__card--never .ff-care__icon { color: var(--ff-muted); }
.ff-care__body { display: flex; flex-direction: column; gap: 0.3rem; }
.ff-care__title { font-size: 1.55rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.ff-care__note { font-size: 1.35rem; font-weight: 300; line-height: 1.5; color: var(--ff-muted); }

.ff-quote-strip { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; text-align: center; }
.ff-quote-strip p { font-size: 2.1rem; font-weight: 400; line-height: 1.35; letter-spacing: -0.014em; margin: 0; }
.ff-quote-strip__author { font-family: var(--ff-font-mono); font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-muted); }

.ff-quote-grid__head { text-align: center; margin-bottom: 4rem; }
.ff-quote-grid__title { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-bottom: 1rem; }
.ff-quote-grid__title .ff-stars { font-size: 1.6rem; letter-spacing: 3px; }
.ff-quote-grid__title span:last-child { font-size: 2.3rem; font-weight: 500; letter-spacing: -0.015em; }
.ff-quote-grid__rating { font-family: var(--ff-font-mono); font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-muted); }
.ff-quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ff-quote-card {
  background: #fff;
  border: 1px solid rgba(38, 43, 26, 0.08);
  border-radius: 1.8rem;
  padding: 2.8rem 2.8rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin: 0;
  transition: border-color 200ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.ff-quote-card:hover {
  border-color: rgba(38, 43, 26, 0.18);
  box-shadow: 0 18px 34px -24px rgba(38, 43, 26, 0.32);
  transform: translateY(-2px);
}
/* Real reviews run longer than a pull-quote, so this sits well below the old
   2.1rem — readable at length rather than shouting three words. */
.ff-quote-card blockquote {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.004em;
  flex: 1;
  margin: 0;
  color: var(--ff-ink);
}
.ff-quote-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(38, 43, 26, 0.09);
}
.ff-quote-card__author { font-size: 1.45rem; font-weight: 500; color: var(--ff-ink); line-height: 1.4; }
.ff-quote-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ff-muted);
  line-height: 1.4;
}
.ff-quote-card__verified svg { color: var(--ff-olive); flex: none; }

.ff-snags { background: var(--ff-olive-deep); border-radius: 2.4rem; padding: 6.4rem 5.6rem; }
.ff-snags__head { max-width: 56ch; margin-bottom: 4rem; }
.ff-snags__head h2 { color: var(--ff-cream); font-size: clamp(2.8rem, 3.5vw, 3.8rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.024em; margin: 0 0 1.6rem; }
.ff-snags__head p { color: #a8ac9c; font-size: 1.6rem; font-weight: 300; line-height: 1.65; margin: 0; }
.ff-snags__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ff-snags__tile { background: rgba(244, 243, 236, 0.07); border-radius: 1.8rem; padding: 2.6rem 2.4rem 2.8rem; display: flex; flex-direction: column; gap: 1rem; }
.ff-snags__tag { font-family: var(--ff-font-mono); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-terracotta-tint); }
.ff-snags__title { color: var(--ff-canvas); font-size: 1.8rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.ff-snags__copy { color: #a8ac9c; font-size: 1.4rem; font-weight: 300; line-height: 1.6; }

.ff-faq-grid__head { max-width: 60ch; margin-bottom: 3.2rem; }
.ff-faq-grid__head h2 { font-size: clamp(3rem, 4vw, 4.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.026em; margin: 0; }
.ff-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(38, 43, 26, 0.14); border-radius: 2rem; overflow: hidden; }
.ff-faq-grid__cell { background: var(--ff-canvas); padding: 3rem 2.8rem 3.2rem; display: flex; flex-direction: column; gap: 1rem; }
.ff-faq-grid__q { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.ff-faq-grid__a { font-size: 1.45rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); }

.ff-closing { background: var(--ff-sand); border-radius: 2rem; padding: 6.4rem 5.6rem; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4.8rem; align-items: center; }
.ff-closing h2 { font-size: clamp(3rem, 4vw, 4rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1.4rem; }
.ff-closing__copy > p { font-size: 1.6rem; font-weight: 300; line-height: 1.65; color: var(--ff-muted); max-width: 46ch; margin: 0 0 2.8rem; }
.ff-closing__ctas { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.ff-closing__chips { display: flex; flex-direction: column; gap: 1.4rem; }
.ff-closing__chip { display: flex; align-items: center; gap: 1.4rem; background: var(--ff-canvas); border-radius: 1.4rem; padding: 1.8rem 2.2rem; font-size: 1.5rem; font-weight: 500; }
.ff-closing__chip-icon { flex: none; color: var(--ff-olive); display: flex; }

@media (max-width: 989px) {
  .ff-story-hero__media { border-radius: 1.8rem; margin-top: 3.6rem; }
  .ff-split, .ff-split--flip { grid-template-columns: 1fr; gap: 2.8rem; }
  .ff-split--flip .ff-split__media { order: 0; }
  .ff-numbered { grid-template-columns: 1fr; gap: 3.6rem; }
  .ff-numbered__intro { position: static; }
  .ff-process { padding: 3.6rem 2.4rem; }
  .ff-process__grid { grid-template-columns: 1fr 1fr; }
  .ff-founder { padding: 4.4rem 2.4rem; }
  .ff-founder__stats { grid-template-columns: 1fr 1fr; }
  .ff-values { grid-template-columns: 1fr; }
  .ff-care { grid-template-columns: 1fr; }
  .ff-quote-grid { grid-template-columns: 1fr; }
  /* The head is a flex row of stars + heading. Once the heading wraps to two
     lines the stars sit vertically centred against that block and the whole
     thing reads lopsided, so stack them on narrow screens. */
  .ff-quote-grid__head { margin-bottom: 3.2rem; }
  .ff-quote-grid__title { flex-direction: column; gap: 1.2rem; margin-bottom: 1.2rem; }
  .ff-quote-grid__title span:last-child {
    font-size: 2.6rem;
    line-height: 1.18;
    text-wrap: balance;
    max-width: 18ch;
  }
  .ff-quote-grid__rating { font-size: 1.2rem; letter-spacing: 0.1em; line-height: 1.5; }
  .ff-snags { padding: 3.6rem 2.4rem; }
  .ff-snags__grid { grid-template-columns: 1fr; }
  .ff-faq-grid { grid-template-columns: 1fr; }
  .ff-closing { grid-template-columns: 1fr; padding: 3.6rem 2.4rem; gap: 3.2rem; }
  /* Stacked on mobile, the button and link were each sized to their own content
     (263px and 228px) inside a 287px column, so the panel had three different
     right edges. Stretch the button to the copy width and keep the link on the
     same left edge as the heading. */
  .ff-closing__ctas { flex-direction: column; align-items: stretch; gap: 1.4rem; }
  .ff-closing__ctas .ff-pill { display: block; width: 100%; }
  /* Centred under the full-width button so it balances the button's centred
     label. align-self keeps the underline hugging the text rather than running
     the full column width, which would read as a second button. */
  .ff-closing__ctas .ff-textlink { align-self: center; }
}
@media (max-width: 599px) {
  .ff-process__grid { grid-template-columns: 1fr; }
  .ff-founder__stats { grid-template-columns: 1fr 1fr; }
}

/* ── 404 ─────────────────────────────────────────────────────────────────
   Sizes come from the DESIGN.md ramp (headline / body-editorial / body-sm /
   kicker); every rule sets its own line-height because Dawn's ~1.8x leaks in. */
.ff-404 {
  max-width: 62rem;
  margin: 0 auto;
  padding: 6.4rem 0 9.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.8rem;
}
.ff-404 h1 {
  font-size: clamp(2.8rem, 3.5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--ff-ink);
  margin: 0;
}
.ff-404__text {
  max-width: 46ch;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ff-muted);
  margin: 0;
}
.ff-404__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1rem;
}
.ff-404__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.8rem;
  width: 100%;
  margin-top: 2.4rem;
  padding-top: 2.8rem;
  border-top: 1px solid rgba(38, 43, 26, 0.12);
}
.ff-404__links a {
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--ff-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.ff-404__links a:hover {
  color: var(--ff-ink);
  border-bottom-color: var(--ff-ink);
}
@media (max-width: 749px) {
  .ff-404 { padding: 4rem 0 6.4rem; }
  .ff-404__ctas { width: 100%; flex-direction: column; align-items: stretch; }
  .ff-404__ctas .ff-pill { justify-content: center; }
}

/* ── Pills on mobile ──────────────────────────────────────────────────────
   The desktop pill (1.6rem 3rem, and 1.7rem 3.4rem for --buy) is too heavy on a
   phone: it reads as oversized, and the wide horizontal padding was squeezing
   "Start with the blanket · $229" onto two lines. Trimming the padding shrinks
   the pill AND gives the label room to sit on one line.

   Placed at the end of the file deliberately — .ff-pill--buy has equal
   specificity, so source order is what lets this win.

   Kept at ~46px tall: still above the 44px touch-target guideline, which matters
   for a 42-62 audience on a phone. */
@media screen and (max-width: 989px) {
  .ff-pill { padding: 1.2rem 2.2rem; }
  .ff-pill--buy { padding: 1.3rem 2rem; }
}

/* ── Landing page sticky buy bar ─────────────────────────────────────────── */
.ff-lp-buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(251, 251, 246, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(38, 43, 26, 0.12);
  padding: 1rem 2rem calc(1rem + env(safe-area-inset-bottom));
}
.ff-lp-buybar[hidden] { display: none; }
.ff-lp-buybar__inner {
  max-width: 124rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.ff-lp-buybar__info { display: flex; flex-direction: column; min-width: 0; }
.ff-lp-buybar__name {
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ff-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ff-lp-buybar__meta { font-size: 1.2rem; line-height: 1.4; color: var(--ff-muted); }
.ff-lp-buybar__cta { flex: none; }
@media (min-width: 750px) {
  /* Wider target on desktop — the bar is the only CTA in view once you are
     past the hero, so the button should not read as an afterthought. */
  .ff-lp-buybar__cta { min-width: 20rem; padding-left: 4.4rem; padding-right: 4.4rem; }
}
@media (max-width: 599px) {
  .ff-lp-buybar__name { font-size: 1.35rem; }
}

/* ── Landing page dedicated CTA + minimal footer ─────────────────────────── */
/* The closing CTA is the one thing on a 6,000px page that has to be found, so
   it stops being page and becomes an object: a dark panel on the cream scroll,
   with a warm glow pooling behind the button so terracotta reads as the
   destination rather than just another element. */
.ff-lp-cta { padding-bottom: 0; }
.ff-lp-cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ff-olive-deep);
  color: var(--ff-cream);
  border-radius: 24px;
  padding: 8.4rem 5.6rem 7.2rem;
}
.ff-lp-cta__panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 58%;
  width: 78rem;
  height: 78rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(154, 63, 32, 0.38) 0%, rgba(154, 63, 32, 0.13) 38%, rgba(154, 63, 32, 0) 68%);
  pointer-events: none;
}
.ff-lp-cta .ff-kicker { color: var(--ff-sand); font-size: 1.3rem; opacity: 0.85; }
.ff-lp-cta h2 {
  font-size: clamp(3.2rem, 5vw, 5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: var(--ff-cream);
  max-width: 18ch;
  text-wrap: balance;
  margin: 1.8rem 0 3.6rem;
}
.ff-lp-cta__btn {
  min-width: 30rem;
  font-size: 1.25rem;
  padding: 2.1rem 4rem;
  box-shadow: 0 1.4rem 3.2rem rgba(0, 0, 0, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ff-lp-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 1.8rem 4rem rgba(0, 0, 0, 0.38);
}
.ff-lp-cta__note {
  font-size: 1.45rem;
  font-weight: 300;
  color: rgba(244, 243, 236, 0.72);
  max-width: 42ch;
  margin: 2.8rem 0 0;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(244, 243, 236, 0.16);
  line-height: 1.6;
}
/* Bare closing button: sits on the cream page at the foot, no panel. Deliberately
   plainer than the dark CTA so it reads as one last door, not a second pitch. */
.ff-lp-cta--bare {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 7.2rem;
}
.ff-lp-cta--bare .ff-lp-cta__btn { box-shadow: none; }
.ff-lp-cta--bare .ff-lp-cta__btn:hover { box-shadow: 0 1rem 2.4rem rgba(38, 43, 26, 0.18); }
/* Width-matched to the button so the chips read as one cluster with it, the way
   they do under add-to-cart on the PDP. */
.ff-lp-cta__chips { width: 100%; max-width: 56rem; margin-top: 2.8rem; padding: 0; gap: 1.6rem; }
.ff-lp-cta__stock { width: 100%; max-width: 46rem; margin: 2.8rem 0 0; }
.ff-lp-cta__chips > div { white-space: nowrap; }
@media (max-width: 749px) {
  /* Stack icon over label so all three labels stay on one line each */
  .ff-lp-cta__chips { max-width: none; gap: 0.8rem; margin-top: 2.4rem; }
  .ff-lp-cta__chips > div { flex-direction: column; gap: 0.8rem; text-align: center; font-size: 1.2rem; }
  .ff-lp-cta__stock { max-width: none; margin-top: 2.4rem; white-space: normal; font-size: 1.3rem; }
}
.ff-lp-cta__note--bare {
  color: var(--ff-muted);
  border-top: 0;
  padding-top: 0;
  margin-top: 1.8rem;
  font-size: 1.35rem;
}
@media (prefers-reduced-motion: reduce) {
  .ff-lp-cta__btn { transition: none; }
  .ff-lp-cta__btn:hover { transform: none; }
}
@media (max-width: 749px) {
  .ff-lp-cta__panel { padding: 5.6rem 2.4rem 5rem; border-radius: 20px; }
  .ff-lp-cta__panel::before { width: 52rem; height: 52rem; }
  .ff-lp-cta h2 { max-width: 15ch; margin: 1.4rem 0 3rem; }
  .ff-lp-cta__btn { min-width: 0; width: 100%; padding: 2rem 2.4rem; }
  .ff-lp-cta__note { margin-top: 2.4rem; padding-top: 2.2rem; font-size: 1.35rem; }
}

.ff-lp-footer {
  background: var(--ff-olive-deep);
  color: var(--ff-cream);
  text-align: center;
  padding: 6.4rem 2.4rem 7.2rem;
  margin-top: 9.6rem;
}
.ff-lp-footer__mark {
  font-family: var(--ff-font-mono);
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
/* Taller than the main site footer's 20px: here the wordmark is the only
   branding on the page, so it carries more weight. */
.ff-lp-footer__logo { display: inline-block; height: 2.8rem; width: auto; }
@media (max-width: 749px) {
  .ff-lp-footer__logo { height: 2.4rem; }
}
.ff-lp-footer__copy { font-size: 1.35rem; opacity: 0.75; margin: 2rem 0 1.4rem; line-height: 1.6; }
.ff-lp-footer__links { display: flex; justify-content: center; gap: 1.4rem; font-size: 1.35rem; line-height: 1.6; }
.ff-lp-footer__links a { color: var(--ff-cream); text-decoration: underline; text-underline-offset: 0.3em; }
.ff-lp-footer__links span { opacity: 0.4; }

/* ── Landing page advertorial byline + pull-quote bar ────────────────────── */
.ff-lp-byline { padding-top: 3.6rem; max-width: 86rem; }
.ff-lp-byline__row { display: flex; align-items: center; gap: 1.4rem; }
.ff-lp-byline__avatar {
  width: 5.2rem; height: 5.2rem; border-radius: 999px; overflow: hidden;
  background: var(--ff-olive); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ff-lp-byline__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-lp-byline__mono {
  font-family: var(--ff-font-mono); font-size: 1.2rem; letter-spacing: 0.12em;
  color: var(--ff-cream); line-height: 1;
}
.ff-lp-byline__meta { display: flex; flex-direction: column; gap: 0.3rem; font-size: 1.45rem; line-height: 1.4; }
.ff-lp-byline__meta strong { font-weight: 500; color: var(--ff-ink); }
.ff-lp-byline__meta span { color: var(--ff-muted); }
.ff-lp-byline__quote {
  margin: 2.4rem 0 0; padding: 1.8rem 2.4rem;
  background: var(--ff-sand); border-left: 3px solid var(--ff-olive-deep);
  border-radius: 0 1.2rem 1.2rem 0;
}
.ff-lp-byline__quote p {
  font-size: 1.8rem; font-weight: 500; line-height: 1.5;
  color: var(--ff-ink); margin: 0;
}
.ff-lp-byline__quote cite {
  /* inline, on the same line as the quote */
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ff-muted);
  white-space: nowrap;
}
@media (max-width: 749px) {
  .ff-lp-byline__quote p { font-size: 1.6rem; }
}

/* ── Numbered list: editorial layout (landing pages) ─────────────────────
   Intro spans full width, then one image-led row per item — image left,
   numbered heading and copy right, as in the advertorial reference. */
.ff-numbered--editorial { grid-template-columns: 1fr; gap: 0; }
.ff-numbered--editorial .ff-numbered__intro {
  position: static;
  max-width: 62rem;
  margin-bottom: 5.6rem;
}
.ff-numbered--editorial .ff-numbered__rows { gap: 5.6rem; }
.ff-numbered__item {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4.8rem;
  align-items: center;
}
.ff-numbered__media {
  position: relative;
  border-radius: 1.8rem;
  overflow: hidden;
  background: var(--ff-sand);
  aspect-ratio: 1 / 1;
}
.ff-numbered__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-numbered__itemtitle {
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0 0 1.6rem;
  max-width: 20ch;
}
.ff-numbered__inum { color: var(--ff-terracotta); }
.ff-numbered__itemcopy {
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ff-muted);
  max-width: 52ch;
  margin: 0;
}
@media (max-width: 989px) {
  .ff-numbered--editorial .ff-numbered__intro { margin-bottom: 3.6rem; }
  .ff-numbered--editorial .ff-numbered__rows { gap: 4rem; }
  .ff-numbered__item { grid-template-columns: 1fr; gap: 2rem; }
  .ff-numbered__media { aspect-ratio: 4 / 3; }
  .ff-numbered__itemtitle { font-size: 2.2rem; margin-bottom: 1.2rem; }
  .ff-numbered__itemcopy { font-size: 1.5rem; }
}

/* Kicker spacing moved off the inline style so layouts can override it */
.ff-numbered__kicker { margin-bottom: 1.4rem; }

/* ── Editorial intro: compact two-column header ───────────────────────────
   Was 391px tall with a 156px padded quote card sitting under a half-width
   column. Heading left, quote alongside it right — same information, roughly
   a quarter of the height, and it fills the row instead of leaving it lopsided. */
.ff-numbered--editorial .ff-numbered__intro {
  max-width: none;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 6.4rem;
  align-items: center;
  margin-bottom: 4.8rem;
}
/* Headline-only intro: nothing sits beside it, so drop the two-column grid.
   No artificial character cap — 32ch forced a two-line wrap at 350px while the
   image column below is 465px, so it read as neither one line nor aligned to
   the grid. Left edge matches the images; measure is capped for readability. */
.ff-numbered--editorial .ff-numbered__intro:not(:has(.ff-numbered__quote)) {
  display: block;
  max-width: none;
  margin-bottom: 4.8rem;
  text-align: center;
}
/* Centred, sized to its own content, balanced if it ever needs two lines.
   A step down from the section heading size — it introduces the list rather
   than competing with the page headline above it. */
.ff-numbered--editorial .ff-numbered__intro:not(:has(.ff-numbered__quote)) h2 {
  max-width: none;
  text-wrap: balance;
  /* 3.6rem sits between the old 4.2rem and the 3.2rem item titles, so the
     section headline still outranks the items it introduces. */
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
}
.ff-numbered--editorial .ff-numbered__kicker { grid-column: 1; margin-bottom: 0.8rem; }
.ff-numbered--editorial .ff-numbered__intro h2 { grid-column: 1; margin-bottom: 0; }
/* The heading already says it; the standfirst was filler on an ad landing page. */
.ff-numbered--editorial .ff-numbered__intro > p { display: none; }
.ff-numbered--editorial .ff-numbered__quote {
  grid-column: 2;
  grid-row: 1 / span 2;
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 0.6rem;
}
.ff-numbered--editorial .ff-numbered__quote p {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.45;
}
@media (max-width: 989px) {
  .ff-numbered--editorial .ff-numbered__intro {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
    margin-bottom: 3.2rem;
  }
  .ff-numbered--editorial .ff-numbered__quote { grid-column: 1; grid-row: auto; }
  .ff-numbered--editorial .ff-numbered__quote p { font-size: 1.55rem; }
}

/* ── Landing page: tighten the top ────────────────────────────────────────
   With no site header, the first section sits directly under the announcement
   bar, where a full 9.6rem section padding reads as a dead gap rather than
   rhythm. Body hook set in theme.liquid. */
.ff-lp main > .shopify-section:first-child .ff-section { padding-top: 4rem; }
@media (max-width: 989px) {
  .ff-lp main > .shopify-section:first-child .ff-section { padding-top: 3rem; }
}

/* Verified tick beside the byline name */
.ff-lp-byline__name { display: inline-flex; align-items: center; gap: 0.6rem; }
.ff-lp-byline__verified { display: inline-flex; color: var(--ff-olive); flex: none; line-height: 0; }

/* Secondary text link inside an editorial listicle item */
.ff-numbered__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ff-terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 63, 32, 0.35);
  padding-bottom: 0.4rem;
  line-height: 1.4;
  transition: border-color 180ms ease, gap 180ms ease;
}
.ff-numbered__link:hover { border-bottom-color: var(--ff-terracotta); gap: 1rem; }
.ff-numbered__link svg { flex: none; }

}
}