/** Shopify CDN: Minification failed

Line 81:0 All "@import" rules must come first

**/
/* ==========================================================================
   LST001 advertorial — "Your Pilates Journal"

   Forked from reformly-weight-loss.css. Structure is unchanged (that layout
   already works); what differs is the palette, which now comes from the
   ReformerX PDP rather than the weight-loss page's own purple.

   Every colour is a custom property so the scheme can be retuned in one place.
   Values taken from the maison-* sections that build /products/reformerx-purple.
   ========================================================================== */

/* RSC Jakarta, the theme's variable brand face. Declared here because lst001 is
   the ONLY section on its template — nothing else on the page loads a font, so
   without this the page fell back to the system sans-serif. Same declaration as
   reformly-005-sections.css:16. */
@font-face {
  font-family: 'RSC Jakarta';
  /* woff2 first, ttf kept as the fallback.

     Same variable font, repackaged — woff2 is a lossless container with brotli
     compression, so every axis and glyph is identical. It is 59KB against the
     ttf's 169KB, and this face is font-display: swap, so those 110KB are
     directly in front of text stopping being rendered in the fallback family.

     The ttf line stays for browsers with no woff2 support; they are a rounding
     error now, and the browser only ever fetches the first format it can use,
     so it costs nothing to leave. */
  src:
    url('reformly-jakarta.woff2') format('woff2'),
    url('reformly-jakarta.ttf') format('truetype-variations');
  font-display: swap;
  font-weight: 100 900;
}

/* Variable-font weights.

   RSC Jakarta is variable (font-weight: 100 900), and the theme drives its wght
   axis explicitly rather than trusting font-weight alone — see the convention
   documented at reformly-005-sections.css:12.

   The paired -webkit-text-stroke is applied to BOLD ONLY (700 -> 0.3px,
   800 -> 0.4px). The house convention also strokes 400/500/600 at 0.2px, but
   stroking body copy is what made this read as too heavy when it was tried on
   reformly-plan-preview, so the lighter weights get the axis without the stroke.
*/
:root {
  --lst-accent:   #352D44;  /* headline / CTA — ReformerX dark purple      */
  --lst-accent-2: #C5A8FF;  /* mid purple, highlights                      */
  --lst-tint:     #EFE8FF;  /* palest purple, block backgrounds            */
  --lst-tint-2:   #DFCEFF;  /* light purple, badges and rules              */
  --lst-ink:      #1D211E;  /* body text                                   */
  --lst-muted:    #6E5E8E;  /* secondary text                              */
  --lst-line:     #D0D5DD;  /* borders                                     */
  --lst-red:      #DC2626;  /* sell-out risk only                          */

  /* Text highlight ("Only One Actually Worked."). Its own variable, NOT
     --lst-accent: the ReformerX palette has no saturated purple for text — its
     purples are light BACKGROUNDS (#DFCEFF / #C5A8FF) with dark type. Pointing
     the highlight at --lst-accent (#352D44) made it near-black beside the
     #1D211E body copy, so the emphasis vanished. #6E5E8E is the palette's one
     readable purple: 5.5:1 on white, passes AA. */
  --lst-highlight: #6E5E8E;

  /* Gap between the fixed bars and the h1. The JS offset is
     announcement + topbar + this, so it is the only part that is a design
     choice rather than a measurement — which is why it lives here, per
     breakpoint, instead of as a constant in the JS. */
  --lst-top-gap: 16px;
}

/* ==========================================================================
   Reformly Weight Loss Landing Page
   Prefix: .lst__
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Variables --- */
:root {
  --rwl-primary: var(--lst-accent);
  --rwl-primary-light: var(--lst-tint);
  --rwl-primary-200: var(--lst-tint-2);
  --rwl-neutral-800: #222222;
  --rwl-neutral-500: #66645d;
  --rwl-neutral-300: #D7DCDF;
  --rwl-neutral-50: #f5f5f5;
  --rwl-white: #ffffff;
  --rwl-red: var(--lst-red);
  --rwl-font: 'RSC Jakarta', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --rwl-max-width: 1000px;
  --rwl-btn-gradient: linear-gradient(225deg, var(--lst-accent-2) 0%, var(--lst-accent) 100%);
}

/* --- Reset for section --- */
.lst__section {
  font-family: var(--rwl-font);
  color: var(--rwl-neutral-800);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Reading Progress Header --- */
.lst__top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}

.lst__reading-banner {
  background: var(--rwl-primary-light);
  text-align: center;
  padding: 12px 16px;
  /* Matched to the li05 masthead (.health-dscvry-nav-10.hf.lst): 26px / 800 and
     NO letter-spacing. The 2px tracking here came from the weight-loss fork —
     the reference declares none across any of its twelve rules, so it computes
     to normal. Family stays RSC Jakarta; only size, weight and tracking copied. */
  font-size: 26px;
  font-weight: 800;
  letter-spacing: normal;
  /* Uppercased in CSS rather than in the string, so the banner_label setting
     stays readable in the theme editor and any future masthead is capitalised
     without someone having to remember to type it that way. */
  text-transform: uppercase;
  color: var(--rwl-neutral-800);
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.lst__top-bar--collapsed .lst__reading-banner {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.lst__progress-track {
  background: var(--rwl-white);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
}

.lst__progress-track-inner {
  background: var(--rwl-primary-200);
  height: 10px;   /* li05's track is slimmer; kept at 10 for now — see notes */
  width: 100%;
  max-width: var(--rwl-max-width);
  border-radius: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Insets the fill from both ends. The 4px fill already sits 3px clear of the
     track top and bottom; without this it ran flush into the left cap and, at
     100%, the right one. The width percentage resolves against the content box,
     so the fill still reaches exactly this inset at full scroll. */
  padding: 0 3px;
}

/* Matches the li05 reference bar.

   NO TRANSITION, deliberately. The reference sets `transition: none !important`
   and it is the reason its bar feels welded to the scroll: width is already
   recomputed every animation frame, so easing it over another 100ms only makes
   the fill trail the thumb. An eased scroll indicator reads as lag, not polish.

   will-change: width promotes the element so those per-frame width changes do
   not force a fresh paint of the surrounding bar each time. */
.lst__progress-fill {
  background: var(--rwl-primary);
  height: 4px;
  width: 0%;
  border-radius: 999px;
  transition: none;
  will-change: width;
}







/* --- Content Wrapper --- */
.lst__content {
  max-width: var(--rwl-max-width);
  margin: 0 auto;
  /* Clears the FIXED top bar. 80px was less than the bar's own ~83px (banner
     12+12 padding + 24px label, then the 30px track), so the h1 sat behind it.
     The banner label is an editable setting and wraps on narrow screens, so this
     is a floor — quiz-002-lst001.js measures the bar and sets the real value. */
  padding: 118px 20px 40px;
}

/* --- Hero Section --- */
.lst__hero {
  margin-bottom: 48px;
}

.lst__hero h1 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.52;
  margin: 0 0 16px;
  color: var(--rwl-neutral-800);
}

.lst__highlight {
  color: var(--lst-highlight);
}

.lst__hero-subtitle {
  font-size: 15px;
  font-weight: 400; font-variation-settings: 'wght' 400;
  color: var(--rwl-neutral-800);
  margin: 0 0 16px;
  line-height: 1.47;
}

.lst__hero-body {
  font-size: 16px;
  line-height: 2;
  margin: 0 0 16px;
  color: var(--rwl-neutral-800);
}

.lst__hero-transition {
  font-size: 15px;
  margin: 0 0 16px;
  color: var(--rwl-neutral-800);
  line-height: 1.47;
}

/* --- Note Callout --- */
.lst__note {
  border-left: 3px solid var(--rwl-primary);
  background: var(--rwl-primary-light);
  padding: 16px 23px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.43;
}

/* --- Author Card --- */
.lst__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border: 1px solid var(--rwl-neutral-300);
  border-radius: 10px;
}

.lst__author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.lst__author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lst__author-name {
  font-size: 16px;
  font-weight: 600; font-variation-settings: 'wght' 600;
  color: var(--rwl-neutral-800);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

.lst__verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #dff4ff;
  color: #244cff;
  font-size: 12px;
  font-weight: 600; font-variation-settings: 'wght' 600;
  padding: 2px 8px;
  border-radius: 6px;
}

.lst__author-role {
  font-size: 14px;
  font-weight: 500; font-variation-settings: 'wght' 500;
  color: var(--rwl-neutral-500);
  line-height: 1.43;
}

/* --- Listicle Items --- */
.lst__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

.lst__item-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #000;
  line-height: 1.45;
}

.lst__item-img-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rwl-neutral-50);
  height: 256px;
}

.lst__item-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lst__item-body p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: var(--rwl-neutral-500);
}

/* Blank line between paragraphs, where the copy is split in the source PDF.
   `margin: 0` above collapsed them into one continuous block, so a deliberate
   break read as a plain wrap. 24px is exactly one line at 16px/1.5, so the gap
   is a real blank line rather than an arbitrary nudge. Only items 1, 6 and 8
   have a second paragraph today; this applies wherever one is added. */
.lst__item-body p + p {
  margin-top: 24px;
}

.lst__item-body strong {
  color: #000;
  font-weight: 600; font-variation-settings: 'wght' 600;
}

/* --- CTA Block --- */
.lst__cta-block {
  position: relative;
  background: var(--rwl-white);
  border-radius: 10px;
  box-shadow: 0px 10px 7.5px rgba(0, 0, 0, 0.1), 0px 4px 3px rgba(0, 0, 0, 0.1);
  overflow: visible;
  margin: 48px 0;
}

.lst__cta-sale-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rwl-primary);
  color: var(--rwl-white);
  font-size: 12px;
  font-weight: 700; font-variation-settings: 'wght' 700; -webkit-text-stroke: 0.3px currentColor;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 6px;
  z-index: 2;
  white-space: nowrap;
}

.lst__cta-inner {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}

.lst__cta-img-wrap {
  background: #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 42px 24px 0;
}

.lst__cta-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 280px;
}

.lst__cta-content {
  padding: 20px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.lst__cta-gift-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600; font-variation-settings: 'wght' 600;
  text-transform: uppercase;
  color: #2d3e2d;
}

.lst__cta-gift-line::before,
.lst__cta-gift-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e5e5;
  min-width: 38px;
}

.lst__cta-headline {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.14;
  margin: 0;
  color: var(--rwl-neutral-800);
}

/* --lst-highlight, NOT --rwl-primary. The accent is #352D44, a near-black used
   for dark backgrounds and borders; as TEXT on the white card it is
   indistinguishable from the rest of the headline, so "UP TO 40% OFF" lost its
   colour entirely. Same trap as .lst__highlight in the hero — these two are the
   only places --rwl-primary was used as a text colour. */
.lst__cta-headline .lst__purple {
  color: var(--lst-highlight);
}

.lst__cta-desc {
  font-size: 14px;
  line-height: 1.57;
  color: var(--rwl-neutral-500);
  margin: 0;
}

.lst__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--rwl-btn-gradient);
  color: var(--rwl-white);
  font-family: var(--rwl-font);
  font-size: 13px;
  font-weight: 600; font-variation-settings: 'wght' 600;
  border: none;
  border-radius: 10px;
  padding: 0 20px;
  height: 56px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: 100%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.lst__cta-btn:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.lst__cta-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lst__cta-sellout-wrap {
  background: var(--rwl-primary-light);
  border-radius: 5px;
  padding: 11px 20px;
  width: 100%;
}

.lst__cta-sellout {
  font-size: 13px;
  color: var(--rwl-neutral-500);
  margin: 0;
  text-align: center;
}

.lst__cta-sellout .lst__red {
  color: var(--rwl-red);
  font-weight: 700; font-variation-settings: 'wght' 700; -webkit-text-stroke: 0.3px currentColor;
}

.lst__cta-sellout strong {
  color: #000;
}

.lst__cta-guarantee {
  font-size: 12px;
  color: #000;
  margin: 0;
}

/* ==========================================================================
   Desktop (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {

  .lst__content {
    padding: 170px 24px 60px;
  }

  :root { --lst-top-gap: 48px; }

  /* --- Hero --- */
  .lst__hero h1 {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.22;
  }

  .lst__hero-subtitle {
    font-size: 18px;
    line-height: 1.56;
  }

  .lst__hero-body {
    font-size: 18px;
    line-height: 2.1;
  }

  .lst__hero-transition {
    font-size: 16px;
    line-height: 1.5;
  }

  .lst__note {
    font-size: 16px;
    line-height: 1.5;
  }

  .lst__author {
    max-width: 314px;
  }




  /* --- Listicle Items Desktop --- */
  .lst__item {
    display: grid;
    grid-template-columns: 480px 1fr;
    /* Five rows: slack, title, body, link, slack. The image is taller than the
       text, and that difference has to land in a flexible row. One 1fr at the
       end left the text top-aligned; an equal 1fr at each end splits the slack
       evenly, so the title/body/link block sits vertically centred against the
       image. The three content rows stay `auto` so they never stretch — the
       image spanning 1/-1 would otherwise inflate them and spread the text out. */
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 40px;
    row-gap: 16px;
    align-items: start;
    margin-bottom: 64px;
  }

  .lst__item-title {
    grid-column: 2;
    grid-row: 2;
    font-size: 32px;
    line-height: 1.375;
  }

  .lst__item-img-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    height: 400px;
  }

  .lst__item-body {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  /* Without this the link is the only unplaced child, so auto-placement drops it
     in the next free cell — column 1, under the image. It belongs under the body
     it follows in the source. */
  .lst__inline-link {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    align-self: start;
  }

  /* --- CTA Block Desktop --- */
  .lst__cta-inner {
    flex-direction: row;
  }

  .lst__cta-img-wrap {
    flex: 0 0 50%;
    padding: 40px 32px;
  }

  .lst__cta-img {
    max-height: 344px;
  }

  .lst__cta-content {
    flex: 1;
    padding: 40px 50px;
    justify-content: center;
    gap: 20px;
  }

  .lst__cta-gift-line::before,
  .lst__cta-gift-line::after {
    min-width: 78px;
  }

  .lst__cta-desc {
    max-width: 400px;
  }

  .lst__cta-btn {
    height: 56px;
    font-size: 16px;
    max-width: 400px;
  }

  .lst__cta-sellout-wrap {
    max-width: 400px;
  }
}


/* ── Image placeholders ────────────────────────────────────────────────────
   Shown until Marin's assets land. They carry the shot brief rather than being
   blank grey, so the page is reviewable now and whoever fills them in can see
   what each slot is for without going back to the thread.
   Delete nothing when the images arrive — an unset picker simply falls back
   here, so a missing asset degrades to a labelled box instead of a broken img. */
.lst__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: repeating-linear-gradient(
    45deg, var(--lst-tint), var(--lst-tint) 12px,
    #fff 12px, #fff 24px
  );
  border: 1px dashed var(--lst-tint-2);
  border-radius: 12px;
  color: var(--lst-muted);
  text-align: center;
  padding: 16px;
}
.lst__ph--wide { width: 100%; aspect-ratio: 6 / 5; }
.lst__ph--square { width: 100%; aspect-ratio: 1 / 1; }
.lst__ph--avatar {
  width: 48px; height: 48px; border-radius: 50%;
  padding: 0; font-size: 8px; flex: none;
}
.lst__ph-num {
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--lst-accent-2); letter-spacing: -0.02em;
}
.lst__ph-brief { font-size: 12px; line-height: 1.35; max-width: 30ch; }

/* Inline "See the workout that worked for me" link inside an item. */
.lst__inline-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700; font-variation-settings: 'wght' 700; -webkit-text-stroke: 0.3px currentColor;
  color: var(--lst-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Site chrome on this template ──────────────────────────────────────────
 *
 * lst001 is NO LONGER in theme.liquid's header-hiding conditions, because that
 * style (:228) also hides #shopify-section-announcement_bar_m8zXGk — it kills
 * the announcement bar along with the header, and this page wants the bar.
 *
 * So the header is hidden by the same selectors minus the announcement ones.
 * The footer stays suppressed in theme.liquid (:261), where it costs nothing to
 * render nothing.
 *
 * These rules are ALSO emitted inline in theme.liquid's <head>, in an
 * lst001-only block next to :228. That is the copy that actually prevents the
 * flash: this stylesheet is loaded from inside the section, which the browser
 * reaches only after it has already parsed and painted header-group. Keep both
 * in sync — this one still covers the page being rendered through any other
 * layout.
 */
#shopify-section-header,
.header-wrapper,
sticky-header,
.header-section,
.site-header,
#site-header,
.header {
  display: none !important;
}

/* The announcement bar is not sticky in the theme — it has no position rule at
   all. Pinning it here, above this page's own fixed bar. Height is measured in
   JS rather than assumed: the bar's copy is a theme setting and wraps. */
/* Matched by PREFIX, not by exact id. Shopify namespaces section-group ids as
   `shopify-section-sections--<id>__announcement_bar_m8zXGk`, so the literal
   `#shopify-section-announcement_bar_m8zXGk` matches nothing on a rendered page
   — which is why this bar was never actually pinned. theme.liquid hedges the
   same way, listing three selectors for the one element. */
/* NOT .utility-bar — base.css:2974 gives it `height: 100%`, so pinning it made
   it a full-screen overlay that covered the entire page. It is an inner element
   of the bar, not the section wrapper; only the wrapper gets positioned. */
[id^="shopify-section"][id*="announcement"],
.announcement-bar-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;   /* above .lst__top-bar's 40 */
}