/* =========================================================================
   FunLida Homepage Redesign - Stage 6
   Loaded last, and only while the redesigned homepage is rendering.
   Disable this file (or funlida-premium-home.php) to revert the whole stage.

   Token discipline: every component below consumes a custom property. The
   only literal colours in this file are inside the token block itself and
   the two scrim gradients, which need rgba stops of the ink hue.
   ========================================================================= */

:root {
  /* --- Job A: action + brand identity. Used sparingly. ------------------ */
  --brand-50:  #FFF1F5;
  --brand-100: #FFE0EA;
  --brand-200: #FFC2D6;
  --brand-300: #F995B6;
  --brand-400: #EE6A97;
  --brand-500: #D9407A;
  --brand-600: #B92E63;
  --brand-700: #93214C;
  --brand-800: #6B1737;

  /* --- Job B: neutrals. The structural base. ---------------------------- */
  --ink-900: #171114;
  --ink-700: #3D3339;
  --ink-500: #6B5E65;
  --ink-300: #A99BA2;
  --ink-200: #E4DDE0;
  --ink-100: #F4F1F2;
  --white:   #FFFFFF;

  /* --- Job C: warm supporting surfaces. --------------------------------- */
  --cream:    #FFF8F2;
  --peach:    #FFE9DC;
  --lilac:    #F0ECFB;
  --sage:     #E9F3EE;
  --gold-500: #F2B01E;

  /* --- Semantic: errors are never brand pink. --------------------------- */
  --danger:    #C0392B;
  --danger-bg: #FDECEA;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Baloo 2", "Poppins", system-ui, sans-serif;
  --font-body: "Inter", "Figtree", system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h4:      1.125rem;
  --fs-body-lg: 1.0625rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* --- Space ------------------------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  --radius-sm: 8px;  --radius-md: 14px;  --radius-lg: 20px;
  --radius-xl: 28px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23,17,20,0.05);
  --shadow-md: 0 4px 16px rgba(23,17,20,0.07);
  --shadow-lg: 0 14px 40px rgba(23,17,20,0.10);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;  --dur: 240ms;  --dur-slow: 420ms;

  --sec-y: var(--space-9);
  --gutter: 40px;
}

@media (max-width: 767px) {
  :root { --sec-y: var(--space-7); --gutter: 24px; }
}

/* =========================================================================
   BASE - scoped so nothing leaks to the shared header and footer.
   ========================================================================= */
.flp {
  background: var(--white);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  letter-spacing: 0;
  overflow-x: clip;
}
.flp *, .flp *::before, .flp *::after { box-sizing: border-box; }

.flp h1, .flp h2, .flp h3, .flp h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.flp h3, .flp h4 { line-height: 1.25; letter-spacing: -0.01em; }
.flp p { margin: 0; }
.flp img { max-width: 100%; display: block; }
.flp ul, .flp ol { margin: 0; padding: 0; list-style: none; }

.flp a { color: inherit; text-decoration: none; }

/* One focus treatment for the whole page (S8). */
.flp a:focus-visible,
.flp button:focus-visible,
.flp summary:focus-visible,
.flp [tabindex]:focus-visible,
.flp input:focus-visible,
.flp textarea:focus-visible,
.flp select:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.flp-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--white); color: var(--ink-900);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
  box-shadow: var(--shadow-md); font-weight: 600;
}
.flp-skip:focus { left: 0; }

.flp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================================
   LAYOUT
   ========================================================================= */
.flp-wrap {
  width: 100%; max-width: 1200px; margin-inline: auto;
  padding-inline: var(--gutter);
}
.flp-narrow { max-width: 880px; }

.flp-sec { padding-block: var(--sec-y); background: var(--white); }
.flp-sec-alt { background: var(--ink-100); }

/* =========================================================================
   PRIMITIVES
   ========================================================================= */
.flp-eyebrow {
  font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600; margin-bottom: var(--space-3);
}

.flp-h1 { font-size: var(--fs-display); }
.flp-h1 span { color: var(--brand-600); }
.flp-h2 { font-size: var(--fs-h2); }
.flp-h2 span { color: var(--brand-700); }

.flp-lede, .flp-sub {
  font-size: var(--fs-body-lg); color: var(--ink-500);
  max-width: 46ch; margin-top: var(--space-4);
}
.flp-head-c .flp-sub { margin-inline: auto; }

.flp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); margin-bottom: var(--space-7);
}
.flp-head-c { flex-direction: column; align-items: center; text-align: center; }
.flp-head-act { display: flex; align-items: center; gap: var(--space-3); flex: none; }

/* Buttons - three variants, nothing else (S5.5). */
.flp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 52px; padding-inline: var(--space-6);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.flp-btn-p {
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  background-color: var(--brand-500);
  color: var(--white); box-shadow: var(--shadow-md);
}
.flp-btn-p:hover { background-image: none; background-color: var(--brand-600); transform: translateY(-2px); }
.flp-btn-s {
  background: transparent; border-color: var(--ink-200); color: var(--ink-900);
}
.flp-btn-s:hover { background: var(--ink-100); transform: translateY(-2px); }
.flp-btn:active { transform: translateY(0); }

.flp-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--brand-600); font-weight: 600; font-size: var(--fs-sm);
  min-height: 44px; padding-inline: var(--space-2);
}
.flp-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Pills and badges */
.flp-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600;
  padding: 0 var(--space-3); min-height: 28px; white-space: nowrap;
}
.flp-pill-eyebrow {
  background: var(--peach); color: var(--ink-700);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: var(--space-5);
}
.flp-pill-peach { background: var(--peach); color: var(--brand-700); }
.flp-pill-sage  { background: var(--sage);  color: var(--ink-700); }
.flp-badge-save { background: var(--peach); color: var(--brand-700); }
.flp-badge-best_value { background: var(--brand-500); color: var(--white); }

/* Icon containers - neutral fill, brand glyph. Never pink text. */
.flp-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-sm); background: var(--ink-100);
  color: var(--brand-600);
}
.flp-ico-sm { width: 24px; height: 24px; background: none; border-radius: 0; }
.flp-i { width: 20px; height: 20px; }
.flp-ico-sm .flp-i { width: 18px; height: 18px; }
.flp-i-inline { width: 16px; height: 16px; vertical-align: -2px; }
.flp-star { width: 18px; height: 18px; color: var(--gold-500); flex: none; }

.flp-card {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* =========================================================================
   INTRO - hero and teachers as ONE composition (S4.3)
   No background change, no rule, no padding between the two blocks.
   ========================================================================= */
.flp-intro {
  position: relative;
  padding-top: var(--space-8);
  padding-bottom: var(--sec-y);
  background-image: linear-gradient(to bottom, var(--brand-50) 0%, var(--white) 46%);
  background-repeat: no-repeat;
}

.flp-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8); align-items: center;
  min-height: min(78vh, 720px);
}

.flp-feats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4); margin-top: var(--space-6);
}
.flp-feat { display: flex; align-items: center; gap: var(--space-3); }
.flp-feat-l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }

.flp-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

.flp-trust {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--ink-200);
}
.flp-trust li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--ink-500);
}

/* --- Arch image frame --------------------------------------------------- */
.flp-hero-art { position: relative; justify-self: end; width: 100%; max-width: 460px; }

.flp-arch { position: relative; }
.flp-arch-frame {
  position: relative; z-index: 1; overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 200px 200px var(--radius-xl) var(--radius-xl);
  background: var(--ink-100);
}
.flp-arch-img { width: 100%; height: 100%; object-fit: cover; }
.flp-arch-empty { width: 100%; height: 100%; background: var(--peach); }
.flp-arch-shadow {
  position: absolute; inset: 0; z-index: 0;
  transform: translate(20px, 20px);
  border-radius: 200px 200px var(--radius-xl) var(--radius-xl);
  background: var(--peach);
}
/* The arch overhangs into the teacher block so the two interlock (S4.3). */
@media (min-width: 1024px) {
  .flp-arch-hero { margin-bottom: -40px; }
}

.flp-float {
  position: absolute; z-index: 2; background: var(--white);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
  padding: var(--space-2) var(--space-4);
}
.flp-float-pill { top: var(--space-6); right: -12px; }
.flp-float-card {
  left: -16px; bottom: 44px; flex-direction: column; align-items: flex-start;
  border-radius: var(--radius-md); padding: var(--space-4); max-width: 210px;
  margin: 0; gap: var(--space-1);
}
.flp-float-card blockquote { margin: 0; font-size: var(--fs-sm); color: var(--ink-900); line-height: 1.4; }
.flp-float-card figcaption { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }

/* --- Teacher section header sits on the same grid column as the H1 ------- */
.flp-tsec { margin-top: var(--space-9); }
.flp-tsec .flp-head { margin-bottom: var(--space-6); }

.flp-arrows { display: flex; gap: var(--space-2); }
.flp-arrow {
  width: 44px; height: 44px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink-900); cursor: pointer;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.flp-arrow:hover:not(:disabled) { background: var(--ink-100); }
.flp-arrow:disabled { opacity: 0.4; pointer-events: none; }

.flp-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.flp-dot {
  width: 44px; height: 44px; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative;
}
.flp-dot::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--ink-200); transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}
.flp-dot.is-on::after { background: var(--brand-500); width: 22px; }

/* =========================================================================
   TEACHER CARD (S5.1) + section variants (S3.1)
   ========================================================================= */
.flp-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--space-5)) / 4);
  gap: var(--space-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block: var(--space-2);
  scrollbar-width: none;
  /* 64px fade so the peeking card never looks broken (S3.1). */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
}
.flp-track::-webkit-scrollbar { display: none; }
.flp-track > * { scroll-snap-align: start; }

/* Variant B - centred static row, never stretched to fill the container. */
.flp-trow {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-5);
}
.flp-trow > .flp-tc { width: 300px; flex: 0 0 300px; }

.flp-tc {
  display: flex; flex-direction: column; min-width: 240px;
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flp-tc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.flp-tc:hover .flp-tc-img { transform: scale(1.04); }

.flp-tc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-100); }
.flp-tc-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur) var(--ease);
}
.flp-tc-init {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 48px; color: var(--ink-300);
  background: var(--ink-100);
}
.flp-tc-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(23,17,20,0.82) 0%, rgba(23,17,20,0.55) 26%, rgba(23,17,20,0.16) 48%, transparent 64%);
}
.flp-tc-id {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.flp-tc-name {
  font-family: var(--font-display); font-size: var(--fs-h3); color: var(--white);
  line-height: 1.15; text-shadow: 0 1px 3px rgba(23,17,20,0.45);
}
.flp-tc-mode {
  font-size: var(--fs-sm); color: rgba(255,255,255,0.90);
  text-shadow: 0 1px 3px rgba(23,17,20,0.45);
}

.flp-tc-meta {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-inline: var(--space-4); background: var(--white);
}
.flp-tc-rate { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); }
.flp-tc-rate b { color: var(--ink-900); font-weight: 700; }
.flp-tc-rate span { color: var(--ink-500); }

.flp-tc-pitch {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.flp-tc-foot {
  margin-top: auto; padding: 0 var(--space-4) var(--space-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
}
.flp-tc-price b { color: var(--ink-900); font-weight: 700; }
.flp-tc-price small { font-size: var(--fs-sm); color: var(--ink-500); margin-left: 2px; }
.flp-tc-trial { font-size: var(--fs-sm); color: var(--brand-600); font-weight: 600; }
.flp-tc-years { font-size: var(--fs-sm); color: var(--ink-500); }

/* Ghost card - only ever alongside two or more real teachers. */
.flp-tc-ghost {
  align-items: center; justify-content: center; text-align: center;
  gap: var(--space-2); padding: var(--space-6);
  border: 1px dashed var(--ink-200); background: var(--ink-100);
  box-shadow: none; min-height: 320px;
}
.flp-tc-ghost:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.flp-tc-ghost-t { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink-900); }
.flp-tc-ghost-s { font-size: var(--fs-sm); color: var(--ink-500); }

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.flp-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  position: relative; align-items: stretch;
}
.flp-steps::before {
  content: ""; position: absolute; top: 22px; left: 16%; right: 16%;
  height: 1px; background: var(--ink-200); z-index: 0;
}
.flp-step { position: relative; z-index: 1; text-align: center; padding-inline: var(--space-3); }
.flp-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--ink-100); color: var(--brand-700);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);
  margin-bottom: var(--space-4); box-shadow: 0 0 0 6px var(--ink-100);
}
.flp-sec-alt .flp-step-n { background: var(--white); box-shadow: 0 0 0 6px var(--ink-100); }
.flp-step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.flp-step p { font-size: var(--fs-sm); color: var(--ink-500); }

/* =========================================================================
   WHY CHOOSE
   ========================================================================= */
.flp-why { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: center; }
.flp-wgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.flp-wcard { padding: var(--space-5); gap: var(--space-3); }
.flp-wcard h3 { font-size: var(--fs-h4); }
.flp-wcard p { font-size: var(--fs-sm); color: var(--ink-500); }

/* =========================================================================
   YOUR CLASSROOM
   ========================================================================= */
.flp-class { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.flp-class-art { position: relative; }
.flp-class-frame {
  position: relative; z-index: 1; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  background: var(--ink-100);
}
.flp-class-img { width: 100%; height: 100%; object-fit: cover; }
.flp-class-empty { width: 100%; height: 100%; background: var(--peach); }
.flp-class-shadow {
  position: absolute; inset: 0; z-index: 0; transform: translate(-20px, 20px);
  border-radius: var(--radius-xl); background: var(--peach);
}
.flp-class-txt .flp-btn { margin-top: var(--space-6); }

/* =========================================================================
   LESSON CARDS (S5.3)
   ========================================================================= */
.flp-lgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); align-items: stretch; }
.flp-lcard { overflow: hidden; }
.flp-lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.flp-lcard-media {
  aspect-ratio: 16 / 9; background: var(--peach);
  display: flex; align-items: center; justify-content: center;
}
.flp-lcard-ico { display: inline-flex; color: var(--brand-600); }
.flp-lcard-ico .flp-i { width: 40px; height: 40px; }
.flp-lcard-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.flp-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.flp-tag {
  font-size: var(--fs-xs); background: var(--ink-100); color: var(--ink-500);
  border-radius: var(--radius-pill); padding: 2px var(--space-3);
}
.flp-lcard h3 { font-size: var(--fs-h4); }
.flp-lcard p {
  font-size: var(--fs-sm); color: var(--ink-700);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================================
   PACKAGES (S5.4)
   ========================================================================= */
.flp-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); align-items: stretch; }
.flp-pgrid-one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.flp-pcard { position: relative; padding: var(--space-6); gap: var(--space-2); text-align: left; }
.flp-pcard.is-featured {
  border: 2px solid var(--brand-500); box-shadow: var(--shadow-lg);
}
.flp-pcard .flp-badge {
  position: absolute; top: 0; left: var(--space-6); transform: translateY(-50%);
}
.flp-pcard-n { font-size: var(--fs-h4); color: var(--ink-700); font-family: var(--font-body); font-weight: 700; }
.flp-pcard-p { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink-900); line-height: 1.1; }
.flp-pcard-u { font-size: var(--fs-sm); color: var(--ink-500); }
.flp-pcard-ea { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; }
.flp-pcard-f {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--ink-200);
}
.flp-pcard-f li { display: flex; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-700); }
.flp-check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--sage); color: var(--ink-700);
}
.flp-check .flp-i { width: 13px; height: 13px; }
/* Pinned so every CTA in the row shares a baseline regardless of feature count. */
.flp-pcard-cta { margin-top: auto; width: 100%; }
.flp-pcard-f + .flp-pcard-cta { margin-top: var(--space-6); }
.flp-note {
  margin: var(--space-6) auto 0; max-width: 60ch; text-align: center;
  font-size: var(--fs-sm); color: var(--ink-500);
}

/* =========================================================================
   TESTIMONIALS (S5.2)
   ========================================================================= */
.flp-tst { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: center; }
.flp-stars { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); }
.flp-stars .flp-star { width: 20px; height: 20px; }
.flp-tst-arrows { margin-top: var(--space-6); }

.flp-tst-stage { position: relative; }
.flp-qcard {
  background: var(--cream); border-radius: var(--radius-xl);
  padding: var(--space-7); box-shadow: var(--shadow-md);
  min-height: 420px; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: flp-fade var(--dur-slow) var(--ease);
}
@keyframes flp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.flp-qcard[hidden] { display: none; }
.flp-qcard-hd { display: flex; align-items: center; gap: var(--space-4); }
.flp-qcard-av { width: 56px; height: 56px; border-radius: var(--radius-pill); object-fit: cover; flex: none; }
.flp-qcard-hd b { display: block; font-size: var(--fs-h4); color: var(--ink-900); font-weight: 700; }
.flp-qcard-hd span { font-size: var(--fs-sm); color: var(--ink-500); }
.flp-qcard-q {
  font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink-900);
  line-height: 1.4; margin: 0;
}
.flp-qcard-q.is-lead { padding-top: var(--space-3); }
.flp-more {
  align-self: flex-start; background: none; border: 0; padding: 0;
  color: var(--brand-600); font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.flp-qcard-ft {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  background: var(--white); border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-sm);
  align-self: flex-start;
}
.flp-qcard-who { display: inline-flex; align-items: center; gap: var(--space-3); }
.flp-qcard-ini {
  width: 32px; height: 32px; border-radius: var(--radius-pill); flex: none;
  background: var(--peach); color: var(--brand-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
}
.flp-qcard-ft b { color: var(--ink-900); font-weight: 700; }
.flp-qcard-ft time { font-size: var(--fs-xs); color: var(--ink-300); }
.flp-qcard-stars { display: inline-flex; gap: 2px; }
.flp-qcard-src { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--ink-500); }
.flp-qdots { display: none; }

/* =========================================================================
   FAQ
   ========================================================================= */
.flp-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.flp-fitem {
  border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--white); overflow: hidden;
}
.flp-fitem[open] { background: var(--ink-100); }
.flp-fq {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); min-height: 56px;
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink-900);
}
.flp-fq::-webkit-details-marker { display: none; }
.flp-fq-ic { color: var(--ink-500); display: inline-flex; flex: none; transition: transform var(--dur) var(--ease); }
.flp-fitem[open] .flp-fq-ic { transform: rotate(45deg); }
.flp-fa-wrap { overflow: hidden; transition: height var(--dur) var(--ease); }
.flp-fa { padding: 0 var(--space-5) var(--space-5); color: var(--ink-700); max-width: 68ch; }

/* =========================================================================
   READY TO START - brand-50 band, never saturated pink
   ========================================================================= */
.flp-ready { background: var(--brand-50); }
.flp-ready-in { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; }
.flp-ready-txt .flp-btn { margin-top: var(--space-6); }
.flp-ready-art { justify-self: end; width: 100%; max-width: 320px; }
.flp-arch-sm .flp-arch-frame { border-radius: 160px 160px var(--radius-xl) var(--radius-xl); }
.flp-arch-sm .flp-arch-shadow { border-radius: 160px 160px var(--radius-xl) var(--radius-xl); background: var(--peach); }

/* =========================================================================
   CONTACT (S6)
   ========================================================================= */
.flp-cgrid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
.flp-cinfo-t { font-size: var(--fs-h4); margin-bottom: var(--space-5); }
.flp-csteps { display: flex; flex-direction: column; gap: var(--space-5); }
.flp-csteps li { display: flex; gap: var(--space-4); }
.flp-csteps b { display: block; color: var(--ink-900); font-weight: 600; }
.flp-csteps p { font-size: var(--fs-sm); color: var(--ink-500); }
.flp-cpromise {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--ink-200);
  font-size: var(--fs-sm); color: var(--ink-500);
}
.flp-cval { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--fs-sm); }
.flp-cval a { color: var(--brand-600); font-weight: 600; }

.flp-cform {
  background: var(--white); border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.flp-cform h3 { font-size: var(--fs-h3); }
.flp-cform > p { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: var(--space-5); }

/* Form controls - theme through tokens, and kill any default plugin styling.
   WPForms is themed through its own custom properties so plugin updates and
   its (0,4,1) selectors cannot win it back (STATE.md trap #6). */
.flp-cform {
  --wpforms-field-border-radius: var(--radius-md);
  --wpforms-field-border-color: var(--ink-200);
  --wpforms-field-background-color: var(--white);
  --wpforms-field-text-color: var(--ink-900);
  --wpforms-label-color: var(--ink-700);
  --wpforms-label-sublabel-color: var(--ink-500);
  --wpforms-label-error-color: var(--danger);
  --wpforms-button-border-radius: var(--radius-pill);
  --wpforms-button-background-color: var(--brand-500);
  --wpforms-button-background-color-alt: var(--brand-500);
  --wpforms-button-text-color: var(--white);
  --wpforms-button-text-color-alt: var(--white);
}
.flp-cform input[type="text"],
.flp-cform input[type="email"],
.flp-cform input[type="tel"],
.flp-cform input[type="url"],
.flp-cform select,
.flp-cform textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--ink-200); border-radius: var(--radius-md);
  background: var(--white); color: var(--ink-900);
  font-family: var(--font-body); font-size: var(--fs-body);
}
.flp-cform textarea { min-height: 120px; }
.flp-cform ::placeholder { color: var(--ink-300); opacity: 1; }
.flp-cform label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-700); margin-bottom: var(--space-2);
}
.flp-cform .wpforms-required-label,
.flp-cform abbr[title="required"] { color: var(--brand-600); text-decoration: none; }
.flp-cform input:focus, .flp-cform textarea:focus, .flp-cform select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px var(--brand-100);
  outline: none;
}
.flp-cform input:focus-visible, .flp-cform textarea:focus-visible, .flp-cform select:focus-visible {
  outline: 3px solid var(--brand-300); outline-offset: 2px;
}
.flp-cform .wpforms-error, .flp-cform .fluentform .error {
  color: var(--danger); font-size: var(--fs-sm);
}
.flp-cform input.wpforms-error, .flp-cform textarea.wpforms-error {
  border-color: var(--danger); background: var(--danger-bg);
}
.flp-cform button[type="submit"],
.flp-cform input[type="submit"],
.flp-cform .wpforms-submit,
.flp-cform .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding-inline: var(--space-6);
  border: 0; border-radius: var(--radius-pill);
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  background-color: var(--brand-500);
  color: var(--white); font-weight: 600; font-size: var(--fs-body);
  font-family: var(--font-body); cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.flp-cform button[type="submit"]:hover,
.flp-cform input[type="submit"]:hover,
.flp-cform .ff-btn-submit:hover {
  background-image: none; background-color: var(--brand-600); transform: translateY(-2px);
}
.flp-cform .wpforms-confirmation-container-full,
.flp-cform .ff-message-success {
  background: var(--sage); border: 1px solid var(--ink-200);
  border-radius: var(--radius-md); color: var(--ink-900);
  padding: var(--space-5);
}

/* =========================================================================
   RESPONSIVE (S7)
   ========================================================================= */
@media (max-width: 1279px) {
  .flp-track { grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3); }
}

@media (max-width: 1023px) {
  .flp-hero { grid-template-columns: 1fr; gap: var(--space-7); min-height: 0; }
  .flp-hero-art { order: -1; justify-self: center; max-width: 380px; }
  .flp-arch-hero { margin-bottom: 0; }
  .flp-hero-art .flp-arch-frame { max-height: 380px; }
  .flp-why { grid-template-columns: 1fr; gap: var(--space-6); }
  .flp-wgrid { grid-template-columns: repeat(2, 1fr); }
  .flp-class { grid-template-columns: 1fr; }
  .flp-class-art { order: -1; }
  .flp-lgrid, .flp-pgrid { grid-template-columns: repeat(2, 1fr); }
  .flp-tst { grid-template-columns: 1fr; gap: var(--space-6); }
  .flp-ready-in { grid-template-columns: 1fr; }
  .flp-ready-art { justify-self: center; order: -1; }
  .flp-cgrid { grid-template-columns: 1fr; gap: var(--space-6); }
  .flp-track { grid-auto-columns: calc((100% - var(--space-5)) / 2.2); }
}

@media (max-width: 767px) {
  .flp-feats { grid-template-columns: 1fr; }
  .flp-cta { flex-direction: column; gap: var(--space-3); }
  .flp-cta .flp-btn { width: 100%; }
  .flp-trust { gap: var(--space-2) var(--space-5); }
  .flp-float { display: none; }
  .flp-head { flex-direction: column; align-items: flex-start; }
  .flp-arrows { display: none; }
  .flp-steps { grid-template-columns: 1fr; gap: var(--space-6); }
  .flp-steps::before { display: none; }
  .flp-qcard { min-height: 340px; padding: var(--space-5); }
  .flp-qdots { display: flex; }
  .flp-tst-arrows { display: none; }
  .flp-tsec { margin-top: var(--space-7); }
}

@media (max-width: 639px) {
  .flp-wgrid, .flp-lgrid, .flp-pgrid { grid-template-columns: 1fr; }
  /* Featured tier leads in single column rather than sitting mid-stack. */
  .flp-pcard.is-featured { order: -1; }
  .flp-trow > .flp-tc { width: min(300px, 100%); flex: 0 0 auto; }
  .flp-track { grid-auto-columns: calc(100% / 1.15); }
  .flp-qcard-q { font-size: var(--fs-body-lg); }
}

/* =========================================================================
   REDUCED MOTION + PRINT
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .flp *, .flp *::before, .flp *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .flp-tc:hover { transform: none; }
  .flp-tc:hover .flp-tc-img { transform: none; }
  .flp-btn:hover { transform: none; }
}

@media print {
  .flp-qcard[hidden] { display: flex !important; }
  .flp-track { overflow: visible; mask-image: none; -webkit-mask-image: none; }
}

/* =========================================================================
   SPECIFICITY FLOOR - measured, not assumed.
   The base `.flp h1..h4` rules sit at (0,1,1); a bare `.flp-*` class is
   (0,1,0) and silently loses. Two defects were caught by screenshot plus
   getComputedStyle, never by reading the CSS:
     1. Teacher names painted --ink-900 over a dark scrim -> white-on-dark
        text was actually near-black on dark. A contrast failure, not a nit.
     2. .flp-tc-pitch computed `display: flow-root`, so -webkit-line-clamp was
        inert: 100px of content in a 58px box, overrunning the price row.
   Every rule below re-states a property a lower-specificity rule was winning.
   Keep them scoped. Do not collapse them back to single classes.
   ========================================================================= */
.flp .flp-tc-name { color: var(--white); }
.flp .flp-tc-mode { color: rgba(255,255,255,0.92); }
/* Line clamp must target an INNER element, never the flex item itself.
   .flp-tc and .flp-lcard-body are flex containers, so their children are flex
   items - and CSS blockifies `display:-webkit-box` on a flex item to
   `flow-root`, which makes -webkit-line-clamp inert. Measured: the rule won
   the cascade at (0,2,0) and STILL computed flow-root, 100px of text in a
   58px box overrunning the price row. Raising specificity cannot fix this;
   only moving the clamp off the flex item can. */
.flp .flp-tc-pitch > span,
.flp .flp-lcard p > span {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.flp .flp-tc-pitch > span { -webkit-line-clamp: 2; }
.flp .flp-lcard p > span { -webkit-line-clamp: 3; }
.flp .flp-pcard-n {
  font-family: var(--font-body); font-size: var(--fs-h4);
  font-weight: 700; color: var(--ink-700);
}
.flp .flp-cinfo-t { font-size: var(--fs-h4); color: var(--ink-900); }
.flp .flp-tc-ghost-t { color: var(--ink-900); }
.flp .flp-qcard-q { color: var(--ink-900); font-family: var(--font-display); }
.flp .flp-qcard-hd b { color: var(--ink-900); }
/* Trust strip: tighter inline gap so the three items hold one row longer. */
.flp .flp-trust { gap: var(--space-2) var(--space-4); }

/* =========================================================================
   TESTIMONIAL DECK (replaces the spec's crossfade, per client direction)
   Cards stack instead of swapping: each new card lands on top of the pile,
   earlier cards stay visible peeking behind. Right disables when exhausted;
   left un-stacks. Depth is driven by --d, set by the controller.
   ========================================================================= */
.flp .flp-tst-stage { position: relative; padding-top: 52px; min-height: 472px; }
.flp .flp-qcard {
  --d: 0;
  position: absolute; top: 52px; left: 0; right: 0;
  z-index: calc(50 - var(--d));
  transform: translateY(calc(var(--d) * -22px)) scale(calc(1 - var(--d) * 0.05));
  transform-origin: 50% 0;
  animation: none;
  transition: transform var(--dur-slow) var(--ease),
              opacity var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease);
}
.flp .flp-qcard[data-state="stacked"] {
  opacity: calc(1 - var(--d) * 0.18);
  pointer-events: none; box-shadow: var(--shadow-sm);
}
.flp .flp-qcard[data-state="deep"]    { opacity: 0; pointer-events: none; }
.flp .flp-qcard[data-state="pending"] {
  opacity: 0; pointer-events: none;
  transform: translateY(34px) scale(0.96); z-index: 0;
}
.flp .flp-qcard[data-state="active"] { opacity: 1; z-index: 60; box-shadow: var(--shadow-lg); }

/* =========================================================================
   SCROLL REVEAL
   The hidden state is applied by funlida-rd.js and by nothing else, so a
   script failure leaves every section visible rather than blank. Print and
   reduced-motion both force the resting state (trap #4: a scroll-triggered
   reveal is invisible to anything that never scrolls, and a full-page
   screenshot rendered six blank bands the last time that was missed).
   ========================================================================= */
.flp [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--rd, 0ms);
}
.flp [data-reveal].is-in { opacity: 1; transform: none; }

@media print {
  .flp [data-reveal] { opacity: 1 !important; transform: none !important; }
  .flp .flp-qcard { position: static; opacity: 1 !important; transform: none !important; margin-bottom: var(--space-5); }
}

/* =========================================================================
   HOVER CHOREOGRAPHY
   ========================================================================= */
.flp .flp-tc { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.flp .flp-tc:hover { border-color: var(--brand-200); }
.flp .flp-tc-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(217,64,122,0.18), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.flp .flp-tc:hover .flp-tc-media::after { opacity: 1; }

.flp .flp-lcard { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.flp .flp-lcard:hover { border-color: var(--brand-200); }
.flp .flp-lcard-ico { transition: transform var(--dur-slow) var(--ease); }
.flp .flp-lcard:hover .flp-lcard-ico { transform: scale(1.12) rotate(-6deg); }
.flp .flp-lcard-media { transition: background-color var(--dur) var(--ease); }
.flp .flp-lcard:hover .flp-lcard-media { background-color: var(--brand-100); }

.flp .flp-pcard { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.flp .flp-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.flp .flp-pcard:not(.is-featured):hover { border-color: var(--brand-200); }

.flp .flp-wcard { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.flp .flp-wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.flp .flp-wcard .flp-ico { transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.flp .flp-wcard:hover .flp-ico { background: var(--peach); transform: scale(1.08); }

.flp .flp-link .flp-i { transition: transform var(--dur) var(--ease); }
.flp .flp-link:hover .flp-i { transform: translateX(4px); }

.flp .flp-csteps li .flp-ico { transition: background-color var(--dur) var(--ease); }
.flp .flp-csteps li:hover .flp-ico { background: var(--peach); }

.flp .flp-fitem { transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.flp .flp-fitem:hover { border-color: var(--brand-200); }

/* Reduced motion: strip every transform added above, keep the resting state. */
@media (prefers-reduced-motion: reduce) {
  .flp [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .flp .flp-pcard:hover,
  .flp .flp-wcard:hover,
  .flp .flp-lcard:hover .flp-lcard-ico,
  .flp .flp-wcard:hover .flp-ico,
  .flp .flp-link:hover .flp-i { transform: none !important; }
  .flp .flp-qcard { transition: none !important; }
}
/* Ready-to-Start with no CTA photograph: one centred column, no empty arch. */
.flp .flp-ready-solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.flp .flp-ready-solo .flp-sub { margin-inline: auto; }
/* Tap targets, measured by painted box at 390 (trap #5: min-width loses to a
   flex context just as easily as to a transform).
   Dots sat in a flex row and SHRANK to 24px wide once the teacher slider had
   11 pages - the 44px declaration was never the operative constraint. */
.flp .flp-dots { flex-wrap: wrap; row-gap: 0; }
.flp .flp-dot { flex: none; width: 44px; height: 44px; }
.flp .flp-more {
  /* flex-shrink in the card's column context compressed this past min-height
     to 42px. flex:none is the operative fix, not a taller min-height. */
  flex: none; min-height: 44px; display: inline-flex; align-items: center;
  padding-inline: var(--space-1);
}
/* =========================================================================
   BUTTON COLOUR - specificity floor (caught by a contrast audit, 2026-08-10)
   `.flp a { color: inherit }` is (0,1,1) and outranks `.flp-btn-p` at (0,1,0),
   so every button inherited --ink-700 instead of its own colour. The primary
   CTA was rendering #3D3339 on the brand gradient: 2.87:1, under the 4.5:1
   floor, on the single most important control on the page.
   Buttons are <a> elements here, which is why the element part of the
   selector tipped it. Keep these two-class selectors.
   ========================================================================= */
.flp .flp-btn-p,
.flp a.flp-btn-p { color: var(--white); }
.flp .flp-btn-s,
.flp a.flp-btn-s { color: var(--ink-900); }
.flp .flp-link,
.flp a.flp-link { color: var(--brand-600); }
.flp .flp-more { color: var(--brand-600); }
.flp .flp-tc-trial { color: var(--brand-600); }
.flp .flp-skip { color: var(--ink-900); }

/* =========================================================================
   ORIGINAL HERO, RESTORED (client request, 2026-08-10)
   Reverses the spec's "delete the giant hero circle / rings / floating icon
   bubbles / clipped circular portrait" and its white page ground, for the
   hero only. Everything below the hero keeps the Stage 6 system.
   Loaded last in funlida-premium.css so it wins over the arch rules above.
   ========================================================================= */

/* The pink field. The fade still completes BEFORE the teacher cards so the
   hero and the deck read as one composition with no seam (spec 4.3). */
.flp .flp-intro {
  background-image:
    radial-gradient(120% 90% at 78% 18%, #FDE7F0 0%, rgba(253,231,240,0) 60%),
    linear-gradient(to bottom, #FFF3F7 0%, #FFF7FA 38%, var(--white) 82%);
  padding-top: var(--space-7);
}

.flp .flp-hero-og { align-items: center; }
.flp .flp-hero-og .flp-h1 { line-height: 1.06; }
.flp .flp-h1-accent { position: relative; display: inline-block; color: var(--brand-500); }
.flp .flp-swash {
  position: absolute; right: -34px; bottom: -2px; width: 42px; height: auto;
  color: var(--brand-400); pointer-events: none;
}
.flp .flp-hero-og .flp-lede { max-width: 42ch; color: var(--ink-500); }

/* Feature tiles: soft pink chips, as the original. */
.flp .flp-ico-og {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  background: #FCE1EC; color: var(--brand-500);
}
.flp .flp-ico-og .flp-i { width: 17px; height: 17px; }
.flp .flp-hero-og .flp-feats { gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.flp .flp-hero-og .flp-feat-l { font-weight: 600; color: var(--ink-700); }

/* Buttons: filled pink + pink outline. */
.flp .flp-hero-og .flp-cta { margin-top: var(--space-6); }
.flp .flp-btn-o, .flp a.flp-btn-o {
  background: var(--white); border: 1px solid var(--brand-300);
  color: var(--brand-600); box-shadow: none;
}
.flp .flp-btn-o:hover { background: var(--brand-50); border-color: var(--brand-400); transform: translateY(-2px); }

/* Stat tiles. */
.flp .flp-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-7); border: 0; padding: 0;
}
.flp .flp-stat {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--white); border: 1px solid #F7DDE7;
  border-radius: var(--radius-md); padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(217,64,122,0.06);
}
.flp .flp-stat-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  background: #FCE1EC; color: var(--brand-500);
}
.flp .flp-stat-ic .flp-i { width: 16px; height: 16px; }
.flp .flp-stat-txt { display: flex; flex-direction: column; line-height: 1.2; }
.flp .flp-stat-txt b { color: var(--ink-900); font-size: 0.9375rem; font-weight: 700; }
.flp .flp-stat-txt small { color: var(--ink-500); font-size: 0.75rem; }

/* =========================================================================
   THE ART
   ========================================================================= */
.flp .flp-hero-art {
  position: relative; width: 100%; max-width: 480px;
  aspect-ratio: 1 / 1; justify-self: end; margin-bottom: 0;
  isolation: isolate;
}

/* Gradient disc behind the portrait. */
.flp .flp-blob {
  position: absolute; z-index: 1; left: 50%; top: 52%;
  width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #FBB6D0 0%, #F79CC0 45%, #F387B3 100%);
}
/* Wide soft halo. */
.flp .flp-halo {
  position: absolute; z-index: 0; left: 50%; top: 52%;
  width: 96%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: #FDEAF2;
}
/* Dashed orbit + travelling dot. */
.flp .flp-orbit {
  position: absolute; z-index: 0; left: 50%; top: 52%;
  width: 104%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px dashed #DCCBF2;
}
.flp .flp-orbit-dot {
  position: absolute; z-index: 2; right: 4%; top: 34%;
  width: 11px; height: 11px; border-radius: 50%; background: #B9A6E6;
}

/* Portrait sits ABOVE the disc and is allowed to overflow it at the top,
   which is what makes it read as a cutout rather than a cropped circle. */
.flp .flp-portrait {
  position: absolute; z-index: 3; left: 50%; bottom: 8%;
  width: 72%; transform: translateX(-50%);
  display: flex; justify-content: center; align-items: flex-end;
}
.flp .flp-portrait-img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(147,33,76,0.18));
}
.flp .flp-portrait-empty {
  width: 100%; aspect-ratio: 4/5; border-radius: 50% 50% 0 0; background: var(--peach);
}

/* Speech bubbles. */
.flp .flp-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 22px; font-weight: 700; font-size: 0.9375rem;
  box-shadow: 0 8px 22px rgba(147,33,76,0.10); white-space: nowrap;
}
.flp .flp-chip::after {
  content: ""; position: absolute; bottom: -7px; width: 14px; height: 14px;
  background: inherit; border-radius: 3px; transform: rotate(45deg);
}
.flp .flp-chip-talk {
  top: 6%; left: 46%; background: #FFE3EE; color: var(--brand-600);
}
.flp .flp-chip-talk::after { left: 22px; }
.flp .flp-chip-cando {
  top: 30%; left: -6%; background: #E7DEFA; color: #6E5F9C;
}
.flp .flp-chip-cando::after { right: 24px; }

/* Floating icon badges. */
.flp .flp-badge-f {
  position: absolute; z-index: 4; display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); color: var(--brand-500);
  box-shadow: 0 10px 26px rgba(147,33,76,0.14);
}
.flp .flp-badge-f .flp-i { width: 24px; height: 24px; }
.flp .flp-badge-globe { top: 24%; right: 2%; }
.flp .flp-badge-book  { top: 60%; left: 2%; }
.flp .flp-badge-chat  { bottom: 12%; right: 6%; width: 62px; height: 62px; }

/* Sparkles. */
.flp .flp-spark { position: absolute; z-index: 2; color: var(--brand-300); }
.flp .flp-spark .flp-i { width: 100%; height: 100%; }
.flp .flp-spark-1 { top: 6%;  right: 22%; width: 20px; height: 20px; }
.flp .flp-spark-2 { top: 16%; right: 10%; width: 13px; height: 13px; color: var(--brand-200); }
.flp .flp-spark-3 { bottom: 30%; left: 16%; width: 16px; height: 16px; }

/* Idle float. Honoured by the global reduced-motion block above. */
@keyframes flp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.flp .flp-badge-globe { animation: flp-bob 5.2s var(--ease) infinite; }
.flp .flp-badge-book  { animation: flp-bob 6.1s var(--ease) infinite 0.4s; }
.flp .flp-badge-chat  { animation: flp-bob 5.6s var(--ease) infinite 0.8s; }
.flp .flp-chip-talk   { animation: flp-bob 6.4s var(--ease) infinite 0.2s; }
.flp .flp-chip-cando  { animation: flp-bob 6.8s var(--ease) infinite 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .flp .flp-badge-f, .flp .flp-chip { animation: none !important; }
}

@media (max-width: 1023px) {
  .flp .flp-hero-art { order: -1; justify-self: center; max-width: 400px; margin-inline: auto; }
  .flp .flp-hero-og { text-align: left; }
}
@media (max-width: 767px) {
  .flp .flp-hero-art { max-width: 320px; }
  .flp .flp-chip { font-size: 0.8125rem; padding: 8px 14px; }
  .flp .flp-badge-f { width: 44px; height: 44px; }
  .flp .flp-badge-f .flp-i { width: 19px; height: 19px; }
  .flp .flp-badge-chat { width: 48px; height: 48px; }
  .flp .flp-stats { gap: var(--space-2); }
  .flp .flp-stat { flex: 1 1 100%; }
  .flp .flp-swash { display: none; }
}

/* --- Hero accuracy pass against the client's reference ------------------- */

/* The spec display size (up to 4.25rem) broke "Learn Real English" onto three
   lines. The reference sets it on two, so the hero headline gets its own
   smaller ramp. Section H2s elsewhere are untouched. */
.flp .flp-hero-og .flp-h1 {
  font-size: clamp(2.25rem, 1.45rem + 2.3vw, 3.35rem);
  line-height: 1.08;
}
@media (min-width: 1024px) {
  /* Slightly more room on the left so the headline holds two lines. */
  .flp .flp-hero-og { grid-template-columns: 1.18fr 0.82fr; }
}

/* The reference portrait is a cutout. Ours is a rectangular photograph, so
   its bottom edge landed as a hard horizontal line across the disc. Fade the
   last slice so it dissolves into the circle instead. */
.flp .flp-portrait-img {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0) 99%);
          mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,0) 99%);
}

/* "Let's talk!" is white in the reference; only "You can do it!" is lilac. */
.flp .flp-chip-talk { background: var(--white); color: var(--brand-500); }

/* The orbit reads as a light arc rather than a hard full ring. */
.flp .flp-orbit { border-color: #E3D6F6; opacity: 0.9; }

/* --- Portrait: hard clip, not a fade ------------------------------------
   The previous fade mask only made the photo's rectangle translucent, so the
   jacket and its background were still visible below the disc as a ghost.
   Attachment 200 is a rectangular photograph, not a cutout, so nothing can
   "remove" that background - it has to be CLIPPED away.

   The portrait is now a circle with the same geometry as the disc, sitting
   just inside it so a thin pink rim reads around the edge. Zero excess at any
   size, because there is no image outside the circle at all.

   To get the reference's hair-overflows-the-circle look, a transparent PNG
   cutout is required. Drop one into the `hero` slot and replace this block
   with the overflow version - see STATE.md Stage 11.
   ------------------------------------------------------------------------ */
.flp .flp-portrait {
  position: absolute; z-index: 3;
  left: 50%; top: 52%; bottom: auto;
  width: 71%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
.flp .flp-portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Frame the face high in the circle so the crop reads as a portrait
     rather than a headless torso. */
  object-position: 50% 12%;
  filter: none;
  /* Kill the earlier fade outright - it is what produced the ghost. */
  -webkit-mask-image: none;
          mask-image: none;
}
.flp .flp-portrait-empty {
  width: 100%; height: 100%; border-radius: 50%; background: var(--peach);
}

/* Disc sits a touch wider than the portrait so a pink rim shows around it. */
.flp .flp-blob { width: 77%; }

/* =========================================================================
   HERO SCALE + PINK PAGE (client request)
   ========================================================================= */

/* --- 1. Kill the dead space, scale the hero up -------------------------
   The gap above and below the copy came from min-height: min(78vh,720px)
   with the grid vertically centred - the block was forced tall and the
   content floated in the middle of it. Let the content set the height and
   give it real padding instead. */
.flp .flp-intro {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}
.flp .flp-hero-og {
  min-height: 0;
  gap: var(--space-6);
  padding-block: var(--space-4) var(--space-2);
}

/* Bigger headline now that there is room for it. */
.flp .flp-hero-og .flp-h1 {
  font-size: clamp(2.5rem, 1.5rem + 2.9vw, 4rem);
  line-height: 1.05;
}
.flp .flp-hero-og .flp-lede {
  font-size: 1.125rem; max-width: 44ch; margin-top: var(--space-4);
}
.flp .flp-hero-og .flp-feats { margin-top: var(--space-6); }
.flp .flp-hero-og .flp-cta { margin-top: var(--space-6); }
.flp .flp-hero-og .flp-stats { margin-top: var(--space-6); }

/* Larger art to match the bigger type. */
.flp .flp-hero-art { max-width: 560px; }
@media (min-width: 1280px) { .flp .flp-hero-art { max-width: 600px; } }

/* Bring the teacher deck up closer - it was a full 96px away. */
.flp .flp-tsec { margin-top: var(--space-7); }

/* --- 2. Pink everywhere ------------------------------------------------
   Sections alternated white / --ink-100 grey. The grey is what made the
   page fall out of the pink world below the fold. Alternation is kept (it
   still separates sections) but both steps are now pink. */
.flp { background: #FFFBFC; }
.flp .flp-sec { background: #FFFBFC; }
.flp .flp-sec-alt { background: #FFF2F7; }

/* The intro fade now resolves INTO the page tint, not into hard white,
   so there is no seam where the hero ends. */
.flp .flp-intro {
  background-image:
    radial-gradient(120% 90% at 78% 18%, #FDE7F0 0%, rgba(253,231,240,0) 60%),
    linear-gradient(to bottom, #FFF3F7 0%, #FFF6F9 44%, #FFFBFC 88%);
}

/* Cards stay white so they lift off the tint, but their hairlines go warm -
   an ink-grey border on a pink field reads as dirt. */
.flp .flp-card,
.flp .flp-tc,
.flp .flp-pcard,
.flp .flp-lcard,
.flp .flp-wcard,
.flp .flp-fitem,
.flp .flp-cform,
.flp .flp-qcard-ft { border-color: #F7DDE7; }
.flp .flp-fitem[open] { background: #FFF6F9; }

/* Icon containers, step numerals, tags and checks: pink instead of grey. */
.flp .flp-ico,
.flp .flp-step-n,
.flp .flp-tag,
.flp .flp-lcard-media { background: #FCE1EC; }
.flp .flp-ico { color: var(--brand-600); }
.flp .flp-step-n { color: var(--brand-700); box-shadow: 0 0 0 6px #FFF2F7; }
.flp .flp-sec-alt .flp-step-n { background: var(--white); box-shadow: 0 0 0 6px #FFF2F7; }
.flp .flp-tag { color: var(--brand-700); }
.flp .flp-check { background: #FCE1EC; color: var(--brand-700); }
.flp .flp-steps::before { background: #F7DDE7; }

/* Testimonial deck: cream -> pink, to sit in the same family. */
.flp .flp-qcard { background: #FFF1F6; }
.flp .flp-qcard-ini { background: #FCE1EC; color: var(--brand-700); }

/* Closing CTA band a touch deeper so it still reads as a band. */
.flp .flp-ready { background: #FFE7F0; }

/* Pitch/border dividers inside cards. */
.flp .flp-pcard-f,
.flp .flp-trust,
.flp .flp-cpromise { border-color: #F7DDE7; }

/* Secondary button on a pink ground needs a warm edge, not grey. */
.flp .flp-btn-s { border-color: #F3D4E1; }
.flp .flp-btn-s:hover { background: #FFF2F7; }

@media (max-width: 1023px) {
  .flp .flp-hero-art { max-width: 420px; }
  .flp .flp-hero-og { padding-block: var(--space-2); }
}

/* The classroom photo (attachment 119) is a very pale pink workspace shot.
   On the new pink band it lost all edge and read as an empty panel. Give the
   frame a defined rim so it reads as a photograph, not a gap. */
.flp .flp-class-frame {
  border: 1px solid #F3D4E1;
  box-shadow: 0 18px 44px rgba(147,33,76,0.10);
  background: var(--white);
}
.flp .flp-class-shadow { background: #FCE1EC; }

/* =========================================================================
   STAGE 12 - VIBRANT PINK (client review, 2026-08-14)

   Stage 11b turned the BACKGROUNDS pink and stopped there. The client
   marked up the live page against the original reference and X'd every
   band anyway, because the TYPE and the CONTROLS were still neutral:
   section headings at --ink-900, grey-outlined secondary buttons, an
   ink-grey FAQ marker and a near-white testimonial card. "Why choose
   FunLida" was singled out for reading half-black / half-pink.

   Stage 11b coloured the ground. This block colours the ink.

   Specificity (trap #1, and trap #6 in Stage 6): the base rule is
   `.flp h1, .flp h2, ...` at (0,1,1), so a bare `.flp-h2` at (0,1,0)
   LOSES to it. Every selector below is two-class or better on purpose.
   Do NOT collapse them back to single classes.

   Revert: delete this block, or restore option `fl_premium_css_bak_stage12`
   / the sibling file funlida-premium.css.stage11b-bak.
   ========================================================================= */

/* --- 1. Section headings ----------------------------------------------
   The single highest-impact change in this stage. Ten H2s were #171114.
   `span` inherits so a two-tone heading resolves to one pink, which is
   what the client flagged on "Why choose FunLida".
   brand-500 on the page tint is 4.2:1 and on the deepest band (#FFE7F0)
   is 3.6:1 - both above the 3:1 floor for large text, which every H2 is
   (--fs-h2 is clamp(1.9rem, ..., 3rem)). */
.flp .flp-h2 { color: var(--brand-500); }
.flp .flp-h2 span { color: inherit; }
.flp .flp-h1 span { color: var(--brand-500); }

/* --- 2. Secondary buttons ---------------------------------------------
   .flp-btn-s was an ink-200 hairline with ink-900 text. On a pink field
   that reads as a DISABLED control, not a choice. Stage 11 already
   established the reference's outline treatment as .flp-btn-o; this just
   makes the two agree instead of shipping two different outline styles. */
.flp .flp-btn-s, .flp a.flp-btn-s {
  background: var(--white);
  border-color: var(--brand-300);
  color: var(--brand-600);
}
.flp .flp-btn-s:hover, .flp a.flp-btn-s:hover {
  background: var(--brand-50);
  border-color: var(--brand-400);
}

/* --- 3. Package CTAs and the classroom CTA ----------------------------
   The reference fills every "Buy" button; the live page filled only the
   featured tier and left the other three as grey ghosts. The featured
   card keeps its distinction through the 2px brand border, the badge and
   shadow-lg, so the Stage 4 CTA hierarchy survives losing this one
   signal. Same for the standalone "Your classroom" CTA. */
.flp .flp-pcard-cta, .flp a.flp-pcard-cta,
.flp .flp-class-txt .flp-btn-s, .flp .flp-class-txt a.flp-btn-s {
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  background-color: var(--brand-500);
  border-color: transparent;
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.flp .flp-pcard-cta:hover, .flp a.flp-pcard-cta:hover,
.flp .flp-class-txt .flp-btn-s:hover, .flp .flp-class-txt a.flp-btn-s:hover {
  background-image: none;
  background-color: var(--brand-600);
  border-color: transparent;
}

/* --- 4. "View all" becomes a real button ------------------------------
   The reference has a filled "View All Teachers" pill; the live page had
   a bare text link that disappeared into the band. */
.flp .flp-head-act .flp-link {
  background-image: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: var(--white);
  border-radius: var(--radius-pill);
  padding-inline: var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.flp .flp-head-act .flp-link:hover {
  background-image: none;
  background-color: var(--brand-600);
  text-decoration: none;
  transform: translateY(-2px);
}

/* --- 5. Package names, feature checks, FAQ marker ---------------------
   Small pink accents the reference carries and the live page had dropped
   to grey. The check is filled rather than tinted so it reads at the same
   weight as the reference's pink diamond bullet. */
.flp .flp-pcard-n { color: var(--brand-600); }
.flp .flp-check { background: var(--brand-500); color: var(--white); }
.flp .flp-fq-ic { color: var(--brand-500); }

/* --- 6. Testimonial card -----------------------------------------------
   The reference fills these cards magenta with white text; the live page
   had #FFF1F6 with ink text, which is why the band read as empty.

   The gradient deliberately starts at #CE3670 rather than brand-500.
   White on brand-500 is 4.23:1 - fine for the desktop quote (25.6px =
   large text, 3:1) but SHORT of 4.5:1 once --fs-h3 clamps down to 20px on
   mobile, where it is no longer large text. #CE3670 measures 4.79:1, so
   the card passes AA at every width. Do not lighten the first stop. */
.flp .flp-qcard {
  background: linear-gradient(158deg, #CE3670 0%, var(--brand-700) 100%);
  border-color: transparent;
  color: var(--white);
}
.flp .flp-qcard .flp-qcard-q { color: var(--white); }
.flp .flp-qcard .flp-qcard-hd b { color: var(--white); }
.flp .flp-qcard .flp-qcard-hd span { color: rgba(255,255,255,0.82); }
.flp .flp-qcard .flp-more { color: var(--white); }
.flp .flp-qcard .flp-qcard-ft {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: none;
}
.flp .flp-qcard .flp-qcard-ft b { color: var(--white); }
.flp .flp-qcard .flp-qcard-ft time { color: rgba(255,255,255,0.72); }
.flp .flp-qcard .flp-qcard-src { color: rgba(255,255,255,0.82); }
.flp .flp-qcard .flp-qcard-ini {
  background: rgba(255,255,255,0.22);
  color: var(--white);
}
/* --- 7. Five pricing tiers --------------------------------------------
   Adding the $25 / 50-minute single class takes the ladder to five. The
   base grid is repeat(4,1fr), which would have orphaned the fifth card
   onto a row of its own. Count-driven class emitted by
   funlida-premium-home.php, same idiom as .flp-pgrid-one.

   The section wrap widens to 1320px at >=1280 only: at the standard
   1200px wrap, five cards leave 205px each, and .flp-pcard's --space-6
   padding eats 64px of that. 1320 + the tighter gap gives 235px per card.

   These selectors are (0,2,0) and the breakpoint rules they have to
   coexist with are (0,1,0), so each breakpoint needs its own override
   below - the media query alone will NOT win. */
@media (min-width: 1280px) {
  .flp .flp-pgrid-5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  .flp .flp-pgrid-5 .flp-pcard { padding: var(--space-5); }
  .flp .flp-sec-pk .flp-wrap { max-width: 1320px; }
}
@media (max-width: 1279px) {
  .flp .flp-pgrid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .flp .flp-pgrid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .flp .flp-pgrid-5 { grid-template-columns: 1fr; }
}
/* --- 8. Contrast sweep fixes ------------------------------------------
   Run after the recolour, per the Stage 8 lesson that a palette change can
   strand text nothing else will catch.

   The button gradient started at --brand-500, which is 4.23:1 against
   white - STATE.md already recorded that as the spec contradicting itself
   (it mandates both this gradient and a 4.5:1 floor) and left it alone
   because it applied to one button. Section 3 above made it the treatment
   for EVERY CTA on the page, so leaving it is no longer defensible.

   #CE3670 is the same hue two steps deeper: 4.79:1 against white, passes
   AA at 16px, and is indistinguishable from brand-500 at a glance. It is
   the same value section 6 uses for the testimonial card, so the whole
   page now shares one compliant pink ceiling. Do not lighten it.
   (--brand-500 itself is untouched; it still fills chips, checks and the
   icon glyphs, where it is a graphic and the floor is 3:1.) */
.flp { --brand-cta: #CE3670; }

.flp .flp-btn-p,
.flp a.flp-btn-p,
.flp .flp-pcard-cta, .flp a.flp-pcard-cta,
.flp .flp-class-txt .flp-btn-s, .flp .flp-class-txt a.flp-btn-s,
.flp .flp-head-act .flp-link {
  background-image: linear-gradient(135deg, var(--brand-cta), var(--brand-600));
  background-color: var(--brand-cta);
}

/* White on brand-500 at 12px is 4.23:1; brand-600 is 5.8:1. */
.flp .flp-badge-best_value { background: var(--brand-600); }

/* Hero speech bubbles measured 4.23 and 4.29 against their own tints.
   Deepening only the TEXT keeps the pastel bubbles the client approved. */
.flp .flp-chip-talk  { color: var(--brand-700); }
.flp .flp-chip-cando { color: #574A80; }
/* =========================================================================
   STAGE 13 - FONT MATCH, BRIGHTER PINK, HOW-IT-WORKS CARDS (2026-08-14)
   ========================================================================= */

/* --- 1. Typography: match the other 7 routes --------------------------
   The landing page did NOT have a font of its own by choice - it had a
   MISSING one. --font-display asked for "Baloo 2" then "Poppins";
   document.fonts proved the homepage loaded neither (only Inter + Cardo),
   because Elementor enqueues the kit's Google Fonts on the routes IT
   renders and the homepage is a plain PHP template. Headings were silently
   falling through to system-ui while every other route drew real Poppins.

   funlida-enqueue.php now loads Poppins + Figtree on this page, so these
   two lines finally resolve. Same families and weights the rest of the
   site already uses: Poppins for display, Figtree for body.

   Do not re-add "Baloo 2" - it is not loaded anywhere on this install. */
.flp {
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
}
.flp h1, .flp h2, .flp h3, .flp h4 { font-weight: 700; }
.flp .flp-h1, .flp .flp-h2 { font-weight: 800; }

/* --- 2. Brighter pink ramp --------------------------------------------
   Client direction. Scoped to .flp so it retints the landing page by
   inheritance without touching the header, footer or the other routes.

   The ONE constraint: white text needs 4.5:1 at body size, which caps how
   bright a pink can sit under a button label. --brand-500 (#EC3B7E) is
   3.82:1 - fine for headings, which are 30-48px and judged at the 3:1
   large-text floor, but NOT for a 16px button. So buttons keep their own
   --brand-cta at #D6357A = 4.52:1, the brightest this hue gets while
   staying AA. It is still brighter and hotter than the #CE3670 it
   replaces. Do not point buttons at --brand-500. */
.flp {
  --brand-50:  #FFF0F6;
  --brand-100: #FFDCEA;
  --brand-200: #FFBAD4;
  --brand-300: #FF8BB5;
  --brand-400: #F85E9B;
  --brand-500: #EC3B7E;
  --brand-600: #D22468;
  --brand-700: #A81A52;
  --brand-cta: #D6357A;
}

/* Surfaces and hairlines lifted to match the brighter ramp. The closing
   CTA band stops at #FFE4EF: one step deeper and a brand-500 heading on it
   drops under the 3:1 large-text floor (measured 3.20 here, 3.10 at
   #FFDFEC). */
.flp, .flp .flp-sec { background: #FFFAFC; }
.flp .flp-sec-alt { background: #FFEDF4; }
.flp .flp-ready { background: #FFE4EF; }
.flp .flp-intro {
  background-image:
    radial-gradient(120% 90% at 78% 18%, #FFDCEA 0%, rgba(255,220,234,0) 60%),
    linear-gradient(to bottom, #FFEDF4 0%, #FFF2F7 44%, #FFFAFC 88%);
}
.flp .flp-card, .flp .flp-tc, .flp .flp-pcard, .flp .flp-lcard,
.flp .flp-wcard, .flp .flp-fitem, .flp .flp-cform,
.flp .flp-pcard-f, .flp .flp-trust, .flp .flp-cpromise { border-color: #FBD3E3; }
.flp .flp-fitem[open] { background: #FFF4F8; }
.flp .flp-ico, .flp .flp-tag, .flp .flp-lcard-media { background: #FFD9E8; }
.flp .flp-check { background: var(--brand-500); color: var(--white); }
.flp .flp-qcard-ini { background: rgba(255,255,255,0.22); }
.flp .flp-btn-s { border-color: var(--brand-300); }
.flp .flp-btn-s:hover { background: var(--brand-50); }
.flp .flp-class-shadow { background: #FFD9E8; }
.flp .flp-class-frame { border-color: #FBD3E3; }
.flp .flp-stat { border-color: #FBD3E3; }
.flp .flp-stat-ic { background: #FFD9E8; color: var(--brand-500); }
.flp .flp-ico-og { background: #FFD9E8; color: var(--brand-500); }

/* Testimonial card: same AA ceiling as the buttons at its light end. */
.flp .flp-qcard {
  background: linear-gradient(158deg, var(--brand-cta) 0%, var(--brand-700) 100%);
}

/* --- 3. How It Works becomes cards ------------------------------------
   Was a 3-column timeline with a hairline running behind the numerals.
   The reference uses three standalone cards, so the connector goes and
   each step gets the same card treatment as the rest of the page. */
.flp .flp-steps::before { display: none; }
.flp .flp-step {
  display: flex; flex-direction: column; align-items: center;
  background: var(--white);
  border: 1px solid #FBD3E3;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flp .flp-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* The numeral carried a 6px ring that existed to mask the connector line.
   Inside a white card that ring reads as a halo, so it becomes a soft
   brand tint instead. The .flp-sec-alt rule painted the numeral WHITE,
   which on a white card would have made it vanish - overridden here. */
.flp .flp-step-n,
.flp .flp-sec-alt .flp-step-n {
  background: #FFD9E8;
  color: var(--brand-700);
  box-shadow: 0 0 0 6px var(--brand-50);
}
/* --- 4. 5-up CTA labels after the font swap ---------------------------
   Poppins is wider than the system-ui the page was accidentally rendering,
   so "Buy Get to know" and "Buy Standard class" wrapped to two lines in the
   235px 5-up cards (measured: 138px of text into 121px of space). The
   button's --space-6 side padding was eating 64px of a 185px control.
   Trim the padding and drop a step of type; the label is centred anyway,
   so the wide padding was doing nothing at this width. */
@media (min-width: 1280px) {
  .flp .flp-pgrid-5 .flp-pcard-cta {
    padding-inline: var(--space-3);
    font-size: 0.9375rem;
  }
}
/* =========================================================================
   STAGE 14 - PORTRAIT UNCLIPPED + BADGES REMOVED (2026-08-14)
   ========================================================================= */

/* --- 1. The hair was being cut by a clip that is no longer needed ------
   Stage 11 hard-clipped .flp-portrait to a circle because the hero image
   was a RECTANGULAR photograph whose bottom edge landed as a hard line
   across the disc. That trade-off was recorded with an explicit exit:
   "Matching the reference exactly REQUIRES a transparent PNG cutout. When
   one is supplied, put it in the hero slot and revert .flp-portrait to the
   overflow version."

   That cutout is now in place. Measured on
   uploads/2026/07/Portrait-scaled.png (1950x2560):
     mode RGBA, alpha extrema (0, 254)   -> genuinely transparent
     subject bbox y 7.1% .. 100.0%       -> bottom-anchored, 7.1% headroom

   So the clip is removed rather than worked around. Note that enlarging
   the circle would NOT have fixed this: the image is sized at 100% of the
   circle, so a bigger circle scales the crop with it and cuts exactly the
   same hair. The crop had to go, not the size.

   object-fit becomes `contain` so the full cutout is always shown, and the
   subject is bottom-anchored so it grows UPWARD out of the disc - which is
   the reference composition. */
.flp .flp-portrait {
  position: absolute; z-index: 3;
  left: 50%; top: auto; bottom: 9%;
  width: 63%; aspect-ratio: auto;
  transform: translateX(-50%);
  border-radius: 0;
  overflow: visible;
  display: flex; justify-content: center; align-items: flex-end;
}
.flp .flp-portrait-img {
  width: 100%; height: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 30px rgba(147,33,76,0.18));
  -webkit-mask-image: none;
          mask-image: none;
}
.flp .flp-portrait-empty {
  width: 100%; aspect-ratio: 4/5;
  border-radius: 50% 50% 0 0; height: auto;
  background: var(--peach);
}

/* --- 2. Which badges the client meant ---------------------------------
   I first read "badges" as the floating icon circles (globe / book / chat)
   and hid those. Wrong ones - the client meant the three STAT TILES under
   the hero CTAs: "1,000+ Happy Students", "4.9/5 Student Rating",
   "Trusted by Learners Worldwide". Icon circles restored, tiles hidden.

   Worth noting this also retires a live honesty problem. Stage 11 flagged
   those tiles: two of the three had NO source in the CRM and
   fl_hero_stats was never set, so the invented defaults were rendering.
   fl_rd_aggregate_rating() still returns null (no teacher review counts),
   so the 4.9/5 was unevidenced too. Removing them is the fix Stage 11
   wanted, arrived at from the other direction. */
.flp .flp-stats { display: none; }
/* Soften the bottom edge. The cutout's subject runs to y=100% of the source,
   so the jacket ends in a hard horizontal line that does not follow the
   disc's curve.

   Stage 11 rejected a fade mask and was right to: on the RECTANGULAR photo
   it only made the rectangle translucent and left a ghost of the jacket's
   background below the disc ("as tho the opacity was just reduced"). That
   failure mode needs a background to reveal. This PNG is alpha-cut, so the
   only thing under the fade is the page - the jacket dissolves into the
   band instead of stopping dead. Verified by screenshot, no ghost. */
.flp .flp-portrait-img {
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 88%, rgba(0,0,0,0) 100%);
}
/* --- Ready-to-start CTA art -------------------------------------------
   The slot now holds a transparent PNG cutout, so the arch frame (built for
   rectangular photos) would draw a panel behind it. Strip the frame here
   only; every other .flp-arch-frame on the page is untouched. */
.flp .flp-ready .flp-arch-frame {
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  aspect-ratio: 1;
  overflow: visible;
}
.flp .flp-ready .flp-arch-frame img { object-fit: contain; }
.flp .flp-ready .flp-arch-shadow { display: none; }
/* =========================================================================
   STAGE 18b - Pricing card balance (client review)
   ========================================================================= */

/* 1. Buttons on one baseline.
   The cards were already the same height (measured: all 450px), but the CTAs
   finished at five different heights - 4444 / 4468 / 4503 / 4511 / 4535 -
   because .flp-pcard-cta's `margin-top:auto` only does anything inside a
   flex COLUMN, and the card was not one. Make it one and the auto margin
   does the rest. */
.flp .flp-pgrid .flp-pcard,
.flp .flp-pgrid-5 .flp-pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flp .flp-pcard-cta { margin-top: auto; }

/* 2. No cream. The "Save" badge was --peach (#FFE9DC) next to a pink
   "Best Value", which read as two different systems. Both pink now, still
   distinguishable by depth, and both AA on white text:
   brand-cta 4.5:1, brand-700 7.1:1. */
.flp .flp-badge-save {
  background: var(--brand-cta, #D6357A);
  color: var(--white, #fff);
}
.flp .flp-badge-best_value {
  background: var(--brand-700, #A81A52);
  color: var(--white, #fff);
}

/* 3. The per-class line was landing ON the text.
   .flp-pcard-f carries the divider as a border-top, but its margin-top was
   computing to 0px, so the rule sat at y=4258 while "$23 per class" occupied
   4259-4282 - the text was drawn over its own divider. Restore real space so
   the line sits below the price line and above the feature list. */
.flp .flp-pcard-f {
  margin-top: var(--space-5, 24px);
  padding-top: var(--space-5, 24px);
  border-top: 1px solid #FBD3E3;
}
.flp .flp-pcard-ea { margin-bottom: 0; }

/* Keeps the badge clear of the card's top edge now that heights are locked. */
.flp .flp-pcard .flp-badge { z-index: 2; }