@charset "UTF-8";
/* =========================================================
   First-time Guest Page — LAVA Hot Wellness Singapore (CQ)
   Image-stacked build: sequential 01_ ... 28_ assets, base
   design width 750px. Fluid on mobile, letterboxed on PC.
   ========================================================= */

.ftWrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0 0 26px 0;
  overflow: hidden;
}

/* PC表示限定：画像スタック全体の横幅を約100px狭める（750px→650px）
   .content自体は中央寄せ用の見えない外枠（1024px）で背景・枠線がなく、
   幅を変えても見た目は変わらないため、実際に画面に見える .ftWrapper の方を狭める */
@media screen and (min-width: 761px) {
  .ftWrapper {
    max-width: 500px;
  }
}

.ftImg {
  display: block;
  width: 100%;
  height: auto;
}

.ftImg--narrow {
  margin: 0 auto;
}

.ftLink {
  display: block;
}

.ftLink .ftImg {
  transition: filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ftLink:hover .ftImg {
    filter: brightness(1.15) saturate(0.9);
  }
}

/* Blank-image replacements: same height ratio as the original
   assets they replace, scaling fluidly with wrapper width. */
.ftSpacer {
  display: block;
  width: 100%;
}
.ftSpacer--05 { aspect-ratio: 750 / 47; }
.ftSpacer--09 { aspect-ratio: 750 / 96; }
.ftSpacer--19 { aspect-ratio: 750 / 42; }
.ftSpacer--21 { aspect-ratio: 750 / 107; }

.ftMap {
  width: 100%;
  line-height: 0;
}
.ftMap iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 750 / 400;
  border: 0;
}

/* Floating CTA button (floating_book_trial_pill.webp)
   画面幅いっぱい・マージン/パディングなしで画面の真下に固定。
   白＋黄色の背景は CSS で横長に伸ばし、赤ボタン（画像）は幅を別途指定。 */
.floatBtn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  display: none;
  z-index: 9999;
  background: #fff;
  border-top: 5px solid #ffcd00;
  box-sizing: border-box;
  padding: 14px 4%;
  text-align: center;
}
/* PC表示限定：ボタンをコンテンツと同じ横幅（.ftWrapper の650px）に合わせる */
@media screen and (min-width: 761px) {
  .floatBtn {
    padding: 18px 4%;
  }
}

#first-time-contents .content {
  padding: 0;
  margin-bottom: 0;
}
/* PC表示時の #ft-about（LAVAについて）上部の余白をこのページのみ調整
   共通CSS(modules_260928.css)の padding:120px 0; を上書きし、
   ft_about_img.jpgを非表示にした分、ft_about_logo.svgの上に少しだけ余白を残す */
#ft-about {
  padding-top: 40px;
}

/* PC表示限定：共通CSSの白→グレーのグラデーションは
   ft_about_img.jpg の高さ分を白にする前提だったため、
   画像を消したこのページでは 24_final_cta.webp の直下から
   グレーが始まるようにグラデーションを解除して単色のグレーにする
   （SPは元々グラデーションがないため、PCのみに限定） */
@media screen and (min-width: 761px) {
  #ft-about {
    background: #f5f5f5;
  }
}

/* 24_final_cta.webp と #ft-about の間の余白をこのページのみ完全に削除
   共通CSS(modules_260928.css)の .mainArea > article { margin-bottom: 120px/60px; }
   をID指定で打ち消す（#ft-about側のpadding-topだけでは消えなかった分） */
#first-time-contents {
  margin-bottom: 0;
}

/* 「LAVAについて」ブロックの ft_about_img.jpg をこのページのみ非表示にする。
   この CSS ファイルは first-time ページにしか読み込まれないため、
   他ページで共有している #ft-about（about_lava_261001.php）には影響しない。 */
.ft-about-img {
  display: none;
}

/* =========================================================
   Programs cards (static list, no swipe/scroll)
   Previously a horizontal swipe carousel with looping clones; now
   all three cards are shown stacked with no scrolling so visitors
   can't swipe through an endless loop. "ftWrapper" tops out at
   500px even on PC, so a 3-up row would squeeze each card too
   narrow to read -- stacked is kept at both breakpoints.
   ========================================================= */
/* 見出し画像(07_programs_head.webp)・下部リンク画像(08_link_programs_page.webp)の
   背景色（#F5F3F1）に合わせ、カードの一帯にも同じグレーを敷いて
   「同じセクション」であることが一目で分かるようにする */
.programCarousel {
  margin: 0 auto;
  background: #F5F3F1;
  padding: 14px 0 18px;
}

.programTabs {
  display: flex;
  gap: 2%;
  margin: 0 0 20px;
  padding: 0 5%;
}

/* タブの文字・ボタン自体が大きすぎたため縮小。
   ビューポート幅に比例する vw 指定だと幅広い端末で大きくなりすぎるため、
   サイト共通の小型ボタン(a.btn-s)と同じ 14px の固定サイズにする。
   背景がグレーになった分、非選択タブは白地にして
   ピル形状がグレーの地に埋もれないようにする */
.programTab {
  flex: 1 1 0;
  appearance: none;
  border: none;
  background: #fff;
  color: #666;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  padding: 10px 4px;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.programTab.is-active {
  color: #fff;
  background: #EE8A00;
}

.programTab:focus-visible {
  outline: 2px solid #EE8A00;
  outline-offset: 2px;
}

/* 中央のカードをフル表示し、左右両端に隣接カードが少し覗く
   「センター型」カルーセル。padding左右＝(100-76)/2=12% を
   トラックに持たせることで、1枚目・最終枚もセンタリング可能にする。
   クローンスライドは廃止したので、先頭・最終枚ではスクロールが
   自然に止まり、無限ループはしない。 */
.programTrack {
  display: flex;
  align-items: stretch;
  gap: 4%;
  padding: 0 12%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.programTrack::-webkit-scrollbar {
  display: none;
}

/* 76%幅＝中央配置時に左右各8%ぶん隣接カードが覗く */
.programSlide {
  flex: 0 0 76%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.programSlide .ftImg {
  width: 100%;
  height: auto;
}

/* =========================================================
   Program cards (replaces 07_programs_card1/2/3.webp artwork)
   Fixed min-heights on the description / Benefits / Best For
   blocks keep the Intensity box and the Recommended First Class
   row lined up at the same vertical position across all 3 cards.
   ========================================================= */
.programCard {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.12) 0 2px 12px 0;
}

.programCardPhoto {
  position: relative;
}

.programCardPhoto::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #B71B22, #E05811 35%, #F18D02 50%, #E05811 65%, #B71B22);
}

.programCardPhoto .ftImg {
  width: 100%;
  height: auto;
  display: block;
}

.programCardBody {
  padding: 20px 18px 22px;
}

.programCardTitle {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #D96A1A;
}

.programCardDesc {
  margin: 0 0 16px;
  min-height: 190px;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.programCardStats {
  display: flex;
  gap: 4%;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #F5F3F1;
  border-radius: 10px;
}

.programStat {
  flex: 1 1 0;
}

.programStatLabel {
  display: block;
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
}

.programStatValue {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #333;
}

.programStatValue--intensity {
  color: #BB1B21;
}

.programCardSubhead {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #D96A1A;
}

.programCardText {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #444;
}

.programCardText--benefits {
  min-height: 165px;
}

.programCardText--bestfor {
  min-height: 165px;
  margin-bottom: 0;
}

.programCardDivider {
  margin: 16px 0;
  border-top: 1px dashed #ddd;
}

.programCardRecTitle {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: #D96A1A;
}

.programPills {
  display: flex;
  align-items: stretch;
  gap: 2.5%;
}

.programPill {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 86px;
  padding: 8px 4px;
  border: 1px solid #e2ddd6;
  border-radius: 10px;
  text-align: center;
}

.programPillName {
  font-size: 11.5px;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
}

.programPillSub {
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}

.programPillRating {
  font-size: 12.5px;
  font-weight: 700;
  color: #BB1B21;
}

@media screen and (min-width: 761px) {
  .programCardDesc {
    min-height: 170px;
  }
  .programCardText--benefits {
    min-height: 140px;
  }
  .programCardText--bestfor {
    min-height: 165px;
  }
}

/* PCでも横スワイプのピーク型カルーセルをそのまま使う（3カラム静止表示にはしない）。
   このサイトはPCでも幅を650px程度に絞った「レターボックス」設計のため、
   カルーセルもモバイルと同じ中央ピーク表示＋タブ切替をそのまま流用する。 */

/* =========================================================
   Accordion (How It Works / Before Your First Visit)
   見出し画像そのものをボタン化し、タイトル文字の右側に矢印
   アイコンを重ねて配置。閉時は下向き、開時は上向きに回転する。
   ========================================================= */
/* ----- How It Works / Before Your First Visit: 項目別カード型アコーディオン -----
   旧: セクション全体が1枚の画像で、開閉もセクション単位だった。
   新: 項目(ステップ/リスト)ごとに白いカードを並べ、各カードが独立して
   開閉する。トグルの土台(.ftAccordionToggle / .ftAccordionBody)は
   既存のJSロジック(クリックでaria-expanded切替 + max-height制御)を
   そのまま流用し、見た目だけをカード仕様に作り替える。
   PCでも強制展開にせず、モバイルと同じようにクリックで開閉できる
   ようにする（PC常時展開の上書きは廃止）。 */
.ftStepSection {
  padding: 36px 6% 10px;
}

.ftListSection {
  padding: 36px 6% 32px;
  background: #F5F3F1;
}

.ftSectionHeading {
  margin: 0 0 24px;
  padding-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  color: #222;
  text-align: center;
  background: url(/common/images/h_style01_bg.svg) no-repeat center bottom / 100px auto;
}

.ftStepCard,
.ftListCard {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: rgba(100, 100, 111, 0.1) 0 2px 10px 0;
  margin: 0 0 12px;
  overflow: hidden;
}

.ftAccordion {
  position: relative;
}

.ftAccordionToggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ftStepBadge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #EE8A00;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.ftStepTitle {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
}

.ftListTitle {
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #EE8A00;
}

/* トグル右端のアイコンは「＋/−」表記。開閉状態は縦棒の
   表示・非表示だけで切り替え、位置がずれないようにする */
.ftAccordionIcon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.ftAccordionIcon::before,
.ftAccordionIcon::after {
  content: "";
  position: absolute;
  background: #EE8A00;
  transition: opacity 0.2s ease;
}

.ftAccordionIcon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.ftAccordionIcon::after {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.ftAccordionToggle[aria-expanded="true"] .ftAccordionIcon::after {
  opacity: 0;
}

.ftAccordionBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.ftAccordionBodyInner {
  padding: 6px 16px 16px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #555;
}

.ftStepCard .ftAccordionBodyInner {
  padding-left: 58px;
}

.ftStepNote {
  margin: 20px 0 32px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #D96A1A;
  text-align: center;
}

.ftCheckList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftCheckList li {
  position: relative;
  padding: 0 0 10px 26px;
}

.ftCheckList li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: -1px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #EE8A00;
  border-radius: 4px;
  color: #EE8A00;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.ftListCallout {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: #FBEFD9;
  border-left: 3px solid #EE8A00;
  border-radius: 8px;
}

.ftListCallout strong {
  display: block;
  margin: 0 0 4px;
  color: #333;
  font-size: 13.5px;
}

.ftListCallout p {
  margin: 0;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
}

/* =========================================================
   November Joining Perks (new section, Programs → How It Works)
   ========================================================= */
.ftPerksSection {
  padding: 48px 6% 40px;
  background: #FFF8EC;
  text-align: center;
}

.ftPerksBadge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 16px;
  background: #EE8A00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

.ftPerksHeading {
  margin: 0 0 10px;
  padding-bottom: 20px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  background: url(/common/images/h_style01_bg.svg) no-repeat center bottom / 100px auto;
}

.ftPerksSubtext {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
}

.ftPerksCard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: rgba(100, 100, 111, 0.1) 0 2px 10px 0;
  padding: 18px 16px;
  margin: 0 0 14px;
}

.ftPerksNum {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: #EE8A00;
}

.ftPerksCardBody {
  flex: 1 1 auto;
}

.ftPerksCardTitle {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: #D96A1A;
}

.ftPerksCardText {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #555;
}

.ftPerksPlanBlock {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #FDF2D9;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #555;
}

.ftPerksPlanBlock + .ftPerksPlanBlock {
  margin-top: 6px;
}

.ftPerksPlanBlock strong {
  color: #222;
  font-weight: 700;
}

.ftPerksNote {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: #888;
  font-style: italic;
}

.ftPerksTag {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 10px;
  background: #FBEAEA;
  color: #C0392B;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
}

.ftPerksFooter {
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #888;
}

.ftPerksClosing {
  margin: 18px 0;
  font-size: 17px;
  font-weight: 700;
  color: #222;
}

/* =========================================================
   Shared CTA button + sub-line (Hero / Final CTA)
   Brand red sampled from the original booking-button artwork.
   ========================================================= */
.ftCtaBlock {
  text-align: center;
}

.ftCtaBtn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 15px 38px;
  background: #BB1B21;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ftCtaBtn:hover {
    background: #9c161b;
  }
}

.ftCtaSub {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #777;
}

/* =========================================================
   WhatsApp text button (replaces 03_btn_whatsapp.webp artwork)
   Outline colour sampled from the original button artwork.
   ========================================================= */
.ftWhatsSection {
  padding: 0 7% 24px;
  background: #fff;
}

.ftBookDirectBox {
  margin: 28px 7% 0;
  padding: 24px 20px 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  text-align: center;
}

.ftBookDirectText {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.ftBookDirectBox .ftWhatsBtn {
  width: 100%;
}

.ftWhatsBtn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 38px;
  background: #fff;
  border: 2px solid #D96A1A;
  color: #D96A1A;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.ftProgramsSection {
  background: #F5F3F1;
  padding-bottom: 48px;
}

.ftProgramsHeading {
  padding: 36px 7% 0;
}

.ftProgramsSubtext {
  margin: 0;
  padding: 0 4%;
  font-size: 15px;
  line-height: 1.75;
  color: #555;
  text-align: center;
}

.ftAccessSection {
  padding: 36px 7% 0;
  background: #fff;
}

.ftAccessList {
  margin: 0;
  padding: 0 0 28px;
}

.ftAccessList dt {
  margin: 20px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #D96A1A;
}

.ftAccessList dt:first-child {
  margin-top: 0;
}

.ftAccessList dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #444;
}

.ftWhatsNumberBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
  padding: 12px 28px;
  background: #fff;
  border: 2px solid #D96A1A;
  color: #D96A1A;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.ftWhatsNumberBtn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Overrides a shared/common stylesheet's "a:visited { color: inherit; }"
   (which otherwise leaves this button's text black once clicked), scoped
   to just this button so other pages using that shared rule are unaffected. */
.ftWhatsNumberBtn:visited {
  color: #D96A1A;
}

@media (hover: hover) and (pointer: fine) {
  .ftWhatsNumberBtn:hover,
  .ftWhatsNumberBtn:visited:hover {
    background: #D96A1A;
    color: #fff;
  }
}

.ftProgramsLink {
  display: block;
  margin: 0;
  padding: 0 7%;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  text-align: center;
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .ftProgramsLink:hover {
    color: #BB1B21;
  }
}

.ftWhatsBtn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Overrides a shared/common stylesheet's "a:visited { color: inherit; }"
   (which otherwise leaves this button's text black once clicked), scoped
   to just this button so other pages using that shared rule are unaffected. */
.ftWhatsBtn:visited {
  color: #D96A1A;
}

@media (hover: hover) and (pointer: fine) {
  .ftWhatsBtn:hover,
  .ftWhatsBtn:visited:hover {
    background: #D96A1A;
    color: #fff;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.ftHeroBody {
  padding: 28px 7% 36px;
  background: #fff;
}

.ftHeroEyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #D96A1A;
}

.ftHeroHeading {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
}

.ftHeroHeading-dark {
  display: block;
  color: #2B2B2B;
}

.ftHeroHeading-accent {
  display: block;
  color: #D96A1A;
}

.ftHeroText {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #555;
}

/* =========================================================
   About
   ========================================================= */
.ftAboutSection {
  padding: 36px 7% 32px;
  background: #fff;
}

.ftAboutPhoto {
  margin: 0 0 22px;
}

.ftAboutText {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.85;
  color: #444;
}

.ftAboutText:last-child {
  margin-bottom: 0;
}

/* Larger variant of .ftSectionHeading for primary content headings
   (About / Book Trial), reusing its margin + gradient-bar treatment. */
.ftSectionHeading--lg {
  font-size: 25px;
  line-height: 1.4;
}

/* =========================================================
   Book Trial heading block (Mindbody widget itself is untouched)
   ========================================================= */
.ftBookHeading {
  padding: 36px 7% 0;
  background: #fff;
}

.ftBookText {
  margin: 0 0 28px;
  padding: 0 7%;
  font-size: 15px;
  line-height: 1.85;
  color: #444;
  text-align: center;
  background: #fff;
}

.ftBookCallout {
  margin: 0 7% 30px;
  padding: 22px 22px;
  background: #F5F3F1;
  border-top: 4px solid #F2A300;
  border-radius: 0 0 12px 12px;
}

.ftBookCalloutTitle {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

/* =========================================================
   Final CTA
   ========================================================= */
.ftFinalCta {
  padding: 56px 8%;
  background: url(https://www.lava-yoga-global.com/common/images/com_cta_bg.jpg) center / cover no-repeat;
  text-align: center;
}

.ftFinalCtaHeading {
  margin: 0 0 14px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
}

.ftFinalCtaText {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #fff;
}

.ftFinalCtaNote {
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
}

.ftFinalCta .ftCtaBlock {
  margin-top: 24px;
}

/* =========================================================
   Floating CTA button — now a real text pill instead of an image
   ========================================================= */
.floatBtn .ftCtaBtn {
  display: block;
  width: 90%;
  max-width: 710px;
  margin: 0 auto;
  padding: 14px 20px;
  font-size: 15px;
}

@media screen and (min-width: 761px) {
  .floatBtn .ftCtaBtn {
    width: 100%;
    max-width: 650px;
  }
}

/* =========================================================
   PC breakpoint: tighten up the larger display headings so they
   still wrap in two lines inside the narrower 500px PC column,
   matching the proportions of the original 750px mobile design.
   ========================================================= */
@media screen and (min-width: 761px) {
  .ftHeroHeading {
    font-size: 28px;
  }
  .ftSectionHeading--lg {
    font-size: 21px;
  }
  .ftSectionHeading {
    padding-bottom: 30px;
    background-size: 160px auto;
  }
  .ftFinalCtaHeading {
    font-size: 23px;
  }
  .ftPerksHeading {
    font-size: 18px;
    padding-bottom: 30px;
    background-size: 160px auto;
  }
  .ftBookCalloutTitle {
    font-size: 18px;
  }
}