/* FitnessPlus Pricing — GENERATED from dev/front.src.css by dev/build.py. Edit the source, not this file. */
/* FitnessPlus Pricing — front-end styles.
   SOURCE FILE. Run `python3 dev/build.py` to produce fitnessplus-pricing/assets/front.css
   (the build appends !important to every declaration so Elementor/theme styles can't leak in). */

.fpx-root {
  --fpx-ink: #000 !important;
  --fpx-paper: #fff !important;
  --fpx-board: rgba(6, 7, 8, 0.8) !important;
  --fpx-line: rgba(255, 255, 255, 0.14) !important;
  --fpx-muted: rgba(255, 255, 255, 0.68) !important;
  --fpx-ease: cubic-bezier(0.16, 1, 0.3, 1) !important;
  --fpx-display: "Oswald", "Arial Narrow", sans-serif !important;
  --fpx-italic: "Poppins", sans-serif !important;
  --fpx-body: "Raleway", "Helvetica Neue", Arial, sans-serif !important;

  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  padding: clamp(64px, 9vw, 128px) 16px !important;
  background-color: #050505 !important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.92) 100%),
    var(--fpx-bg, none) !important;
  background-size: cover !important;
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
  color: var(--fpx-paper) !important;
  font-family: var(--fpx-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.fpx-root.fpx-no-bg { background-image: none !important; background-color: #050505 !important; }

/* ---------- local reset: neutralise theme / Elementor kit styles ---------- */
.fpx-root *, .fpx-root *::before, .fpx-root *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  float: none !important;
  max-width: none !important;
  min-height: 0 !important;
}
.fpx-root p, .fpx-root h2 { font-size: inherit !important; line-height: inherit !important; color: inherit !important; font-weight: inherit !important; font-family: inherit !important; }
.fpx-root ul, .fpx-root ol, .fpx-root li { list-style: none !important; background: none !important; }
.fpx-root li::marker { content: "" !important; }
.fpx-root a { text-decoration: none !important; color: inherit !important; background: none !important; box-shadow: none !important; }
.fpx-root button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  line-height: inherit !important;
  text-align: inherit !important;
  white-space: normal !important;
}
.fpx-root svg { display: block !important; width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; flex: none !important; border: 0 !important; }
.fpx-root img { display: block !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: auto !important; }
.fpx-root ::selection { background: var(--fpx-paper) !important; color: var(--fpx-ink) !important; }
.fpx-root :focus { outline: none !important; }
.fpx-root :focus-visible { outline: 2px solid var(--fpx-paper) !important; outline-offset: 3px !important; }

/* ---------- layout ---------- */
.fpx-root .fpx-wrap { position: relative !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; }

.fpx-root .fpx-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 32px 48px !important;
  margin-bottom: 40px !important;
}
.fpx-root .fpx-title {
  font-family: var(--fpx-display) !important;
  font-weight: 600 !important;
  font-size: clamp(42px, 6.4vw, 84px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--fpx-paper) !important;
  text-wrap: balance !important;
  max-width: 11ch !important;
}
.fpx-root .fpx-title em {
  display: block !important;
  font-family: var(--fpx-italic) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  font-size: 0.62em !important;
  line-height: 1.15 !important;
  margin-top: 0.18em !important;
}
.fpx-root .fpx-lede {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--fpx-muted) !important;
  max-width: 38ch !important;
  margin-bottom: 20px !important;
}

/* centred head (home cards) */
.fpx-root .fpx-head--center { grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; text-align: center !important; gap: 0 !important; margin-bottom: 44px !important; }
.fpx-root .fpx-head--center .fpx-title { max-width: 16ch !important; }
.fpx-root .fpx-head--center .fpx-lede { margin: 18px auto 0 !important; text-align: center !important; }
.fpx-root .fpx-head--center .fpx-tabs { margin-top: 28px !important; }

/* ---------- tabs ---------- */
.fpx-root .fpx-tabs {
  position: relative !important;
  display: inline-grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.55) !important;
}
.fpx-root .fpx-tabs__ind {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  left: 4px !important;
  width: calc((100% - 8px) / var(--fpx-tabs, 2)) !important;
  border-radius: 999px !important;
  background: var(--fpx-paper) !important;
  transform: translateX(var(--fpx-x, 0%)) !important;
  transition: transform 0.5s var(--fpx-ease) !important;
  pointer-events: none !important;
}
.fpx-root .fpx-tab {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 26px !important;
  border-radius: 999px !important;
  font-family: var(--fpx-display) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  color: var(--fpx-paper) !important;
  text-align: center !important;
  white-space: nowrap !important;
  transition: color 0.35s var(--fpx-ease) !important;
}
.fpx-root .fpx-tab:hover, .fpx-root .fpx-tab:focus { background: transparent !important; color: var(--fpx-paper) !important; }
.fpx-root .fpx-tab svg { width: 15px !important; height: 15px !important; stroke-width: 1.8 !important; }
.fpx-root .fpx-tab[aria-selected="true"], .fpx-root .fpx-tab[aria-selected="true"]:hover, .fpx-root .fpx-tab[aria-selected="true"]:focus { color: var(--fpx-ink) !important; }
.fpx-root .fpx-tab[aria-selected="false"]:hover { color: rgba(255,255,255,0.75) !important; }

/* ---------- board (membership page) ---------- */
.fpx-root .fpx-panel[hidden] { display: none !important; }
.fpx-root .fpx-board {
  border-radius: 14px !important;
  background: var(--fpx-board) !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7) !important;
  overflow: hidden !important;
}
.fpx-root .fpx-cols,
.fpx-root .fpx-main {
  display: grid !important;
  grid-template-columns: 150px minmax(190px, 1.15fr) minmax(130px, 0.75fr) minmax(210px, 1fr) 168px !important;
  align-items: center !important;
  column-gap: 28px !important;
  padding: 0 32px !important;
}
.fpx-root.fpx-no-pm .fpx-cols,
.fpx-root.fpx-no-pm .fpx-main { grid-template-columns: 150px minmax(190px, 1.3fr) minmax(210px, 1fr) 168px !important; }
.fpx-root.fpx-no-pm .fpx-cols span:nth-child(3) { display: none !important; }
.fpx-root .fpx-cols {
  padding-top: 18px !important;
  padding-bottom: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--fpx-muted) !important;
  border-bottom: 1px solid var(--fpx-line) !important;
}
.fpx-root .fpx-cols span { letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.fpx-root .fpx-row { position: relative !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--fpx-line) !important; }
.fpx-root .fpx-row:last-child { border-bottom: 0 !important; }
.fpx-root .fpx-main { min-height: 116px !important; padding-top: 22px !important; padding-bottom: 22px !important; }

.fpx-root .fpx-dur { display: flex !important; align-items: baseline !important; gap: 10px !important; flex-wrap: wrap !important; }
.fpx-root .fpx-dur__n {
  font-family: var(--fpx-display) !important;
  font-weight: 500 !important;
  font-size: 64px !important;
  line-height: 0.85 !important;
  font-variant-numeric: tabular-nums !important;
}
.fpx-root .fpx-dur__n--word { font-size: 34px !important; line-height: 1 !important; text-transform: uppercase !important; }
.fpx-root .fpx-dur__u {
  font-family: var(--fpx-italic) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
.fpx-root .fpx-price { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.fpx-root .fpx-amt {
  font-family: var(--fpx-display) !important;
  font-weight: 400 !important;
  font-size: 42px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
.fpx-root .fpx-amt small { font-size: 0.5em !important; margin-right: 4px !important; vertical-align: 0.62em !important; letter-spacing: 0.02em !important; }
.fpx-root .fpx-alt { font-size: 14px !important; line-height: 1.3 !important; color: var(--fpx-muted) !important; }
.fpx-root .fpx-alt b { font-weight: 600 !important; color: var(--fpx-paper) !important; font-variant-numeric: tabular-nums !important; }

.fpx-root .fpx-pm { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.fpx-root .fpx-pm__k { display: none !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--fpx-muted) !important; }
.fpx-root .fpx-pm__v { font-family: var(--fpx-display) !important; font-size: 22px !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; }
.fpx-root .fpx-pm__v small { font-family: var(--fpx-body) !important; font-size: 13px !important; color: var(--fpx-muted) !important; margin-left: 3px !important; }

/* inclusions toggle */
.fpx-root .fpx-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px 10px 16px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-family: var(--fpx-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: var(--fpx-paper) !important;
  transition: background-color 0.3s var(--fpx-ease), border-color 0.3s var(--fpx-ease), color 0.3s var(--fpx-ease) !important;
}
.fpx-root .fpx-toggle:hover, .fpx-root .fpx-toggle:focus { border-color: var(--fpx-paper) !important; background: rgba(255,255,255,0.08) !important; color: var(--fpx-paper) !important; }
.fpx-root .fpx-count {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--fpx-paper) !important;
  color: var(--fpx-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.fpx-root .fpx-toggle svg { width: 16px !important; height: 16px !important; stroke-width: 2 !important; transition: transform 0.45s var(--fpx-ease) !important; }
.fpx-root .fpx-toggle[aria-expanded="true"] svg { transform: rotate(180deg) !important; }
.fpx-root .fpx-note { font-size: 14px !important; line-height: 1.4 !important; color: var(--fpx-muted) !important; max-width: 26ch !important; }

/* buy */
.fpx-root .fpx-buy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
  background: var(--fpx-paper) !important;
  color: var(--fpx-ink) !important;
  font-family: var(--fpx-display) !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-color 0.3s var(--fpx-ease), color 0.3s var(--fpx-ease), box-shadow 0.3s var(--fpx-ease) !important;
}
.fpx-root .fpx-buy span { letter-spacing: 0.02em !important; text-transform: uppercase !important; }
.fpx-root .fpx-buy svg { width: 16px !important; height: 16px !important; stroke-width: 2.2 !important; transition: transform 0.4s var(--fpx-ease) !important; }
.fpx-root .fpx-buy:hover, .fpx-root .fpx-buy:focus { background: var(--fpx-paper) !important; box-shadow: 0 10px 24px -8px rgba(255,255,255,0.45) !important; color: var(--fpx-ink) !important; }
.fpx-root .fpx-buy:hover svg { transform: translateX(4px) !important; }

/* drawer */
.fpx-root .fpx-drawer {
  display: grid !important;
  grid-template-rows: 0fr !important;
  visibility: hidden !important;
  transition: grid-template-rows 0.5s var(--fpx-ease), visibility 0s linear 0.5s !important;
}
.fpx-root .fpx-row.is-open .fpx-drawer { grid-template-rows: 1fr !important; visibility: visible !important; transition: grid-template-rows 0.5s var(--fpx-ease), visibility 0s linear 0s !important; }
.fpx-root .fpx-drawer__in { overflow: hidden !important; }
.fpx-root .fpx-feats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px 28px !important;
  margin: 0 32px 28px calc(32px + 150px + 28px) !important;
  padding-top: 22px !important;
  border-top: 1px dashed var(--fpx-line) !important;
}
.fpx-root .fpx-feats li { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 500 !important; }
.fpx-root .fpx-feats svg {
  width: 24px !important;
  height: 24px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: var(--fpx-paper) !important;
  color: var(--fpx-ink) !important;
  stroke-width: 2.6 !important;
}

/* best value: inverted */
.fpx-root .fpx-row.is-best { background: var(--fpx-paper) !important; color: var(--fpx-ink) !important; border-bottom-color: transparent !important; }
.fpx-root .fpx-row.is-best ::selection { background: var(--fpx-ink) !important; color: var(--fpx-paper) !important; }
.fpx-root .fpx-row.is-best :focus-visible { outline-color: var(--fpx-ink) !important; }
.fpx-root .fpx-row.is-best .fpx-alt,
.fpx-root .fpx-row.is-best .fpx-note,
.fpx-root .fpx-row.is-best .fpx-pm__v small,
.fpx-root .fpx-row.is-best .fpx-pm__k { color: rgba(0,0,0,0.64) !important; }
.fpx-root .fpx-row.is-best .fpx-alt b { color: var(--fpx-ink) !important; }
.fpx-root .fpx-row.is-best .fpx-toggle { color: var(--fpx-ink) !important; border-color: rgba(0,0,0,0.35) !important; }
.fpx-root .fpx-row.is-best .fpx-toggle:hover, .fpx-root .fpx-row.is-best .fpx-toggle:focus { color: var(--fpx-ink) !important; border-color: var(--fpx-ink) !important; background: rgba(0,0,0,0.06) !important; }
.fpx-root .fpx-row.is-best .fpx-count { background: var(--fpx-ink) !important; color: var(--fpx-paper) !important; }
.fpx-root .fpx-row.is-best .fpx-buy, .fpx-root .fpx-row.is-best .fpx-buy:hover, .fpx-root .fpx-row.is-best .fpx-buy:focus { background: var(--fpx-ink) !important; color: var(--fpx-paper) !important; }
.fpx-root .fpx-row.is-best .fpx-buy:hover { box-shadow: 0 10px 24px -8px rgba(0,0,0,0.55) !important; }
.fpx-root .fpx-row.is-best .fpx-feats { border-top-color: rgba(0,0,0,0.18) !important; }
.fpx-root .fpx-row.is-best .fpx-feats svg { background: var(--fpx-ink) !important; color: var(--fpx-paper) !important; }
.fpx-root .fpx-tag {
  display: inline-block !important;
  padding: 5px 9px 4px !important;
  border-radius: 4px !important;
  background: var(--fpx-ink) !important;
  color: var(--fpx-paper) !important;
  font-family: var(--fpx-body) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.fpx-root .fpx-foot {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 10px 24px !important;
  margin-top: 22px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--fpx-muted) !important;
}
.fpx-root .fpx-foot a { white-space: nowrap !important; color: var(--fpx-paper) !important; font-weight: 600 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
.fpx-root .fpx-foot a:hover { text-decoration-thickness: 2px !important; color: var(--fpx-paper) !important; }

/* ---------- cards (home page) ---------- */
.fpx-root .fpx-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fpx-root .fpx-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 260px !important;
  max-width: 360px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--fpx-board) !important;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.75) !important;
  text-align: center !important;
  overflow: hidden !important;
  transition: transform 0.5s var(--fpx-ease), box-shadow 0.5s var(--fpx-ease) !important;
}
.fpx-root .fpx-card:hover { transform: translateY(-4px) !important; box-shadow: 0 40px 80px -24px rgba(0,0,0,0.85) !important; }
.fpx-root .fpx-card__brand {
  display: flex !important;
  justify-content: center !important;
  padding: 24px 24px 22px !important;
  border-bottom: 1px solid var(--fpx-line) !important;
}
.fpx-root .fpx-card__brand img { width: auto !important; height: 52px !important; }
.fpx-root .fpx-card.is-best .fpx-card__brand { border-bottom-color: rgba(0,0,0,0.14) !important; }
.fpx-root .fpx-card.is-best .fpx-card__brand img { filter: invert(1) !important; }
.fpx-root .fpx-card__tag { position: absolute !important; top: 14px !important; right: 14px !important; }
.fpx-root .fpx-card__body { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 30px 24px 0 !important; }
.fpx-root .fpx-card__dur {
  font-family: var(--fpx-italic) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 26px !important;
  line-height: 1.1 !important;
}
.fpx-root .fpx-card__amt { font-size: 60px !important; }
.fpx-root .fpx-card__pm {
  margin-top: 10px !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.09) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: var(--fpx-muted) !important;
}
.fpx-root .fpx-card__pm b { font-family: var(--fpx-display) !important; font-weight: 500 !important; font-size: 15px !important; color: var(--fpx-paper) !important; margin-left: 4px !important; font-variant-numeric: tabular-nums !important; }
.fpx-root .fpx-card__pm.is-ghost { visibility: hidden !important; }
.fpx-root .fpx-card.is-best .fpx-card__pm { background: rgba(0,0,0,0.07) !important; color: rgba(0,0,0,0.64) !important; }
.fpx-root .fpx-card.is-best .fpx-card__pm b { color: var(--fpx-ink) !important; }
.fpx-root .fpx-card__inc { display: flex !important; justify-content: center !important; padding: 22px 24px 0 !important; }
.fpx-root .fpx-card__inc .fpx-note { max-width: 24ch !important; text-align: center !important; }
.fpx-root .fpx-card .fpx-feats { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin: 18px 24px 0 !important; padding-top: 18px !important; text-align: left !important; }
.fpx-root .fpx-card__cta { margin-top: auto !important; padding: 26px 24px 24px !important; }

.fpx-root .fpx-more { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; margin-top: 48px !important; text-align: center !important; }
.fpx-root .fpx-more p { font-family: var(--fpx-italic) !important; font-style: italic !important; font-weight: 300 !important; font-size: 20px !important; line-height: 1.3 !important; }
.fpx-root .fpx-ghost {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 26px !important;
  border: 1px solid var(--fpx-paper) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--fpx-paper) !important;
  font-family: var(--fpx-display) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.3s var(--fpx-ease), color 0.3s var(--fpx-ease) !important;
}
.fpx-root .fpx-ghost span { letter-spacing: 0.04em !important; text-transform: uppercase !important; }
.fpx-root .fpx-ghost svg { width: 16px !important; height: 16px !important; stroke-width: 2.2 !important; transition: transform 0.4s var(--fpx-ease) !important; }
.fpx-root .fpx-ghost:hover, .fpx-root .fpx-ghost:focus { background: var(--fpx-paper) !important; color: var(--fpx-ink) !important; }
.fpx-root .fpx-ghost:hover svg { transform: translateX(4px) !important; }

/* tab-switch entrance: the one authored moment */
.fpx-root .fpx-panel.is-entering .fpx-row { animation: fpx-rise 0.7s var(--fpx-ease) both !important; animation-delay: calc(var(--i, 0) * 55ms) !important; }
@keyframes fpx-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .fpx-root .fpx-cols,
  .fpx-root .fpx-main { grid-template-columns: 120px minmax(170px, 1fr) minmax(110px, 0.7fr) minmax(190px, 1fr) 150px !important; column-gap: 20px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .fpx-root.fpx-no-pm .fpx-cols,
  .fpx-root.fpx-no-pm .fpx-main { grid-template-columns: 120px minmax(170px, 1.2fr) minmax(190px, 1fr) 150px !important; }
  .fpx-root .fpx-dur__n { font-size: 54px !important; }
  .fpx-root .fpx-amt { font-size: 36px !important; }
  .fpx-root .fpx-card__amt { font-size: 54px !important; }
  .fpx-root .fpx-feats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-left: calc(24px + 120px + 20px) !important; margin-right: 24px !important; }
}

/* ---------- stacked (tablet portrait & phone) ---------- */
@media (max-width: 880px) {
  .fpx-root .fpx-head { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; margin-bottom: 28px !important; }
  .fpx-root .fpx-head--center { gap: 0 !important; margin-bottom: 32px !important; }
  .fpx-root .fpx-lede { margin-bottom: 18px !important; }
  .fpx-root .fpx-tabs { display: grid !important; width: 100% !important; }
  .fpx-root .fpx-head--center .fpx-tabs { max-width: 480px !important; }
  .fpx-root .fpx-tab { padding: 13px 12px !important; font-size: 16px !important; white-space: normal !important; }
  .fpx-root .fpx-cols { display: none !important; }
  .fpx-root .fpx-main,
  .fpx-root.fpx-no-pm .fpx-main {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "dur price" "pm pm" "inc buy" !important;
    row-gap: 18px !important;
    column-gap: 16px !important;
    padding: 22px 20px !important;
    min-height: 0 !important;
  }
  .fpx-root .fpx-dur { grid-area: dur !important; align-self: start !important; }
  .fpx-root .fpx-price { grid-area: price !important; align-items: flex-end !important; text-align: right !important; }
  .fpx-root .fpx-pm { grid-area: pm !important; flex-direction: row !important; align-items: baseline !important; gap: 8px !important; }
  .fpx-root .fpx-pm__k { display: inline !important; }
  .fpx-root .fpx-pm__v { font-size: 18px !important; }
  .fpx-root .fpx-inc { grid-area: inc !important; }
  .fpx-root .fpx-main .fpx-buy { grid-area: buy !important; width: auto !important; padding: 13px 20px !important; font-size: 17px !important; }
  .fpx-root .fpx-dur__n { font-size: 52px !important; }
  .fpx-root .fpx-amt { font-size: 34px !important; }
  .fpx-root .fpx-feats { grid-template-columns: 1fr 1fr !important; margin: 0 20px 24px !important; padding-top: 18px !important; }
  .fpx-root .fpx-card .fpx-feats { grid-template-columns: minmax(0, 1fr) !important; margin: 18px 20px 0 !important; }
  .fpx-root .fpx-card__amt { font-size: 52px !important; }
  .fpx-root .fpx-more { margin-top: 36px !important; }
}
@media (max-width: 600px) {
  .fpx-root .fpx-card { flex-basis: 100% !important; max-width: 440px !important; }
}
@media (max-width: 520px) {
  .fpx-root .fpx-main,
  .fpx-root.fpx-no-pm .fpx-main { grid-template-areas: "dur price" "pm pm" "inc inc" "buy buy" !important; }
  .fpx-root .fpx-main .fpx-toggle { width: 100% !important; justify-content: space-between !important; }
  .fpx-root .fpx-main .fpx-buy { width: 100% !important; }
  .fpx-root .fpx-dur { flex-direction: column !important; gap: 4px !important; }
  .fpx-root .fpx-dur__n { font-size: 48px !important; }
  .fpx-root .fpx-dur__u { font-size: 17px !important; }
  .fpx-root .fpx-amt { font-size: 31px !important; }
  .fpx-root .fpx-card__amt { font-size: 50px !important; }
  .fpx-root .fpx-tab svg { display: none !important; }
  .fpx-root .fpx-feats { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fpx-root .fpx-note { max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fpx-root.fpx-root *, .fpx-root.fpx-root *::before, .fpx-root.fpx-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}