/* =========================================================================
   ABI Landing Funnels — fresh stylesheet
   ─────────────────────────────────────────────────────────────────────────
   Self-contained, mobile-first, BEM-ish naming under a single .lf- prefix
   so nothing in this file can collide with anything in the main marketing
   site (which uses no .lf- selectors).

   4 page themes set --lf-accent etc. on .lf-page.lf-page--{mhtn-en|mhtn-es|
   brnx-en|brnx-es}. The "What You Get" light-blue is hard-coded and stays
   the same across all 4 pages as a secondary brand cue.
   =========================================================================*/

/* ───── reset / base ───── */
*,*::before,*::after { box-sizing: border-box; }
.lf-skip {
  position: absolute; left: 0; top: 0;
  background: #0a1020; color: #fff;
  padding: .8rem 1.2rem; font-weight: 700;
  z-index: 9999; border-radius: 0 0 12px 0;
  transform: translateY(-110%);
  transition: transform .15s ease;
}
.lf-skip:focus { transform: translateY(0); outline: 2px solid #ffd470; outline-offset: 2px; }
.lf-form__trust {
  margin: .75rem 0 .15rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: #1f9d55;
  letter-spacing: .02em;
}

/* ===== Consent checkboxes (TCPA: AI calls + SMS) ===== */
.lf-consent {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin: .9rem 0 1rem;
  padding: .9rem;
  background: #f7f8fc;
  border: 1px solid var(--lf-line);
  border-radius: 10px;
}
.lf-consent__row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .65rem;
  align-items: start;
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--lf-muted);
}
.lf-consent__row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: .15rem;
  accent-color: var(--lf-accent);
  cursor: pointer;
}
.lf-consent__row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--lf-accent);
  outline-offset: 2px;
}
.lf-consent__row:hover { color: var(--lf-ink); }

/* ===== Skills & Techniques — proper grid (was ragged flex wrap) ===== */
.lf-tech-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
@media (min-width: 540px) { .lf-tech-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .lf-tech-grid { grid-template-columns: repeat(4, 1fr); } }
.lf-tech {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  width: 100%;
  min-height: 44px;
  padding: .55rem .85rem !important;
  justify-content: flex-start;
  white-space: normal;
  text-align: left;
  font-size: .88rem;
  line-height: 1.25;
}
.lf-tech svg { flex: 0 0 auto; }

/* ===== 3 Easy Steps section — v3.6: evenly spread with generous spacing =====
   1 column mobile → 3 columns tablet+ → wider gap on desktop for breathing room */
.lf-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1.4rem auto 0;
  max-width: 1160px;
  padding-inline: .4rem;
}
@media (min-width: 760px) {
  /* v3.7 — spread the 3 cards more evenly across the width */
  .lf-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4.2vw, 3.6rem);
    padding-inline: 1.2rem;
  }
}
.lf-step {
  background: #fff;
  border: 1px solid var(--lf-line);
  border-top: 4px solid var(--lf-accent);
  border-radius: var(--lf-r-lg);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--lf-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lf-step:hover { transform: translateY(-3px); box-shadow: var(--lf-shadow-md); }
.lf-step__n {
  display: inline-block;
  font-family: 'Oswald', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--lf-accent);
  letter-spacing: -.01em;
  margin-bottom: .4rem;
}
.lf-step__h {
  font-family: 'Oswald', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 .55rem;
  color: var(--lf-ink);
  line-height: 1.2;
}
.lf-step__p {
  margin: 0;
  color: var(--lf-muted);
  font-size: .96rem;
  line-height: 1.55;
}

/* ===== Countdown — STRICT 2 lines only =====
   Line 1: "Next Starting Date: Monday, July 6, 2026"
   Line 2: "New Classes Begin the First Monday of Each Month."
   Auto-scales font so neither line ever wraps to a third line. */
.lf-cd__line {
  margin: 0 0 .35rem;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.005em;
}
.lf-cd__line--date {
  font-weight: 800;
  font-size: clamp(.82rem, 3.4vw, 1.05rem);
}
.lf-cd__line--date .lf-cd__label { color: #fff; opacity: .88; font-weight: 600; }
.lf-cd__line--date .lf-cd__date  { color: #ffd470; }
.lf-cd__line--sub {
  font-weight: 500;
  font-size: clamp(.72rem, 2.95vw, .92rem);
  opacity: .9;
  margin-bottom: 1rem;
}
@media (min-width: 769px) {
  .lf-cd__line { text-align: left; }
}

/* ===== Hide play button while a video is playing (set by funnels.js) ===== */
.lf-clip.is-playing .lf-clip__play,
.lf-reel__media.is-playing .lf-reel__play {
  display: none !important;
}

/* ===== ABI AI chatbot bubble — force ABI blue gradient ===== */
/* chatbot.css uses `var(--blue)` which is defined on the marketing site
   but not in the funnels — provide both the variable + an explicit
   gradient so the FAB always renders the brand blue. */
:root { --blue: #1b3bd9; --blue-deep: #0f2aa5; }
.abibot-fab {
  background: linear-gradient(135deg, #1b3bd9, #3a4ff0) !important;
  color: #fff !important;
  box-shadow: 0 12px 32px rgba(27, 47, 217, .50) !important;
}
.abibot-fab:hover { box-shadow: 0 16px 40px rgba(27, 47, 217, .60) !important; }
.abibot-fab-label, .abibot-fab svg { color: #fff !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.lf-page {
  margin: 0;
  font-family: 'Poppins','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color: var(--lf-ink, #0a1020);
  background: #ffffff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ───── design tokens (defaults, overridden per theme) ───── */
body.lf-page {
  --lf-ink:        #0a1020;
  --lf-muted:      #3a4763;
  --lf-soft-ink:   #6b7385;
  --lf-line:       #e3ecf8;
  --lf-bg:         #ffffff;
  --lf-bg-alt:     #f6f9ff;

  /* universal "What You Get" sky-blue secondary accent */
  --lf-sky:        #5fb8ff;
  --lf-sky-soft:   #eaf4ff;
  --lf-sky-deep:   #1b3bd9;

  /* theme accent — overridden by .lf-page--* below */
  --lf-accent:      #1b3bd9;
  --lf-accent-dark: #0f2aa5;
  --lf-accent-soft: #e7ecff;
  --lf-on-accent:   #ffffff;

  /* shadows */
  --lf-shadow-sm: 0 1px 2px rgba(15,30,80,.06), 0 4px 12px rgba(15,30,80,.05);
  --lf-shadow-md: 0 12px 32px rgba(15,30,80,.10), 0 2px 0 rgba(255,255,255,.65) inset;
  --lf-shadow-lg: 0 24px 60px rgba(15,30,80,.18);

  /* radii */
  --lf-r-sm: 8px;
  --lf-r-md: 14px;
  --lf-r-lg: 22px;
  --lf-r-pill: 999px;
}

/* Manhattan EN — deep gold (premium / established) */
body.lf-page--mhtn-en {
  --lf-accent: #c89c2a;
  --lf-accent-dark: #9d7918;
  --lf-accent-soft: #fbf3dd;
  --lf-on-accent: #1a1205;
}
/* Manhattan ES — emerald green (start / GO signal) */
body.lf-page--mhtn-es {
  --lf-accent: #0e8f62;
  --lf-accent-dark: #0a6e4b;
  --lf-accent-soft: #e8f7f1;
  --lf-on-accent: #ffffff;
}
/* Bronx EN — vivid orange (energy / urgency) */
body.lf-page--brnx-en {
  --lf-accent: #e85d3a;
  --lf-accent-dark: #bf4623;
  --lf-accent-soft: #fdeee6;
  --lf-on-accent: #ffffff;
}
/* Bronx ES — royal blue (trust / calm) */
body.lf-page--brnx-es {
  --lf-accent: #1b3bd9;
  --lf-accent-dark: #0f2aa5;
  --lf-accent-soft: #e7ecff;
  --lf-on-accent: #ffffff;
}

/* ───── layout primitives ───── */
.lf-wrap { width: min(1240px, 92%); margin-inline: auto; }
.lf-section { padding: 3.4rem 0; }
.lf-section--tight { padding: 2rem 0; }
.lf-section--alt { background: var(--lf-bg-alt); }
.lf-section__head { text-align: center; max-width: 720px; margin: 0 auto 2rem; }
.lf-eyebrow {
  display: inline-block; font-weight: 800; font-size: .78rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--lf-accent-dark); margin-bottom: .55rem;
}
.lf-h1, .lf-h2, .lf-h3 { font-family: 'Oswald', 'Poppins', sans-serif; letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.lf-h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 700; }
.lf-h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; }
.lf-h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }
.lf-lead { color: var(--lf-muted); font-size: clamp(1rem, 1.4vw, 1.1rem); margin: .4rem 0 0; }

/* ───── buttons ───── */
.lf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: var(--lf-r-pill);
  font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  border: 2px solid transparent; cursor: pointer; text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.lf-btn--primary {
  background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-dark));
  color: var(--lf-on-accent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--lf-accent) 45%, transparent);
}
.lf-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.lf-btn--secondary {
  background: var(--lf-accent-dark);
  color: var(--lf-on-accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--lf-accent) 32%, transparent);
}
.lf-btn--secondary:hover { transform: translateY(-1px); filter: brightness(1.08); }
.lf-btn--ghost {
  background: transparent;
  color: var(--lf-accent-dark);
  border-color: currentColor;
}
.lf-btn--ghost:hover {
  background: var(--lf-accent-soft);
}
.lf-btn--lg { padding: 1rem 2rem; font-size: 1.05rem; min-width: 200px; }

/* ───── top banner + header (slim — no nav) ───── */
.lf-topbar {
  background: linear-gradient(180deg, var(--lf-accent), var(--lf-accent-dark));
  color: var(--lf-on-accent);
  padding: .55rem 1rem; text-align: center;
  font-size: .92rem; font-weight: 700; letter-spacing: .02em;
}
.lf-hdr {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--lf-line);
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
.lf-hdr__in {
  max-width: 1280px; margin: 0 auto;
  padding: .5rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 0;
}
.lf-brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.lf-brand,
.lf-brand--campus { text-decoration: none; }
.lf-brand__logo { height: 48px; width: auto; }
/* v2.11 — Campus logos sized to fit cleanly inside the slim header.
   Animated GIFs keep their continuous spinning pole; mix-blend-mode
   multiply blends the artwork into the white header background. */
.lf-brand__logo--campus {
  height: 80px; width: auto;
  max-width: 420px;
  object-fit: contain;
  mix-blend-mode: multiply;
  background: transparent;
  display: block;
}
.lf-brand__addr {
  font-size: .78rem; color: var(--lf-muted); line-height: 1.35;
  font-weight: 600; max-width: 26ch;
}
.lf-hdr__right { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
/* v3.5 — multiple campus phones side by side in header (Manhattan = 2, Bronx = 1) */
/* v3.9 — desktop header: spread the 2 Manhattan phones much farther apart */
.lf-hdr__phones { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); flex-wrap: wrap; }
.lf-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; background: var(--lf-accent-soft);
  border: 1.5px solid var(--lf-accent); border-radius: var(--lf-r-pill);
  color: var(--lf-accent-dark); font-weight: 700; font-size: .88rem;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.lf-phone:hover { background: var(--lf-accent); color: var(--lf-on-accent); transform: translateY(-1px); }
.lf-phone__flag {
  font-size: .62rem; letter-spacing: .12em;
  padding: .08rem .35rem; border-radius: 4px;
  background: rgba(0,0,0,.06);
}
.lf-phone:hover .lf-phone__flag { background: rgba(255,255,255,.22); }
.lf-lang {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.72); border: 1.5px solid var(--lf-accent); border-radius: var(--lf-r-pill);
  font-size: .82rem; font-weight: 800; overflow: hidden;
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 4px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.lf-lang:hover { border-color: var(--lf-accent-dark); box-shadow: 0 6px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.7); }
.lf-lang a {
  padding: .42rem .7rem; color: var(--lf-accent-dark); transition: background .25s ease, color .25s ease;
}
.lf-lang a + a { border-left: 1.5px solid rgba(0,0,0,.1); }
.lf-lang a.is-active,
.lf-lang a:hover { background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-dark)); color: var(--lf-on-accent); text-shadow: 0 1px 3px rgba(0,0,0,.2); }

@media (max-width: 720px) {
  .lf-brand__addr { display: none; }
  .lf-brand__logo { height: 40px; }
  .lf-brand__logo--campus { height: 64px; max-width: 300px; }
  .lf-phone__num { display: none; }
  .lf-phone { padding: .45rem .6rem; }
  /* v3.5 — hide header phones on mobile; the topbar chips already show all campus numbers */
  .lf-hdr__phones { display: none; }
}

/* ───── hero ───── */
.lf-hero {
  position: relative; overflow: hidden;
  /* The photo now lives in .lf-mhero above; this band holds the form + details on a clean dark surface. */
  background: #0a1226;
  color: #fff;
  padding: 2rem 0;
}
.lf-hero__in {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  align-items: start;
}
@media (min-width: 980px) {
  .lf-hero__in { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
}
/* Mobile: contact form first, then trust list + countdown */
@media (max-width: 979px) {
  .lf-hero__form { order: 1; }
  .lf-hero__copy { order: 2; }
}
.lf-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.lf-hero__sub { color: #e8eaf2; font-size: clamp(.92rem, 1.3vw, 1.05rem); margin: .6rem 0 .9rem; max-width: 36rem; }
.lf-hero__sub b { color: #fff; }

/* hero chips — DESKTOP: 3-column uniform grid, matching website .hx-chips alignment */
.lf-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  max-width: 46rem;
  margin-bottom: .8rem;
}
.lf-feature {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: rgba(9,13,28,.78);
  border: 1px solid rgba(130,150,255,.3);
  color: #f2f4fa;
  padding: .75rem .8rem;
  border-radius: 12px;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-width: 0;
}
.lf-feature > span { min-width: 0; flex: 1 1 auto }
.lf-feature svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #9db4ff;
  margin-top: .1rem;
  filter: none;
}
.lf-feature--multi > span > b {
  display: block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.3;
}
.lf-feature__sub {
  display: block;
  font-style: normal;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-top: .25rem;
  color: #c9d3ee;
}

/* hero CTAs removed on desktop — see .lf-mbar (mobile fixed bottom bar) below */
.lf-hero__ctas { display: none; }

/* countdown card */
.lf-cd {
  margin: 1.1rem 0 0;
  padding: 1.25rem 1.3rem 1.35rem;
  max-width: 34rem;
  background: rgba(8,12,28,.55);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.lf-cd__h {
  margin: 0 0 .5rem;
  font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem); line-height: 1.2;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline;
}
.lf-cd__label { color: #fff; }
.lf-cd__date { color: var(--lf-sky); text-shadow: 0 1px 8px rgba(0,0,0,.4); font-weight: 500; }
.lf-cd__sub { margin: 0 0 1rem; font-size: .92rem; color: #e8eaf2; font-weight: 500; }
.lf-cd__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.lf-cd__cell {
  text-align: center; padding: .7rem .3rem .55rem;
  border: 1.5px solid rgba(255,255,255,.6); border-radius: 14px;
}
.lf-cd__cell b {
  display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); color: #fff; line-height: 1;
}
.lf-cd__cell span {
  display: block; margin-top: .35rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.9);
}

/* lead form (hero right column) */
.lf-form {
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-lg);
  box-shadow: var(--lf-shadow-lg);
  padding: 1.5rem 1.3rem; color: var(--lf-ink);
}
.lf-form__h { font-size: 1.25rem; margin: 0 0 .3rem; color: var(--lf-ink); }
.lf-form__sub { margin: 0 0 1rem; color: var(--lf-muted); font-size: .92rem; }
.lf-form__row { display: grid; gap: .65rem; margin-bottom: .65rem; }
@media (min-width: 520px) { .lf-form__row--2 { grid-template-columns: 1fr 1fr; } }
.lf-form input, .lf-form select, .lf-form textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .95rem;
  background: #f8fafc; color: var(--lf-ink);
  border: 1.5px solid #d8dee9; border-radius: var(--lf-r-md);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.lf-form input:focus, .lf-form select:focus, .lf-form textarea:focus {
  border-color: var(--lf-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lf-accent) 22%, transparent);
}
.lf-form__submit { width: 100%; margin-top: .35rem; }
.lf-form__fine { font-size: .72rem; color: var(--lf-soft-ink); margin: .8rem 0 0; }

/* ───── stats row ───── */
.lf-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
}
@media (min-width: 720px) { .lf-stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.lf-stat {
  text-align: center;
  background: var(--lf-bg); border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1.2rem .8rem; box-shadow: var(--lf-shadow-sm);
}
.lf-stat__n { font-family: 'Oswald', sans-serif; font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 700; color: var(--lf-accent-dark); line-height: 1; }
.lf-stat__label { display: block; margin-top: .35rem; font-size: .82rem; color: var(--lf-muted); font-weight: 600; }

/* ───── "What You Get" pills (light-blue band) ───── */
.lf-pills {
  background: linear-gradient(180deg, var(--lf-sky-soft) 0%, #fff 100%);
  border-top: 1px solid var(--lf-line);
}
.lf-pills__grid {
  display: grid; grid-template-columns: 1fr; gap: .85rem;
}
@media (min-width: 720px) { .lf-pills__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lf-pills__grid { grid-template-columns: repeat(3, 1fr); } }
.lf-pill {
  display: flex; align-items: center; gap: .8rem;
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1rem 1.1rem; box-shadow: var(--lf-shadow-sm);
}
.lf-pill__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lf-sky-soft); color: var(--lf-sky-deep);
  display: grid; place-items: center;
}
.lf-pill__icon svg { width: 22px; height: 22px; }
.lf-pill__txt { font-weight: 600; color: var(--lf-ink); font-size: .96rem; }

/* v3.6 — removed duplicate .lf-steps + .lf-step block ("Hands-On Training",
   a legacy section no longer emitted by build.py). Its 4-column definition
   was overriding the 3-Easy-Steps 3-column layout on ≥1024px screens. */

/* ───── earnings tiers ───── */
.lf-earn { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .lf-earn { grid-template-columns: repeat(3, 1fr); } }
.lf-earn-card {
  background: linear-gradient(180deg, var(--lf-accent-soft) 0%, #fff 100%);
  border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1.6rem 1.3rem; text-align: center; box-shadow: var(--lf-shadow-sm);
}
.lf-earn-card__amount {
  font-family: 'Oswald', sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  color: var(--lf-ink); font-weight: 700; line-height: 1.1;
}
.lf-earn-card__role { margin-top: .35rem; font-weight: 600; color: var(--lf-accent-dark); }
.lf-earn-card__note { margin-top: .35rem; color: var(--lf-soft-ink); font-size: .85rem; }

/* ───── tuition table ───── */
.lf-tuition { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .lf-tuition { grid-template-columns: repeat(3, 1fr); } }
.lf-plan {
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1.5rem 1.3rem; box-shadow: var(--lf-shadow-sm);
}
.lf-plan--feature { border-color: var(--lf-accent); border-width: 2px; box-shadow: var(--lf-shadow-md); transform: translateY(-4px); }
.lf-plan__name { font-weight: 800; color: var(--lf-accent-dark); letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.lf-plan__price { font-family: 'Oswald', sans-serif; font-size: 2rem; margin: .35rem 0; color: var(--lf-ink); font-weight: 700; }
.lf-plan__per { color: var(--lf-soft-ink); font-size: .9rem; }
.lf-plan__list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .35rem; }
.lf-plan__list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--lf-muted); font-size: .92rem; }
.lf-plan__list li::before { content: '✓'; color: var(--lf-accent); font-weight: 800; }

/* ───── Inside ABI / showcase clip grid ───── */
.lf-showcase {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 720px) { .lf-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lf-showcase { grid-template-columns: repeat(3, 1fr); } }
.lf-clip {
  position: relative;
  background: #141a2e; border-radius: var(--lf-r-md); overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: var(--lf-shadow-sm);
}
.lf-clip video {
  width: 100%; height: 100%; object-fit: cover; background: #1a1f2e;
  filter: brightness(1.04) saturate(1.03);
}
.lf-clip__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .6rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.45));
  color: #fff; font-weight: 600; font-size: .9rem;
}

/* ───── reel (Student Voices triple + Bronx-extra triplet) ───── */
.lf-reel {
  background: #fff; border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-lg); padding: 1.5rem; box-shadow: var(--lf-shadow-md);
}
.lf-reel__grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 980px) {
  .lf-reel--triple .lf-reel__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem 1.6rem;
  }
}
.lf-reel__media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--lf-r-md); overflow: hidden;
  background: #141a2e; box-shadow: 0 14px 40px rgba(0,0,0,.18);
  max-width: 360px; margin: 0 auto;
}
.lf-reel__media video {
  width: 100%; height: 100%; object-fit: contain;
  background: #1a1f2e;
  filter: brightness(1.04) saturate(1.02);
}
.lf-reel__copy {
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--lf-line); text-align: center;
}
.lf-reel__points {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  display: grid; grid-template-columns: 1fr; gap: .55rem;
  max-width: 720px; margin-inline: auto;
  text-align: left;
}
@media (min-width: 720px) { .lf-reel__points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lf-reel__points { grid-template-columns: repeat(3, 1fr); } }
.lf-reel__points li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .96rem; color: var(--lf-muted); font-weight: 600;
}
.lf-reel__points li::before {
  content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-top: .55em;
  border-radius: 50%; background: var(--lf-accent);
}

/* center play / pause button (Instagram pattern) */
.lf-reel__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.95); color: #0a1020;
  display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.05);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.lf-reel__play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.06); }
.lf-reel__play svg { width: 32px; height: 32px; fill: currentColor; pointer-events: none; }
.lf-reel__icon-play { margin-left: 4px; }
.lf-reel__icon-pause { display: none; }
.lf-reel__media.is-playing .lf-reel__icon-play { display: none; }
.lf-reel__media.is-playing .lf-reel__icon-pause { display: block; }
.lf-reel__media.is-playing .lf-reel__play {
  width: 54px; height: 54px;
  background: rgba(255,255,255,.55); opacity: .85;
}
.lf-reel__media.is-playing .lf-reel__play:hover {
  background: #fff; opacity: 1;
}
@media (hover: none) {
  .lf-reel__media.is-playing .lf-reel__play {
    width: 60px; height: 60px;
    background: rgba(255,255,255,.78); opacity: .92;
  }
}

/* corner mute toggle on the reel videos */
.lf-mute {
  position: absolute; bottom: 10px; right: 10px;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.6); color: #fff;
  display: grid; place-items: center;
  transition: background .2s;
}
.lf-mute:hover { background: rgba(0,0,0,.85); }
.lf-mute svg { width: 18px; height: 18px; fill: currentColor; pointer-events: none; }

/* ───── reviews (NO Google widget, NO Maps link) ───── */
.lf-reviews { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .lf-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lf-reviews { grid-template-columns: repeat(4, 1fr); } }
.lf-review {
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1.3rem; box-shadow: var(--lf-shadow-sm);
}
.lf-review__stars { color: #f5a623; letter-spacing: 2px; font-size: .95rem; }
.lf-review__q {
  margin: .7rem 0 1rem; color: var(--lf-ink); font-size: .98rem; line-height: 1.55;
}
.lf-review__who { display: flex; align-items: center; gap: .7rem; }
.lf-review__av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--lf-accent-soft); color: var(--lf-accent-dark);
  display: grid; place-items: center;
  font-weight: 800; font-size: .85rem;
}
.lf-review__name { font-weight: 700; color: var(--lf-ink); font-size: .92rem; line-height: 1.2; }
.lf-review__role { color: var(--lf-soft-ink); font-size: .8rem; }

/* ───── gallery — v3.4: lifted EXACTLY from main marketing site's `.gal`
   pattern (https://www.abi.edu/). 4-up on desktop,
   2-up on mobile (≤840px). Images are 4:3, scale gently on hover.   ───── */
.lf-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-top: 2rem;
}
.lf-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  filter: brightness(1.08) contrast(1.05) saturate(1.06);
  transition: transform .3s ease, filter .2s ease;
}
.lf-gallery img:hover {
  transform: scale(1.06);
  filter: brightness(1.16) contrast(1.08) saturate(1.1);
}
@media (max-width: 840px) {
  .lf-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ───── FAQ ───── */
.lf-faq { max-width: 820px; margin-inline: auto; display: grid; gap: .75rem; }
.lf-faq details {
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1rem 1.2rem; box-shadow: var(--lf-shadow-sm);
}
.lf-faq summary {
  font-weight: 700; color: var(--lf-ink); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.lf-faq summary::-webkit-details-marker { display: none; }
.lf-faq summary::after {
  content: '+'; color: var(--lf-accent); font-size: 1.4rem; line-height: 1; transition: transform .2s;
}
.lf-faq details[open] summary::after { content: '–'; }
.lf-faq__a { margin: .8rem 0 0; color: var(--lf-muted); font-size: .95rem; }

/* ───── footer ───── */
.lf-footer {
  background: linear-gradient(180deg, #fff, var(--lf-bg-alt));
  border-top: 1px solid var(--lf-line);
  padding: 3rem 0 2.4rem;
  text-align: center;
}
.lf-footer h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 .5rem; color: var(--lf-ink); }
.lf-footer p { color: var(--lf-muted); margin: 0 auto 1.5rem; max-width: 38rem; }
.lf-footer__ctas {
  display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: center; margin-bottom: 1.6rem;
}
.lf-footer__socials {
  display: flex; gap: .7rem; justify-content: center; margin: .8rem 0 1.4rem;
}
.lf-soc {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--lf-line);
  color: var(--lf-muted);
  transition: background .2s, color .2s, transform .15s;
}
.lf-soc:hover { background: var(--lf-accent); color: var(--lf-on-accent); border-color: var(--lf-accent); transform: translateY(-2px); }
.lf-soc svg { width: 20px; height: 20px; fill: currentColor; }
.lf-footer__fine { font-size: .78rem; color: var(--lf-soft-ink); margin: .5rem 0 0; }

/* ───── floating chat bubble (chatbot launcher) ───── */
.lf-chat {
  position: fixed; bottom: 22px; right: 22px; z-index: 80;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--lf-accent), var(--lf-accent-dark));
  color: var(--lf-on-accent);
  display: grid; place-items: center; border: 0;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--lf-accent) 50%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
}
.lf-chat:hover { transform: translateY(-2px); }
.lf-chat svg { width: 26px; height: 26px; fill: currentColor; }

/* ───── reveal-on-scroll ───── */
.lf-rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.lf-rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lf-rv, .lf-rv.is-in { opacity: 1; transform: none; transition: none; }
}

/* ───── responsive small-screen tweaks ───── */
@media (max-width: 720px) {
  .lf-section { padding: 2.4rem 0; }
  .lf-hero { padding: 2.4rem 0 2rem; }
  .lf-hero__sub { font-size: 1rem; }
  .lf-cd { padding: 1rem; }
  .lf-cd__cell { padding: .55rem .25rem .45rem; }
  .lf-cd__cell span { font-size: .58rem; letter-spacing: .12em; }
  .lf-cd__h { font-size: 1rem; gap: .3rem; }
  .lf-btn { padding: .8rem 1.4rem; font-size: .95rem; }
  .lf-btn--lg { padding: .95rem 1.7rem; }
}

/* ═════════════════════════════════════════════════════════════════════
   ─────────────────────────────────────────────────────────────────────
   reachable buttons fixed to the bottom of the viewport on mobile only.
   On desktop the bar is hidden — the inline hero form is the CTA.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body.lf-page {
    /* push every page's content up so it never sits behind the bar */
  }

  /* push the chat bubble above the bar so it never overlaps */
  .lf-chat svg { width: 22px; height: 22px; }

  /* hero: tighter on small screens, but readable */
  .lf-hero { padding: 2rem 0 1.6rem; }
  .lf-hero h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); }
  .lf-hero__sub { font-size: 1rem; }
  .lf-cd { padding: .9rem; max-width: 100%; }
  .lf-cd__h { font-size: clamp(1rem, 4.4vw, 1.15rem); }
  .lf-cd__cell { padding: .55rem .25rem .45rem; }
  .lf-cd__cell b { font-size: 1.3rem; }
  .lf-cd__cell span { font-size: .56rem; letter-spacing: .14em; }

  /* sticky header — keep slim on mobile (v2.11) */
  .lf-topbar { font-size: .82rem; padding: .45rem .8rem; }
  .lf-hdr__in { padding: .4rem .8rem; gap: .55rem; }
  .lf-brand__logo { height: 36px; }
  .lf-brand__logo--campus { height: 56px; max-width: 240px; }
  .lf-hdr__right { gap: .45rem; }
  .lf-lang { font-size: .74rem; }
  .lf-lang a { padding: .32rem .5rem; }

  /* section padding less aggressive on mobile */
  .lf-section { padding: 2.2rem 0; }
  .lf-section__head { margin-bottom: 1.4rem; }
  .lf-eyebrow { font-size: .7rem; letter-spacing: .2em; }
  .lf-h2 { font-size: clamp(1.4rem, 5.6vw, 1.9rem); }
  .lf-lead { font-size: .95rem; }

  /* tighten gallery + showcase + reviews + earnings on mobile */
  .lf-gallery { gap: .35rem; }
  .lf-pill { padding: .85rem .9rem; }
  .lf-step { padding: 1.1rem; }
  .lf-step__n { font-size: 1.7rem; }
  .lf-plan { padding: 1.2rem 1.1rem; }
  .lf-plan--feature { transform: none; } /* don't lift on mobile */

  /* footer CTAs stack full-width on mobile */
  .lf-footer__ctas .lf-btn { width: 100%; }

  /* form a touch tighter on mobile */
  .lf-form { padding: 1.2rem 1rem; }
  .lf-form input, .lf-form select, .lf-form textarea { font-size: 16px; /* prevent iOS zoom */ }
}

/* tablet (769–1024) — softer adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .lf-hero__in { gap: 2rem; }
  .lf-hero h1 { font-size: 2.6rem; }
  .lf-section { padding: 2.8rem 0; }
}

/* perf: reduce-motion respect for the reveal animations */
@media (prefers-reduced-motion: reduce) {
  .lf-rv, .lf-rv.is-in { opacity: 1; transform: none; transition: none; }
  .lf-reel__media,
  .lf-reel__play,
  .lf-soc { transition: none !important; }
}

/* perf: explicit aspect-ratio on lazy images (CLS-safe) */
.lf-gallery img { aspect-ratio: 4 / 3; }
.lf-clip img,
.lf-clip video { aspect-ratio: 16 / 11; }

/* dark text on lighter accent panels — make sure contrast holds on mobile */
@media (max-width: 768px) {
  .lf-feature { background: rgba(255,255,255,.18); }
}

/* ═════════════════════════════════════════════════════════════════════
   v1.2 — Hard-hide mbar on desktop · Showcase clip thumbnails ·
          Conversion-focused micro-animations (3D tilt, counter, glow)
   ═════════════════════════════════════════════════════════════════════ */

/* Hard guarantee: the sticky bottom bar is mobile-only. */
@media (min-width: 769px) {
}

/* Showcase clip — poster always visible, centered play overlay until played */
.lf-clip {
  cursor: pointer;
}
.lf-clip__video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #1a1f2e;
}
.lf-clip__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: #0a1020;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transition: transform .25s ease, opacity .25s ease, background .2s ease;
  z-index: 2;
}
.lf-clip__play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.lf-clip__play svg { width: 26px; height: 26px; margin-left: 3px; pointer-events: none; }
.lf-clip.is-playing .lf-clip__play { opacity: 0; pointer-events: none; }
.lf-clip:hover .lf-clip__cap { opacity: 1; }

/* 3D card tilt — vanilla, perspective-based; JS sets --rx/--ry on mousemove */
.lf-pill,
.lf-plan,
.lf-earn-card,
.lf-review,
.lf-step {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, background .2s ease;
}
.lf-tilt {
  transform: perspective(1000px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg)) translateZ(0);
  box-shadow: var(--lf-shadow-md);
}
@media (hover: none) {
  /* no hover on touch → disable tilt to avoid jitter */
  .lf-tilt { transform: none !important; }
}

/* Stagger reveal — JS sets --rv-delay per item index */
.lf-rv { transition-delay: var(--rv-delay, 0s); }

/* Primary CTA glow pulse (subtle, hover only — avoids constant motion) */
@keyframes lfGlow {
  0%,100% { box-shadow: 0 8px 24px color-mix(in srgb, var(--lf-accent) 45%, transparent); }
  50%     { box-shadow: 0 12px 38px color-mix(in srgb, var(--lf-accent) 70%, transparent); }
}
.lf-btn--primary:hover { animation: lfGlow 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .lf-btn--primary:hover { animation: none; }
}

/* Animated stat numbers — slight scale-in on reveal */
.lf-stat.is-in .lf-stat__n {
  animation: lfStatPop .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes lfStatPop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Floating hero card subtle parallax — only on desktop */
@media (min-width: 980px) and (prefers-reduced-motion: no-preference) {
  .lf-hero__form {
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .lf-hero:hover .lf-hero__form { transform: translateY(-4px); }
}

/* Pill icon — slight bounce on card hover */
.lf-pill { position: relative; }
.lf-pill:hover .lf-pill__icon {
  animation: lfBounce .55s ease;
}
@keyframes lfBounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-4px); }
  70%     { transform: translateY(0); }
}

/* Premium gradient sheen on top section heads (subtle) */
.lf-section__head h2 {
  background: linear-gradient(135deg, var(--lf-ink) 0%, var(--lf-accent-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* fallback for browsers that don't support background-clip:text */
  color: var(--lf-ink);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lf-section__head h2 { color: var(--lf-ink); }
}

/* Sticky-CTA hint pulse on phones — gently draws attention to the mbar Apply button */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
}
@keyframes lfPulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: .5; }
  70%  { box-shadow: 0 0 0 14px currentColor; opacity: 0; }
  100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; }
}

/* ═════════════════════════════════════════════════════════════════════
   v1.4 — Authentic-content sections: hero kicker, About, Techniques,
          Course Modules, Tuition terms, Entrance Requirements
   ═════════════════════════════════════════════════════════════════════ */

/* hero headline pieces */
.lf-hero__kicker {
  display: inline-block; margin: 0 0 .8rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lf-sky);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  padding: .35rem .8rem; border-radius: var(--lf-r-pill);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* H1 colored midline ("Barber Program.") — accent tint, full inherit weight */
.lf-h1__b {
  display: inline;
  color: var(--lf-accent);
}
/* H1 script tagline ("Start Today.") — italic serif, accented, underlined */
.lf-h1__script {
  display: inline-block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--lf-accent);
  border-bottom: 3px solid var(--lf-accent);
  padding-bottom: 2px;
  line-height: 1;
}

/* Kill any inherited border-radius on hero image surfaces — edge-to-edge */
.lf-hero,
.lf-mhero,
.lf-mhero__bg,
.lf-hero__form { border-radius: 0; }
.lf-hero__form { border-radius: var(--lf-r-lg); }  /* form card keeps its radius */

/* form label + section */
.lf-form__label {
  display: block; font-size: .82rem; font-weight: 600; color: var(--lf-muted);
  margin-bottom: .3rem;
}

/* About the Program */
.lf-about { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 900px) { .lf-about { grid-template-columns: 1.7fr 1fr; align-items: start; } }
.lf-about__body p { margin: 0 0 1rem; color: var(--lf-muted); font-size: 1rem; line-height: 1.7; }
.lf-about__card {
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1.4rem; box-shadow: var(--lf-shadow-md);
}
.lf-about__card h3 { margin: 0 0 .6rem; color: var(--lf-ink); }
.lf-about__addr, .lf-about__phone { margin: 0 0 .5rem; display: flex; align-items: flex-start; gap: .4rem; color: var(--lf-muted); font-size: .95rem; }
.lf-about__addr svg { flex: 0 0 auto; color: var(--lf-accent); margin-top: 2px; }
.lf-about__phone a { color: var(--lf-accent-dark); font-weight: 700; display: inline-flex; gap: .35rem; align-items: center; }
.lf-map { margin-top: .9rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); aspect-ratio: 16 / 10; background: #eaeef5; }
.lf-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.lf-map-reviews { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; font-weight: 800; font-size: .9rem; color: var(--lf-accent-dark); text-decoration: none; }
.lf-map-reviews:hover { text-decoration: underline; }
.lf-about__details { list-style: none; padding: .9rem 0 0; margin: .9rem 0 0; border-top: 1px solid var(--lf-line); display: grid; gap: .4rem; }
.lf-about__details li { color: var(--lf-muted); font-size: .9rem; }
.lf-about__details b { color: var(--lf-ink); }

/* Techniques chip grid */
.lf-tech-grid { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.lf-tech {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--lf-accent-soft); color: var(--lf-accent-dark);
  border: 1px solid color-mix(in srgb, var(--lf-accent) 35%, transparent);
  padding: .5rem .9rem; border-radius: var(--lf-r-pill);
  font-weight: 600; font-size: .9rem;
}
.lf-tech svg { color: var(--lf-accent); }

/* Course Modules */
.lf-modules { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .lf-modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lf-modules { grid-template-columns: repeat(3, 1fr); } }
.lf-module {
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: 1.4rem; box-shadow: var(--lf-shadow-sm);
}
.lf-module__n {
  font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700;
  color: var(--lf-accent); line-height: 1; margin-bottom: .4rem;
}
.lf-module h3 { margin: 0 0 .7rem; color: var(--lf-ink); }
.lf-module__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.lf-module__list li { position: relative; padding-left: 1.2rem; color: var(--lf-muted); font-size: .92rem; }
.lf-module__list li::before { content: '·'; position: absolute; left: .3rem; color: var(--lf-accent); font-weight: 800; }

/* Tuition — richer plan card */
.lf-plan__sched { color: var(--lf-ink); font-weight: 600; font-size: .9rem; margin-top: .2rem; }
.lf-plan__hours { color: var(--lf-soft-ink); font-size: .82rem; margin: .15rem 0 .6rem; }
.lf-plan__terms { color: var(--lf-muted); font-size: .88rem; line-height: 1.5; margin-bottom: 1rem; }
.lf-plan__badge {
  position: absolute; top: -.7rem; right: 1rem;
  background: var(--lf-accent); color: var(--lf-on-accent);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: var(--lf-r-pill);
}
.lf-plan { position: relative; display: flex; flex-direction: column; }
.lf-plan__cta { margin-top: auto; }
.lf-tuition__note {
  max-width: 760px; margin: 1.6rem auto 0; text-align: center;
  color: var(--lf-soft-ink); font-size: .85rem; line-height: 1.6;
}

/* Entrance Requirements */
.lf-reqs { list-style: none; padding: 0; margin: 0 auto; max-width: 760px;
  display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 720px) { .lf-reqs { grid-template-columns: repeat(2, 1fr); } }
.lf-req {
  display: flex; align-items: flex-start; gap: .6rem;
  background: #fff; border: 1px solid var(--lf-line); border-radius: var(--lf-r-md);
  padding: .9rem 1.1rem; box-shadow: var(--lf-shadow-sm);
  color: var(--lf-ink); font-weight: 600; font-size: .95rem;
}
.lf-req svg { flex: 0 0 auto; color: var(--lf-accent); margin-top: 1px; }

/* Footer address line */
.lf-footer__addr { color: var(--lf-soft-ink); font-size: .9rem; margin: 0 0 1.3rem;
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.lf-footer__addr svg { color: var(--lf-accent); }
.lf-footer__addr a { color: var(--lf-accent-dark); font-weight: 700; }

/* tilt now also applies to module + review + req + plan cards */
.lf-module, .lf-req { transform-style: preserve-3d; will-change: transform;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }

@media (max-width: 768px) {
  .lf-about__card { padding: 1.1rem; }
  .lf-tech { font-size: .84rem; padding: .45rem .75rem; }
  .lf-plan__badge { right: .7rem; }
}

/* ===================================================================
   MOBILE PARITY PASS — match www.abi.edu mobile design
   Affects only screens ≤ 768px. Desktop layout unchanged.
   =================================================================== */

/* ─ Topbar: promo + phone chips ─ */
/* v3.6 — promo strip stays on ONE line at every width, in EN + ES */
.lf-topbar__promo {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(.62rem, 2.6vw, .92rem);
  letter-spacing: 0;
  line-height: 1.25;
}
.lf-topbar__chips { display: none; }

@media (max-width: 768px) {
  .lf-topbar {
    padding: .85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    text-align: center;
  }
  /* v3.7 — mobile promo shrinks-to-fit so 'Start your barber journey today...'
     stays on one line without clipping on the narrowest phones */
  .lf-topbar__promo {
    font-size: clamp(.52rem, 2.9vw, .82rem);
    letter-spacing: .03em;
    line-height: 1.25;
    white-space: nowrap;
  }
  /* v2.11 — Manhattan shows EN | ES side-by-side (no wrap), Bronx single chip */
  .lf-topbar__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: .45rem;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .lf-topbar__chip {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .4rem .6rem;
    border-radius: var(--lf-r-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .lf-topbar__chip b { font-weight: 800; opacity: .85; }
  .lf-topbar__chip svg { opacity: .9; }
}

/* v3.9 — "Limited Seats" as two text lines (no boxed banner).
   Line 1: 🔴 LIMITED SEATS AVAILABLE (gold, large, with pulsing dot)
   Line 2: ENROLLMENT NOW OPEN (gold, slightly smaller)                   */
.lf-seats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .65rem;
  row-gap: .15rem;
  padding: .9rem 1rem .8rem;
  background: transparent;
  border: 0;
  text-align: center;
}
.lf-seats__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e23d3d;
  box-shadow: 0 0 0 5px rgba(226, 61, 61, .20);
  animation: lf-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lf-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(226, 61, 61, .20); }
  50%      { box-shadow: 0 0 0 10px rgba(226, 61, 61, .06); }
}
.lf-seats__kicker {
  font-weight: 900;
  letter-spacing: .06em;
  color: #8a6500;
  text-transform: uppercase;
  font-size: clamp(1rem, 4vw, 1.35rem);
  line-height: 1.15;
}
.lf-seats__lead {
  /* force to row 2: spans the full width so it wraps below the dot+kicker */
  flex-basis: 100%;
  font-weight: 800;
  letter-spacing: .04em;
  /* v3.8 — match the screenshot: both lines in the same gold */
  color: #8a6500;
  text-transform: uppercase;
  font-size: clamp(.85rem, 3.4vw, 1.1rem);
  line-height: 1.2;
}

@media (max-width: 520px) {
  .lf-seats { padding: .8rem .6rem; column-gap: .5rem; }
  .lf-seats__dot { width: 10px; height: 10px; }
}

/* ─ Mobile dark theme: hero, features, form, voices all dark navy ─ */
@media (max-width: 768px) {
  /* Continuous dark surface from hero through Student Voices */
  .lf-mhero { background: #0a1226; }
  .lf-hero {
    background: #0a1226;
    color: #fff;
    padding: 1.6rem 0 1.4rem;
  }
  .lf-hero h1,
  .lf-hero .lf-h1,
  .lf-hero__sub { color: #fff; text-shadow: none; }
  .lf-hero__sub { color: rgba(255,255,255,.86); }
  .lf-hero__sub b { color: #fff; }

  /* Feature chips: dark pill cards with circular icon background — mobile stacks 1-col
     (reset display back to flex so the desktop grid rule doesn't leak into mobile) */
  .lf-features {
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    gap: .55rem;
    align-items: stretch;
    margin: .2rem 0 1.2rem;
    max-width: none;
  }
  .lf-feature {
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    padding: .85rem 1rem;
    border-radius: 14px;
    text-shadow: none;
    box-shadow: none;
    font-size: .92rem;
    font-weight: 600;
    text-align: left;
  }
  .lf-feature svg {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    padding: 8px;
    border-radius: 50%;
    background: rgba(91, 142, 255, .22);
    color: #9bc1ff;
  }

  /* Countdown card on dark theme */
  .lf-cd {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 14px;
    padding: 1.1rem;
    margin-bottom: 1.3rem;
    box-shadow: none;
  }
  .lf-cd__h, .lf-cd__sub { color: #fff; }
  .lf-cd__label { color: rgba(255,255,255,.7); font-weight: 600; }
  .lf-cd__date { color: #ffd470; }
  .lf-cd__cell {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: .5rem .25rem;
  }
  .lf-cd__cell b { color: #fff; }
  .lf-cd__cell span { color: rgba(255,255,255,.7); }

  /* Form card: white card with icon-prefixed inputs + labels above */
  .lf-form {
    border-radius: 18px;
    padding: 1.4rem 1.1rem;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
  }
  .lf-form__h {
    display: flex; align-items: center; gap: .65rem;
    margin-bottom: .25rem;
  }
  .lf-form__h::before {
    content: "";
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--lf-sky-deep) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/18px no-repeat;
    flex: 0 0 36px;
  }
  .lf-form__row { margin-bottom: .9rem; }
  .lf-form__row--2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .lf-form__row--2 > * { margin: 0; }

  /* Student Voices section sits on dark too */
  .lf-page .lf-section:has(.lf-reel) { background: #0a1226; color: #fff; }
  .lf-page .lf-section:has(.lf-reel) .lf-eyebrow { color: #9bc1ff; }
  .lf-page .lf-section:has(.lf-reel) .lf-h2 { color: #fff; }
  .lf-page .lf-section:has(.lf-reel) .lf-lead { color: rgba(255,255,255,.78); }

  /* Stats — 2x2 blue block instead of inline row */
  .lf-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--lf-sky-deep);
    border-radius: 0;
    padding: 1.4rem 1rem;
    margin: 0 -1rem;  /* full-bleed */
  }
  .lf-stat { background: transparent !important; box-shadow: none !important; padding: 1rem .5rem !important; text-align: center; }
  .lf-stat__n { color: #fff !important; font-size: 2.2rem !important; }
  .lf-stat__label { color: rgba(255,255,255,.85) !important; }
  /* lift the bg-alt off the stats section so the blue block sits clean */
  .lf-section--tight { padding: 0 !important; background: transparent !important; }

  /* AI-labeled chat bubble (replace plain chat icon) */
  .lf-chat {
    background: var(--lf-sky-deep) !important;
    color: #fff !important;
    position: fixed !important;
    right: 16px !important;
    bottom: 90px !important;
    width: 56px !important; height: 56px !important;
    z-index: 55;
  }
  .lf-chat::after {
    content: "AI";
    position: absolute;
    top: -6px; right: -6px;
    background: #28e07a;
    color: #00280f;
    font-size: .68rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    border: 2px solid #fff;
  }

  /* Hide phone num text in header (chips above already serve it) */
  .lf-hdr__right .lf-phone { display: none; }
}

/* ───── Image hero (lf-mhero) — photo-first on ALL breakpoints ───── */
/* Full-bleed image with the headline overlaid at 75% of the image; the lead
   form + supporting details sit in the .lf-hero band directly below. */
.lf-mhero {
  /* Client 2026-07-14: text sits AFTER (below) the photo, not overlaid on it.
     Position:relative container; the __bg absolute-fills only the top band via
     the ::before spacer trick, and __copy sits statically below in normal flow. */
  display: block;
  position: relative;
  width: 100%;
  background: transparent;
  isolation: isolate;
}
.lf-mhero::before {
  content: "";
  display: block;
  width: 100%;
  height: 62vh;
  min-height: 460px;
  max-height: 720px;
  background: #0a1020;
}
.lf-mhero__bg {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%;
  height: 62vh;
  min-height: 460px;
  max-height: 720px;
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
  filter: brightness(1.12) contrast(1.05) saturate(1.05);
}
.lf-mhero__scrim {
  position: absolute; inset: 0;
  background:
    none;
  z-index: 1;
}
.lf-mhero__copy {
  /* Sits BELOW the photo band (client 2026-07-14: text starts after image ends). */
  position: relative;
  z-index: 2;
  color: var(--lf-ink, #10131a);
  text-align: left;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.6rem clamp(1.2rem, 5vw, 3.2rem) 1.6rem;
  background: #fff;
}
.lf-mhero__kicker {
  display: block;
  margin: 0 0 .55rem;
  padding: 0;
  background: transparent;
  color: var(--lf-accent-dark, #1b2fd9);
  font-size: clamp(.72rem, 1vw, .92rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-shadow: none;
}
.lf-mhero__h1 {
  font-family: 'Oswald', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
  color: var(--lf-ink, #10131a);
  text-shadow: none;
}
.lf-mhero__h1 span {
  display: block;
  color: var(--lf-accent);
  font-weight: 600;
}
.lf-mhero__h1 em {
  display: inline-block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: .82em;
  margin-top: .25em;
  color: var(--lf-accent);
  border-bottom: 3px solid var(--lf-accent);
  padding-bottom: 2px;
  line-height: 1;
  text-shadow: none;
}
/* Hero CTA is hidden — the lead form sits directly below the photo on every breakpoint. */
.lf-mhero__cta { display: none; }

/* The photo hero carries the headline — hide the duplicate in the .lf-hero band. */
.lf-hero__kicker,
.lf-hero .lf-h1,
.lf-hero__sub { display: none; }

@media (max-width: 768px) {
  /* Mobile hero mirrors the abi.edu homepage hero (.hx) EXACTLY: the image is a
     top band sized by aspect ratio (height = 66.2vw, `top center / cover`), a
     gradient fades it into the dark section, and the headline begins at ~75% of
     the image band (content padding-top = 49.6vw). This matches the homepage. */
  .lf-mhero {
    height: auto;
    min-height: 66.2vw;
    max-height: none;
    background: #0a1226;
  }
  .lf-mhero__bg {
    top: 0; bottom: auto;
    height: 66.2vw;
    object-position: top center;
    filter: none;
  }
  .lf-mhero__scrim {
    top: 0; bottom: auto;
    height: 66.4vw;
    background:
      linear-gradient(180deg, rgba(6,9,18,0) 0%, rgba(6,9,18,0) 60%, rgba(6,9,18,.10) 80%, rgba(6,9,18,.20) 100%);
  }
  .lf-mhero__copy {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    max-width: none;
    margin: 0;
    /* headline begins at ~75% of the image band, exactly like the homepage */
    padding: 49.6vw 1.2rem 1.4rem;
  }
  .lf-mhero__kicker { font-size: .72rem; }
  .lf-mhero__h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  /* CTA hidden on mobile — hero form directly below + sticky bottom bar carry the action. */
  .lf-mhero__cta { display: none; }
  /* Leave room at the bottom for the sticky 3-CTA bar */
  body.lf-page { padding-bottom: 88px; }
}

/* ───── Mobile-only sticky 3-CTA footer bar ───── */
.lf-mcta { display: none; }

@media (max-width: 768px) {
  .lf-mcta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .55rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: .65rem .7rem calc(18px + env(safe-area-inset-bottom, 0px));
    background: #0c1424;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
  }
  .lf-mcta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    padding: .78rem .55rem;
    border-radius: 12px;
    font-family: 'Oswald', 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid transparent;
    transition: transform .12s ease, filter .15s ease;
    white-space: nowrap !important;
  }
  .lf-mcta__btn:active { transform: scale(.97); }
  .lf-mcta__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .lf-mcta__btn--call {
    background: #0e1422;
    border-color: rgba(255, 255, 255, .22);
  }
  .lf-mcta__btn--text {
    background: #1b3bd9;
  }
  .lf-mcta__btn--apply {
    background: #d4a83b;
    color: #1a1205;
    font-weight: 800;
  }
  /* Hide the floating chat bubble while the sticky bar is up (mobile only) */
  .lf-chat { display: none !important; }
}

/* ───── Contact box (campus-aware) ───── */
.lf-contact {
  max-width: 720px;
  margin: 0 auto;
}
.lf-contact__card {
  background: #fff;
  border: 1px solid var(--lf-line);
  border-top: 4px solid var(--lf-accent);
  border-radius: var(--lf-r-lg);
  padding: 1.8rem 2rem;
  box-shadow: var(--lf-shadow-md);
}
.lf-contact__card .lf-h3 {
  color: var(--lf-accent-dark);
  margin: 0 0 1.1rem;
  font-size: 1.35rem;
}
.lf-contact__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .8rem 1rem;
  align-items: start;
  margin: 0 0 .9rem;
  padding: 0;
  font-size: .98rem;
  color: var(--lf-ink);
  line-height: 1.5;
}
.lf-contact__row:last-child { margin-bottom: 0; }
.lf-contact__label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  color: var(--lf-soft-ink);
  padding-top: .2rem;
}
.lf-contact__val { color: var(--lf-ink); display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.lf-contact__val svg { color: var(--lf-accent); flex: 0 0 auto; }
.lf-contact__map {
  color: var(--lf-accent-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--lf-accent) 60%, transparent);
  text-underline-offset: 3px;
}
.lf-contact__map:hover { text-decoration-color: var(--lf-accent); }
a.lf-contact__val:hover { color: var(--lf-accent-dark); }

.lf-contact__phones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.lf-contact__phone {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.lf-contact__phone a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--lf-accent-dark);
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: .01em;
}
.lf-contact__phone a:hover { color: var(--lf-accent); }
.lf-contact__phone svg { color: var(--lf-accent); flex: 0 0 auto; }
.lf-contact__num { font-variant-numeric: tabular-nums; }
.lf-contact__tag {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .22rem .55rem;
  border-radius: var(--lf-r-pill);
  background: var(--lf-accent-soft);
  color: var(--lf-accent-dark);
  border: 1px solid color-mix(in srgb, var(--lf-accent) 30%, transparent);
}

@media (max-width: 640px) {
  .lf-contact__card { padding: 1.3rem 1.1rem; }
  .lf-contact__row { grid-template-columns: 1fr; gap: .25rem; }
  .lf-contact__label { padding-top: 0; }
  .lf-contact__phone a { font-size: 1rem; }
}

/* ═════════════════════════════════════════════════════════════════════
   v3.7 — Career Earnings section (ports main-site sec--earnings)
   Renders directly below the 3 Easy Steps section.
   ═════════════════════════════════════════════════════════════════════ */
.lf-section--earn { padding: 3rem 0 3.4rem; }
.lf-earn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1.4rem auto 0;
  max-width: 1160px;
  padding-inline: .4rem;
}
@media (min-width: 760px) {
  .lf-earn {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.8rem, 3.8vw, 2.8rem);
    padding-inline: 1rem;
  }
}
.lf-earn__card {
  background: #fff;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-r-md);
  padding: 1.4rem 1.2rem 1.3rem;
  box-shadow: var(--lf-shadow-sm);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lf-earn__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lf-shadow-md);
}
.lf-earn__yr {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lf-accent);
  margin-bottom: .55rem;
}
.lf-earn__amt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--lf-ink);
  margin-bottom: .55rem;
}
.lf-earn__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--lf-muted);
}
.lf-earn__note {
  margin: 1.4rem auto 0;
  max-width: 900px;
  padding-inline: 1rem;
  color: var(--lf-muted);
  font-size: .8rem;
  text-align: center;
  line-height: 1.5;
}

/* ═══════════ v45 — LANDING HEADER (main-site pattern) ═══════════
   Desktop 2 rows: [logo · promo · phones · EN|ES] sticky / seats.
   Mobile 4 rows:  [logo · EN|ES] sticky / promo / phones row / seats. */
.lfx-bar{position:sticky;top:0;z-index:90;background:#fff;box-shadow:0 4px 16px rgba(15,30,80,.12)}
.lfx-bar__in{display:flex;align-items:center;gap:.8rem;width:100%;padding:.55rem 1.3rem}
.lfx-logo{flex-shrink:0;display:inline-flex}
.lfx-logo img{height:62px;width:auto;display:block}
/* promo text inline inside bar — desktop only */
.lfx-promo-inline{flex:1;min-width:0;text-align:center;font-weight:800;font-size:clamp(.82rem,1.4vw,1.08rem);letter-spacing:.07em;text-transform:uppercase;color:var(--lf-accent-dark,#1b2fd9);line-height:1.3;padding:.2rem .3rem}
.lfx-promo-inline b{font-weight:900;color:var(--lf-ink,#10131a)}
.lfx-phones{display:flex;align-items:center;gap:.45rem}
.lfx-phones--bar{flex-shrink:0;justify-content:center;min-width:0}
.lfx-phone{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;border:1.5px solid var(--lf-accent);border-radius:12px;padding:.38rem .85rem;color:var(--lf-ink,#10131a);font-weight:800;font-size:.96rem;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,transform .2s}
.lfx-phone svg{color:var(--lf-accent);flex-shrink:0}
.lfx-phone:hover{background:var(--lf-accent);color:var(--lf-on-accent);transform:translateY(-1px)}
.lfx-phone:hover svg{color:var(--lf-on-accent)}
.lfx-phone__num{font-variant-numeric:tabular-nums;font-size:.96rem;line-height:1.1}
.lfx-phone__lab{display:inline-flex;align-items:center;gap:.22rem;font-size:.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--lf-accent);line-height:1}
.lfx-phone__lab svg{width:11px;height:11px}
.lfx-phone:hover .lfx-phone__lab{color:var(--lf-on-accent)}
.lfx-lang{flex-shrink:0;margin-left:auto}
/* Manhattan landing page only (client 2026-07-20): center the header phone
   numbers between the logo and language toggle, and make them larger. The
   margin-left:auto here + the one on .lfx-lang split the free space evenly,
   centering the phone group. Scoped to the Manhattan theme class so the
   Bronx funnel is unaffected. Desktop header only (.lfx-phones--bar). */
.lf-page--mhtn-en .lfx-phones--bar,
.lf-page--mhtn-es .lfx-phones--bar{margin-left:auto}
.lf-page--mhtn-en .lfx-phones--bar .lfx-phone,
.lf-page--mhtn-es .lfx-phones--bar .lfx-phone{font-size:1.12rem;padding:.5rem 1.1rem}
.lf-page--mhtn-en .lfx-phones--bar .lfx-phone__num,
.lf-page--mhtn-es .lfx-phones--bar .lfx-phone__num{font-size:1.22rem}
.lf-page--mhtn-en .lfx-phones--bar .lfx-phone__lab,
.lf-page--mhtn-es .lfx-phones--bar .lfx-phone__lab{font-size:.66rem}
/* Bronx landing page (client 2026-07-21): same treatment for the (718) number
   — center the header phone between the logo and language toggle and enlarge
   it. Scoped to the Bronx theme class; desktop header only (.lfx-phones--bar). */
.lf-page--brnx-en .lfx-phones--bar,
.lf-page--brnx-es .lfx-phones--bar{margin-left:auto}
.lf-page--brnx-en .lfx-phones--bar .lfx-phone,
.lf-page--brnx-es .lfx-phones--bar .lfx-phone{font-size:1.12rem;padding:.5rem 1.1rem}
.lf-page--brnx-en .lfx-phones--bar .lfx-phone__num,
.lf-page--brnx-es .lfx-phones--bar .lfx-phone__num{font-size:1.22rem}
.lf-page--brnx-en .lfx-phones--bar .lfx-phone__lab,
.lf-page--brnx-es .lfx-phones--bar .lfx-phone__lab{font-size:.66rem}
/* Manhattan ES funnel (client 2026-07-20): the Spanish hero headline
   "OPERADOR DE BARBERO" wraps to a 2nd line at the English size, making the
   whole left column (chips + countdown) sit lower than the English page.
   Size it down just enough to keep it on one line, matching the English
   line count and vertical rhythm. Desktop only; mobile keeps its own sizing. */
@media (min-width:769px){
  .lf-page--mhtn-es .hx-h1 .hx-l1,
  .lf-page--mhtn-es .hx-h1 .hx-l2{font-size:clamp(2rem,3.55vw,3.5rem)}
}
/* full-width promo strip below the sticky bar (client 2026-07-14: was
   rendering as unstyled body text because this rule was missing on edu) */
.lfx-promo{background:var(--lf-accent);color:var(--lf-on-accent);text-align:center;font-weight:800;font-size:clamp(.92rem,1.6vw,1.25rem);letter-spacing:.1em;text-transform:uppercase;line-height:1.45;padding:.85rem 1rem}
.lfx-promo b{font-weight:900;color:var(--lf-accent-soft)}
.lfx-phone__flag{display:inline-grid;place-items:center;min-width:30px;height:21px;padding:0 .35rem;border:1.6px solid var(--lf-accent);border-radius:6px;font-size:.66rem;font-weight:900;letter-spacing:.05em;color:var(--lf-accent)}
/* standalone promo — mobile only */
.lfx-promo--mob{display:none;background:var(--lf-accent);color:var(--lf-on-accent);text-align:center;font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;padding:.5rem .7rem}
.lfx-promo--mob b{font-weight:900;color:var(--lf-accent-soft)}
.lfx-phonerow{display:none}
.lfx-seats{display:flex;align-items:center;justify-content:center;gap:.65rem;background:var(--lf-accent-soft);padding:.6rem 1rem}
.lfx-star{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#10131a;color:var(--lf-accent);border:2px solid var(--lf-accent-dark);flex-shrink:0}
.lfx-seats-t{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.lfx-seats-t b{font-weight:900;letter-spacing:.05em;color:#10131a;text-transform:uppercase;font-size:1rem}
.lfx-seats-t i{font-style:normal;font-weight:800;letter-spacing:.04em;color:var(--lf-accent-dark);text-transform:uppercase;font-size:.82rem}
/* narrow desktop */
@media (min-width:769px) and (max-width:1080px){
  .lfx-logo img{height:48px}
  .lfx-promo-inline{font-size:clamp(.66rem,1vw,.8rem)}
  .lfx-phone{font-size:.82rem;padding:.28rem .55rem}
  .lfx-phone__num{font-size:.82rem}
  .lfx-bar__in{gap:.55rem;padding:.45rem .9rem}
}
/* MOBILE — promo-inline hides, standalone shows */
@media (max-width:768px){
  .lfx-promo-inline{display:none}
  .lfx-promo--mob{display:block}
  .lfx-phones--bar{display:none}
  .lfx-bar__in{padding:.45rem .6rem;gap:.5rem}
  .lfx-logo img{height:42px}
  .lfx-phonerow{display:flex;justify-content:center;align-items:stretch;gap:.35rem;background:var(--lf-accent);padding:.15rem .5rem .6rem;flex-wrap:nowrap;max-width:100%}
  .lfx-phonerow .lfx-phone{flex:1 1 0;justify-content:center;border:1.5px solid color-mix(in srgb,var(--lf-on-accent) 72%,transparent);color:var(--lf-on-accent);background:rgba(0,0,0,.16);padding:.3rem .3rem;gap:.12rem;min-width:0}
  .lfx-phonerow .lfx-phone__num{font-size:clamp(.6rem,2.7vw,.82rem)}
  .lfx-phonerow .lfx-phone__lab{color:var(--lf-on-accent);font-size:clamp(.48rem,2.1vw,.6rem);gap:.12rem}
  .lfx-phonerow .lfx-phone__lab svg{width:9px;height:9px;color:var(--lf-on-accent)}
  .lfx-seats{padding:.5rem .7rem;gap:.45rem}
  .lfx-star{width:28px;height:28px}
  .lfx-seats-t b{font-size:.82rem}
  .lfx-seats-t i{font-size:.7rem}
}
@media (max-width:400px){
  .lfx-logo img{height:38px}
  .lfx-phonerow{gap:.25rem;padding-left:.35rem;padding-right:.35rem}
  .lfx-phonerow .lfx-phone{padding:.3rem .35rem;gap:.18rem}
  .lfx-phonerow .lfx-phone svg{width:11px;height:11px}
}
@media (max-width:340px){
  .lfx-phonerow .lfx-phone{padding:.28rem .3rem;gap:.16rem}
}
/* v45.1 — wallet chip second line: flexible payment plans */
.lf-feature__sub{display:block;font-style:normal;font-weight:800;font-size:.86em;letter-spacing:.02em;margin-top:.2rem;color:var(--lf-accent-dark)}
.lf-hero .lf-feature__sub,.lf-mhero .lf-feature__sub{color:inherit;opacity:.92}

/* v47 — GHL form embed on landing pages: force visible + compact */
.lf-form--ghl{background:#fff;border-radius:var(--lf-r-lg,22px);padding:.8rem .9rem .9rem;box-shadow:var(--lf-shadow-md)}
.lf-form--ghl .lf-form__h{font-size:1rem;margin-bottom:.3rem}
.lf-form--ghl .lf-form__sub{font-size:.78rem;margin-bottom:.5rem}
.ghl-form-wrap{min-height:0!important}
.ghl-form-wrap .ep-iFrameContainer,.ghl-form-wrap .ep-wrapper{height:auto!important;min-height:0!important}
.ghl-form-wrap iframe{position:static!important;left:0!important;top:0!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;display:block!important;width:100%!important;min-height:0!important}

/* ═══════════ v48 — chat widget: proper placement, no overlap ═══════════ */
chat-widget{position:fixed!important;bottom:20px!important;right:20px!important;z-index:9999!important}
@media(max-width:768px){chat-widget{bottom:140px!important;right:12px!important}}


/* ── mobile: swap long language labels for EN/ES via data-short. Client
      2026-07-14: full words break the mobile navbar on landing pages. ── */
@media (max-width: 768px) {
  .lf-lang a[data-short],
  .lfx-lang a[data-short],
  .seg-lang .seg-lab[data-short]{font-size:0!important;letter-spacing:0!important}
  .lf-lang a[data-short]::before,
  .lfx-lang a[data-short]::before,
  .seg-lang .seg-lab[data-short]::before{
    content:attr(data-short);
    font-size:.78rem;letter-spacing:.06em;font-weight:600;
  }
}


.ghl-form-wrap{width:100%}

/* ── Grayscale (Colorless) overrides for Hero & Contact Box ── */
.hx-l2,
.hx-next-date,
.hx-sub b {
  color: var(--ink, #0a1020) !important;
}
.hx-script::after {
  background: var(--ink, #0a1020) !important;
}
.hx-chip svg {
  color: var(--ink, #0a1020) !important;
}
.hx-chip--fin i {
  color: #475467 !important;
}
.formcard-ico {
  background: var(--ink, #0a1020) !important;
}
.hx-cell b {
  color: var(--ink, #0a1020) !important;
}
.hx-cell span {
  color: #475467 !important;
}
.hx-cell {
  background: #f8f9fa !important;
  border-color: #d1d5db !important;
}
.hx-next {
  border-color: #d1d5db !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.hx-chip {
  border-color: #d1d5db !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* Reduce vertical gap between the contact box ending and the next section */
.lf-page .hx-in {
  padding-bottom: 0.8rem !important;
}
.lf-page main > .lf-section:first-of-type {
  padding-top: 1.2rem !important;
}

/* Pulsing SVG loading skeleton for GHL forms to prevent blank white flashes during script loading */
.ghl-form-wrap {
  position: relative;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 400 480'%3E%3Cstyle%3E@keyframes pulse%7B0%25,100%25%7Bopacity:.4%7D50%25%7Bopacity:.85%7D%7D.sk%7Bfill:%23f3f4f6;animation:pulse 1.5s infinite ease-in-out%7D.sk-btn%7Bfill:%23e5e7eb;animation:pulse 1.5s infinite ease-in-out%7D%3C/style%3E%3Crect class='sk' x='24' y='20' rx='8' ry='8' width='352' height='46' /%3E%3Crect class='sk' x='24' y='86' rx='8' ry='8' width='352' height='46' /%3E%3Crect class='sk' x='24' y='152' rx='8' ry='8' width='352' height='46' /%3E%3Crect class='sk' x='24' y='218' rx='8' ry='8' width='352' height='46' /%3E%3Crect class='sk' x='24' y='284' rx='8' ry='8' width='352' height='46' /%3E%3Crect class='sk-btn' x='24' y='360' rx='24' ry='24' width='352' height='48' /%3E%3C/svg%3E") no-repeat center top !important;
  background-size: 100% 100% !important;
}