/* ============================================================
   The Celebration Life — Master Stylesheet
   Served via: https://gecko369.github.io/tcl-theme/style.css
   Phase 1: Foundation — vars, typography, buttons, keyframes
   v40
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800;12..96,900&family=Figtree:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

/* ── Custom Properties ────────────────────────────────────── */
:root {
  /* Brand palette */
  --brand-teal:        #15C4AF;
  --brand-yellow:      #FFCA08;
  --brand-orange:      #F58220;
  --brand-sky:         #8CD1ED;
  --brand-blue:        #27AAE1;
  --brand-dark:        #231F20;

  /* Backgrounds */
  --color-bg:          #FFFFFF;
  --color-bg-warm:     #F9E0BB;
  --color-bg-teal:     #15C4AF;
  --color-bg-sky:      #8CD1ED;
  --color-bg-dark:     #0D3347;

  /* Text */
  --color-text:        #2C3E50;
  --color-text-dark:   #1A2E3B;
  --color-text-light:  #5A7A8A;
  --color-text-white:  #FFFFFF;

  /* Actions */
  --color-action:      #F58220;
  --color-action-alt:  #15C4AF;
  --color-link:        #27AAE1;

  /* Sunni */
  --color-sunni:       #F58220;

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  10rem;
}

/* ── Base Reset ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── Body ─────────────────────────────────────────────────── */
body {
  font-family: 'Figtree', sans-serif !important;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-dark);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  line-height: 1.15;
  color: var(--color-text-dark);
  margin-top: 0;
}

/* BD widget headings — exact selectors from widget PHP */
h2.streaming-title,
h3.pic-title,
.streaming-title,
.pic-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
}

/* Pic-caption titles must stay white — they sit on dark image overlays */
.pic-caption h3,
.pic-caption .pic-title,
h3.pic-title {
  color: #FFFFFF !important;
}

/* Streaming section titles — override BD inline color style */
h2.streaming-title {
  color: var(--color-text-dark) !important;
}

h1 {
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  font-weight: 900;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.5rem) !important;
  font-weight: 800;
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-weight: 700;
}

h4 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
  font-weight: 700;
}

h5, h6 {
  font-weight: 700;
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-teal);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-tcl,
.btn-tcl-outline,
.btn-tcl-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

/* Primary — orange fill */
.btn-tcl {
  background-color: var(--color-action);
  color: #FFFFFF;
  border-color: var(--color-action);
}

.btn-tcl:hover {
  background-color: #d96e14;
  border-color: #d96e14;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245,130,32,0.35);
}

/* Secondary — teal outline */
.btn-tcl-outline {
  background-color: transparent;
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}

.btn-tcl-outline:hover {
  background-color: var(--brand-teal);
  color: var(--color-text-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Get Featured pill (nav, far-right) */
.btn-tcl-featured {
  display: inline-flex;
  align-items: center;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 2px solid var(--color-action);
  background-color: transparent;
  color: var(--color-action);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-tcl-featured:hover {
  background-color: var(--color-action);
  color: #FFFFFF;
  text-decoration: none;
}

/* White button — for dark section backgrounds */
.btn-tcl-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
  color: var(--color-text-dark);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-tcl-white:hover {
  background-color: var(--color-text-dark);
  border-color: var(--color-text-dark);
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-1px);
}

/* ── Sun Crop Image Mask ───────────────────────────────────── */
/* Use mask-image, NOT clip-path — polygon is a rough approximation */
.tcl-sun-crop {
  -webkit-mask-image: url('assets/sunni-icon.svg');
  mask-image: url('assets/sunni-icon.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  object-fit: cover;
  display: block;
}

.tcl-sun-crop-wrap {
  -webkit-mask-image: url('assets/sunni-icon.svg');
  mask-image: url('assets/sunni-icon.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
  overflow: hidden;
}

/* ── Caveat Accent ────────────────────────────────────────── */
.tcl-caveat {
  font-family: 'Caveat', cursive !important;
  font-weight: 600;
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes tclSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes oceanFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-33px); }
}

/* ── Page Loader ──────────────────────────────────────────── */
#tcl-loader {
  position: fixed;
  inset: 0;
  background: transparent; /* JS sets to #0D3347 on first app launch only */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  z-index: 9999;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

#tcl-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tcl-loader-icon {
  width: 140px;
  height: 140px;
  animation: tclSpin 3s linear infinite;
  filter: drop-shadow(0 0 16px rgba(245,130,32,0.6));
}

/* .tcl-loader-rays targets an inline SVG group when rays-only spin is needed */
.tcl-loader-rays {
  transform-origin: center center;
  animation: tclSpin var(--ray-speed, 5s) linear infinite;
}

/* ── Ocean Swell Hamburger ────────────────────────────────── */
.tcl-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 5px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.tcl-hamburger:hover {
  background: rgba(21,196,175,0.12);
}

.tcl-hamburger svg {
  width: 34px;
  height: 24px;
  overflow: hidden;
}

.tcl-hamburger svg path {
  fill: none;
  stroke: var(--brand-teal);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.tcl-nav-wave {
  /* wave paths sit still by default */
}

.tcl-nav-wave.flowing {
  animation: oceanFlow 1.4s linear infinite;
}

.tcl-nav-wave:nth-child(2).flowing {
  animation-delay: 0.15s;
}

.tcl-nav-wave:nth-child(3).flowing {
  animation-delay: 0.30s;
}

/* Mobile menu panel */
.mobile-main-menu {
  background: #0D3347 !important;
}
.mobile-main-menu .sidebar-nav li a,
.mobile-main-menu .sidebar-nav li span {
  color: #FFFFFF !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 600 !important;
}
.mobile-main-menu ul li i {
  color: #15C4AF !important;
}

@media only screen and (max-width: 767px) {
  /* Navbar fixed at top — always visible */
  .header nav.navbar.navbar-default {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #FFFFFF !important;
    border-bottom: 2px solid rgba(21,196,175,0.2) !important;
    margin: 0 !important;
  }
  /* Header not sticky — logo scrolls naturally */
  .header {
    position: relative !important;
    padding-top: 52px !important;
    background: #FFFFFF !important;
  }
  /* Hide login/right side */
  .header-right-container,
  .logged-in-member-header {
    display: none !important;
  }
  /* Slide menu starts below fixed navbar */
  .mobile-main-menu {
    top: 52px !important;
    height: calc(100% - 52px) !important;
  }
}

/* Hide mini favicon logo on desktop — not needed there */
@media (min-width: 768px) {
  .header .navbar-brand {
    display: none !important;
  }
}

/* Nav links — force Bricolage over BD's Lato */
.header .navbar-default .navbar-nav > li > a,
.header .navbar-default .navbar-nav > li > span,
body .navbar-default .navbar-nav > li > a,
body .navbar-default .navbar-nav > li > span {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
}

/* Blog/listing title links — BD renders these as <a class="h3"> not real headings */
a.h1, a.h2, a.h3, a.h4, a.h5, a.h6,
a[class*="h1"], a[class*="h2"], a[class*="h3"], a[class*="h4"],
.feature-post h2 a, .feature-post h3 a,
.search_result h2 a, .search_result h3 a,
.the-post-title a, .post-title a {
  font-family: 'Bricolage Grotesque', sans-serif !important;
}

/* ── Footer ───────────────────────────────────────────── */
.footer {
  background-color: #0D3347 !important;
}
.footer,
.footer_menu a,
.footer_terms a,
.footer_menu .content {
  color: rgba(255,255,255,0.8) !important;
  font-family: 'Figtree', sans-serif !important;
}
.footer_menu .head {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  color: #FFCA08 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.footer_menu a:hover,
.footer_menu a:focus,
.footer_terms a:hover,
.footer_terms a:focus {
  color: #15C4AF !important;
  text-decoration: none !important;
}
.btn_footer_get_listed {
  background-color: #F58220 !important;
  border: 2px solid #F58220 !important;
  color: #FFFFFF !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 100px !important;
  padding: 12px 28px !important;
  letter-spacing: 0.02em !important;
}
.btn_footer_get_listed:hover,
.btn_footer_get_listed:focus {
  background-color: #d96e14 !important;
  border-color: #d96e14 !important;
}
.newsletter_row {
  background-color: #15C4AF !important;
  color: #0D3347 !important;
}
.newsletter_row .alert,
.newsletter_row label,
.newsletter_row p {
  color: #0D3347 !important;
}
.newsletter_row input[type="submit"],
.newsletter_footer_button {
  background-color: #0D3347 !important;
  border-color: #0D3347 !important;
  color: #FFFFFF !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
}
.newsletter_row input[type="submit"]:hover,
.newsletter_footer_button:hover {
  background-color: #F58220 !important;
  border-color: #F58220 !important;
}
.footer_terms {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 16px !important;
}
.list-social-links .network-icon {
  background-color: rgba(255,255,255,0.12) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease !important;
}
.list-social-links .network-icon:hover {
  background-color: #15C4AF !important;
  color: #FFFFFF !important;
}

/* ── Unified slider cards — events, blog & deals get IDENTICAL treatment ──
   Full graphic, never cropped (contain). A soft blurred zoom of the same
   image fills any letterbox space instead of black bars; a correctly-sized
   750×400 image fills edge-to-edge with no visible blur. Title-only band. */
.slickEvents .pic,
.slickBlogArticles .pic,
.slickCoupons .pic {
  position: relative !important;
  aspect-ratio: 750 / 400 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background-color: #0D3347 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
/* Blurred backdrop fill (only seen when an image isn't a perfect 750×400) */
.slickEvents .pic::before,
.slickBlogArticles .pic::before,
.slickCoupons .pic::before {
  content: '' !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  filter: blur(18px) saturate(1.06) !important;
  transform: scale(1.12) !important;
  z-index: 0 !important;
}
/* Full, uncropped graphic on top of the blur */
.slickEvents .pic::after,
.slickBlogArticles .pic::after,
.slickCoupons .pic::after {
  content: '' !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: inherit !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  filter: none !important;
  z-index: 1 !important;
}
.slickEvents .pic > .homepage-link-element,
.slickBlogArticles .pic > .homepage-link-element,
.slickCoupons .pic > .homepage-link-element { z-index: 4 !important; }
/* Static bottom title band — identical on all three sliders */
.slickEvents .pic > .pic-caption,
.slickBlogArticles .pic > .pic-caption,
.slickCoupons .pic > .pic-caption {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 64px !important;
  transform: none !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 14px !important;
  background: linear-gradient(0deg, rgba(13,51,71,0.94) 0%, rgba(13,51,71,0.80) 55%, rgba(13,51,71,0) 100%) !important;
  z-index: 2 !important;
}
/* Show the title only — hide date/excerpt/button/divider regardless of markup */
.slickEvents .pic .pic-caption > *:not(.pic-title),
.slickBlogArticles .pic .pic-caption > *:not(.pic-title),
.slickCoupons .pic .pic-caption > *:not(.pic-title) { display: none !important; }
/* Unified, legible 2-line title — clamps cleanly, never cut mid-line */
.slickEvents .pic .pic-title,
.slickBlogArticles .pic .pic-title,
.slickCoupons .pic .pic-title,
.slickEvents .pic:hover .pic-title,
.slickBlogArticles .pic:hover .pic-title,
.slickCoupons .pic:hover .pic-title {
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
  font-size: 1.8rem !important;
  line-height: 1.22 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}
/* Featured-members slider keeps photo crop-to-fill (different component) */
.slickFeatured .pic {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* Keep pseudo backdrops off for any other .pic usage elsewhere on the site */
.pic::before,
.pic::after {
  display: none !important;
}

/* ── Home V2 ────────────────────────────────────────── */
.tcl-marquee-band {
  background: #15C4AF;
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
}
.tcl-marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: tclMarquee 35s linear infinite;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  text-transform: uppercase;
}
.tcl-marquee-sep { color: #FFCA08; margin: 0 18px; }
@keyframes tclMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tcl-hero {
  min-height: 100vh;
  background-color: #0D3347;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 20px;
}
.tcl-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 780px);
  height: min(90vw, 780px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.tcl-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}
.tcl-hero-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #15C4AF;
  margin-bottom: 24px;
}
.tcl-hero-h1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(3.2rem, 7vw, 6.5rem) !important;
  line-height: 1.02 !important;
  color: #FFFFFF !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.02em !important;
}
.tcl-hero-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,0.78);
  margin-bottom: 48px;
  line-height: 1.65;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.tcl-hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.tcl-btn-primary {
  display: inline-flex;
  align-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 2.2rem;
  border-radius: 100px;
  background: #F58220;
  color: #FFFFFF;
  border: 2px solid #F58220;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
.tcl-btn-primary:hover {
  background: #d96e14;
  border-color: #d96e14;
  color: #FFFFFF;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,130,32,0.4);
}
.tcl-btn-outline-white {
  display: inline-flex;
  align-items: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 2.2rem;
  border-radius: 100px;
  background: transparent;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.55);
  text-decoration: none;
  transition: all 0.2s ease;
}
.tcl-btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: #FFFFFF;
  color: #FFFFFF;
  text-decoration: none;
}
.tcl-wave {
  width: 100%;
  height: 70px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  line-height: 0;
  font-size: 0;
}
.tcl-wave-white-grey {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23F7F7F7' d='M0,35 C360,70 720,0 1080,35 C1260,52 1380,18 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-grey-white {
  background-color: #F7F7F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,35 C360,0 720,70 1080,35 C1260,18 1380,52 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-grey-navy {
  background-color: #F7F7F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230D3347' d='M0,20 C360,70 720,10 1080,45 C1260,62 1380,30 1440,45 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-white-navy {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230D3347' d='M0,20 C360,70 720,10 1080,45 C1260,62 1380,30 1440,45 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-navy-orange {
  background-color: #0D3347;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23F58220' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-orange-teal {
  background-color: #F58220;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%2315C4AF' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-section-white { background: #FFFFFF; }
.tcl-section-navy  { background: #0D3347; }
.tcl-section-teal  { background: #15C4AF; }
.tcl-section-orange { background: linear-gradient(135deg, #F58220 0%, #d96e14 100%); }
.tcl-section-navy h2.streaming-title,
.tcl-section-navy .h4,
.tcl-section-navy a.h4 { color: #FFCA08 !important; }
.tcl-section-navy .streaming-title { color: #FFCA08 !important; }
.tcl-section-navy p,
.tcl-section-navy small { color: rgba(255,255,255,0.75) !important; }

.tcl-section-navy,
.tcl-realestate,
.tcl-newsletter-wrap {
  position: relative;
}
.tcl-find-section {
  padding: 90px 20px;
  text-align: center;
  background: #FFFFFF;
}
.tcl-find-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  color: #0D3347 !important;
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  margin-bottom: 56px !important;
  letter-spacing: -0.01em !important;
}
.tcl-find-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
.tcl-find-card {
  background: #FFFFFF;
  border: 2px solid #F0F0F0;
  border-radius: 24px;
  padding: 48px 20px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.tcl-find-card:hover {
  border-color: #15C4AF;
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(21,196,175,0.18);
  text-decoration: none !important;
}
.tcl-find-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.tcl-find-icon i { color: #FFFFFF !important; font-size: 1.9rem !important; }
.tcl-find-icon.light i { color: #0D3347 !important; }
.tcl-find-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #231F20;
  text-align: center;
  line-height: 1.3;
}
.tcl-find-card:hover .tcl-find-label { color: #15C4AF; }
.tcl-realestate {
  background: linear-gradient(135deg, #F58220 0%, #d96e14 100%) !important;
  padding: 100px 20px !important;
  text-align: center !important;
}
.tcl-realestate-inner { max-width: 720px !important; margin: 0 auto !important; }
.tcl-realestate-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.01em !important;
}
.tcl-realestate-sub {
  color: rgba(255,255,255,0.88) !important;
  font-size: 1.15rem !important;
  margin-bottom: 44px !important;
  line-height: 1.6 !important;
}
.tcl-realestate-btns {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.btn-re {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  padding: 1rem 2rem !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: 2px solid #FFFFFF !important;
  letter-spacing: 0.01em !important;
}
.btn-re.solid { background: #FFFFFF !important; color: #F58220 !important; }
.btn-re.solid:hover { background: #0D3347 !important; border-color: #0D3347 !important; color: #FFFFFF !important; text-decoration: none !important; }
.btn-re.outline { background: transparent !important; color: #FFFFFF !important; }
.btn-re.outline:hover { background: #FFFFFF !important; color: #F58220 !important; text-decoration: none !important; }
.tcl-newsletter-wrap {
  background: #15C4AF;
  padding: 80px 20px;
  text-align: center;
}
.tcl-newsletter-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  color: #0D3347 !important;
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  margin-bottom: 12px !important;
}
.tcl-newsletter-sub {
  font-family: 'Figtree', sans-serif !important;
  color: #0D3347 !important;
  font-size: 1.1rem !important;
  margin-bottom: 36px !important;
  opacity: 0.85;
}
.tcl-newsletter-wrap .newsletter_row { background: transparent !important; }
.tcl-newsletter-wrap h2:not(.tcl-newsletter-title),
.tcl-newsletter-wrap .streaming-title { display: none !important; }
.tcl-newsletter-wrap input[type="submit"],
.tcl-newsletter-wrap .newsletter_footer_button {
  background: #0D3347 !important;
  border-color: #0D3347 !important;
  border-radius: 100px !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}
@media (max-width: 767px) {
  .tcl-find-grid { grid-template-columns: repeat(2, 1fr); }
  .tcl-hero { min-height: 80vh; padding: 100px 20px; }
  .tcl-find-section { padding: 70px 20px; }
  .tcl-wave { height: 60px; }
}

/* ── Home V2 refinements v9 ── */

/* Hero — shorter so content fills it */
.tcl-hero { min-height: 62vh !important; padding: 70px 20px !important; }

/* Ticker — bigger, readable */
.tcl-marquee-band { padding: 20px 0 !important; }
.tcl-marquee-track { font-size: 1.2rem !important; letter-spacing: 0.1em !important; }
.tcl-marquee-sep { margin: 0 22px !important; }

/* Widget sections — top space + side padding so slider arrows are visible */
.tcl-section-white,
.tcl-section-navy {
  padding: 75px 60px 65px !important;
}
.tcl-section-white .streaming-title,
.tcl-section-navy .streaming-title {
  margin-bottom: 40px !important;
  padding-top: 10px !important;
}
/* Pull slick arrows inward so they show */
.tcl-section-white .slick-prev,
.tcl-section-navy .slick-prev { left: 5px !important; z-index: 5 !important; }
.tcl-section-white .slick-next,
.tcl-section-navy .slick-next { right: 5px !important; z-index: 5 !important; }
.tcl-section-white .slick-prev:before,
.tcl-section-white .slick-next:before,
.tcl-section-navy .slick-prev:before,
.tcl-section-navy .slick-next:before {
  color: #15C4AF !important;
  font-size: 28px !important;
}

/* Quick Find — bigger icons/text, wider grid, less dead space */
.tcl-find-section { padding: 80px 40px !important; }
.tcl-find-title { margin-bottom: 50px !important; }
.tcl-find-grid { max-width: 1150px !important; gap: 28px !important; }
.tcl-find-card { padding: 52px 24px 42px !important; }
.tcl-find-icon { width: 104px !important; height: 104px !important; }
.tcl-find-icon i { font-size: 2.4rem !important; }
.tcl-find-label { font-size: 1.2rem !important; }



/* Real estate — bigger, tighter, kill the nested box */
.tcl-realestate { padding: 75px 20px !important; }
.tcl-realestate-title { font-size: clamp(2.4rem, 4vw, 3.8rem) !important; }
.tcl-realestate-sub { font-size: 1.3rem !important; margin-bottom: 40px !important; }
.tcl-realestate .content-container,
.tcl-realestate .container,
.tcl-realestate-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-re { font-size: 1.15rem !important; padding: 1.1rem 2.4rem !important; }

/* Newsletter — inline form, simpler colors, normal button */
.tcl-newsletter-wrap { padding: 70px 20px !important; }
.tcl-newsletter-wrap input[type="text"],
.tcl-newsletter-wrap input[type="email"] {
  max-width: 320px !important;
  width: 100% !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 14px 18px !important;
  margin: 6px auto !important;
  display: inline-block !important;
}
.tcl-newsletter-wrap input[type="submit"],
.tcl-newsletter-wrap .newsletter_footer_button {
  width: auto !important;
  max-width: 260px !important;
  padding: 14px 40px !important;
  background: #F58220 !important;
  border-color: #F58220 !important;
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  .tcl-section-white, .tcl-section-navy { padding: 50px 15px !important; }
  .tcl-find-section { padding: 55px 15px !important; }
  .tcl-find-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tcl-hero { min-height: 70vh !important; }
}

/* ── Home V2 v10 ── */

/* Hero — shorter, everything bigger */
.tcl-hero { min-height: 50vh !important; padding: 55px 20px !important; }
.tcl-hero-eyebrow { font-size: 1.15rem !important; letter-spacing: 0.22em !important; margin-bottom: 18px !important; }
.tcl-hero-h1 { font-size: clamp(3.6rem, 7vw, 7rem) !important; margin-bottom: 22px !important; }
.tcl-hero-sub { font-size: clamp(1.3rem, 2vw, 1.6rem) !important; margin-bottom: 36px !important; }
.tcl-btn-primary, .tcl-btn-outline-white {
  font-size: 1.3rem !important;
  padding: 1.2rem 2.8rem !important;
}

/* Section headlines — much bigger */
.streaming-title, .tcl-find-title {
  font-size: clamp(2.8rem, 4.5vw, 4.2rem) !important;
}

/* Widget sections — more side padding so slider isn't full-width */
.tcl-section-white,
.tcl-section-navy {
  padding: 80px 90px 70px !important;
}

/* Slider arrows — visible teal circles, positioned inside */
.tcl-section-white .slick-arrow,
.tcl-section-navy .slick-arrow {
  width: 52px !important;
  height: 52px !important;
  background: #15C4AF !important;
  border-radius: 50% !important;
  z-index: 30 !important;
  opacity: 1 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}
.tcl-section-white .slick-prev,
.tcl-section-navy .slick-prev { left: 25px !important; }
.tcl-section-white .slick-next,
.tcl-section-navy .slick-next { right: 25px !important; }
.tcl-section-white .slick-arrow:before,
.tcl-section-navy .slick-arrow:before {
  color: #FFFFFF !important;
  font-size: 26px !important;
  opacity: 1 !important;
}



/* Real estate — bigger, kill nested orange box */
.tcl-realestate { padding: 80px 20px !important; }
.tcl-realestate-title { font-size: clamp(2.8rem, 5vw, 4.5rem) !important; }
.tcl-realestate-sub { font-size: 1.4rem !important; margin-bottom: 44px !important; }
.tcl-realestate > div,
.tcl-realestate .fr-view,
.tcl-realestate .content-container,
.tcl-realestate .panel,
.tcl-realestate .well {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-re { font-size: 1.25rem !important; padding: 1.2rem 3rem !important; }

@media (max-width: 767px) {
  .tcl-section-white, .tcl-section-navy { padding: 50px 15px !important; }
  .tcl-find-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* View All button */
.tcl-viewall-wrap {
  text-align: center;
  padding: 10px 20px 0;
}
.tcl-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 0.85rem 2.2rem;
  border-radius: 100px;
  background: transparent;
  color: #15C4AF;
  border: 2px solid #15C4AF;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.tcl-viewall:hover {
  background: #15C4AF;
  color: #FFFFFF;
  text-decoration: none !important;
  transform: translateY(-2px);
}
/* On the navy businesses section — light version */
.tcl-section-navy .tcl-viewall {
  color: #FFCA08;
  border-color: #FFCA08;
}
.tcl-section-navy .tcl-viewall:hover {
  background: #FFCA08;
  color: #0D3347;
}

.tcl-find-sub {
  font-family: 'Figtree', sans-serif !important;
  font-size: 1.25rem !important;
  color: #5a6b75 !important;
  text-align: center !important;
  margin-top: -36px !important;
  margin-bottom: 50px !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Home V2 refinements v10 ── */

/* Hero — new tagline line, bigger eyebrow + sub */
.tcl-hero-eyebrow { font-size: 0.95rem !important; letter-spacing: 0.28em !important; }
.tcl-hero-tagline {
  font-family: 'Caveat', cursive !important;
  font-weight: 600 !important;
  font-size: clamp(1.9rem, 4vw, 3.1rem) !important;
  color: #FFCA08 !important;
  line-height: 1.1 !important;
  margin: 2px 0 18px !important;
}
.tcl-hero-sub { font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important; }

/* Desktop heading sizes up (mobile was already good) */
.streaming-title { font-size: clamp(2rem, 3.4vw, 3.3rem) !important; }
.tcl-find-title { font-size: clamp(2.2rem, 4vw, 3.6rem) !important; }
.tcl-realestate-title { font-size: clamp(2.4rem, 4.2vw, 3.9rem) !important; }
.tcl-newsletter-title { font-size: clamp(2.1rem, 3.6vw, 3.2rem) !important; }

/* Real estate solid orange — matches the wave, kills the dark gradient edge */
.tcl-realestate { background: #F58220 !important; }

/* Sliders — hide arrows, keep dots (JS auto-advances) */
.tcl-section-white .slick-prev,
.tcl-section-white .slick-next,
.tcl-section-navy .slick-prev,
.tcl-section-navy .slick-next {
  opacity: 0 !important;
  pointer-events: none !important;
}
.slick-dots li button:before { color: #15C4AF !important; opacity: 0.4 !important; font-size: 11px !important; }
.slick-dots li.slick-active button:before { color: #15C4AF !important; opacity: 1 !important; }

/* ── Featured member cards (card = .well) ── */
.tcl-section-navy .member.featured-member {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.tcl-section-navy .well {
  background: #1B4A63 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 26px 24px !important;
}
.tcl-section-navy .well a.h4 { color: #FFCA08 !important; }
.tcl-section-navy .well p,
.tcl-section-navy .well .bold,
.tcl-section-navy .well .small,
.tcl-section-navy .well span { color: rgba(255,255,255,0.88) !important; }
.tcl-section-navy .well .btn-primary {
  background: #F58220 !important;
  border-color: #F58220 !important;
  color: #FFFFFF !important;
}
.tcl-section-navy .well .member-search-verified,
.tcl-section-navy .well .member-search-verified .member-search-verified-text,
.tcl-section-navy .well .member-search-verified-icon {
  color: #FFCA08 !important;
}
.tcl-section-navy .well .member-search-verified {
  background: rgba(255,202,8,0.15) !important;
}

/* Hide oversized default "View All", keep the styled pill */
.tcl-section-white a.btn-block,
.tcl-section-navy a.btn-block,
.tcl-section-white .btn-block { display: none !important; }
a.view-all-btn-desktop, .view-all-btn-desktop { display: none !important; }

/* GHL form holder */
#tcl-ghl-form { max-width: 600px; margin: 0 auto; }

/* View All pills */
.tcl-viewall-wrap { text-align: center; margin-top: 30px; }
.tcl-viewall {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 0.95rem;
  padding: 0.7rem 1.9rem; border-radius: 100px;
  border: 2px solid #15C4AF; color: #15C4AF; background: transparent;
  text-decoration: none !important; transition: all .2s ease;
}
.tcl-viewall:hover { background: #15C4AF; color: #fff !important; text-decoration: none !important; }
.tcl-section-navy .tcl-viewall { border-color: #FFCA08; color: #FFCA08; }
.tcl-section-navy .tcl-viewall:hover { background: #FFCA08; color: #0D3347 !important; }
/* Find sub */
.tcl-find-sub {
  font-family: 'Figtree', sans-serif; color: #48606e; font-size: 1.15rem;
  text-align: center; max-width: 560px; margin: -28px auto 44px;
}

/* ── v13 refinements ── */

/* Font size bumps ~20% */
.tcl-hero-tagline { font-size: clamp(2.3rem, 4.8vw, 3.7rem) !important; }
.tcl-hero-sub { font-size: clamp(1.35rem, 2vw, 1.75rem) !important; }
.streaming-title { font-size: clamp(2.4rem, 4vw, 3.9rem) !important; }
.tcl-find-sub { font-size: 1.4rem !important; }
.tcl-realestate-sub { font-size: 1.4rem !important; }
.tcl-newsletter-sub { font-size: 1.35rem !important; }
.tcl-btn-primary, .tcl-btn-outline-white { font-size: 1.25rem !important; padding: 1rem 2.4rem !important; }
.tcl-viewall { font-size: 1.15rem !important; padding: 0.85rem 2.1rem !important; }
.btn-re { font-size: 1.25rem !important; }
.tcl-find-label { font-size: 1.3rem !important; }

/* Fix white gap above footer */
.tcl-newsletter-wrap { margin-bottom: 0 !important; padding-bottom: 70px !important; }
body .full-screen-page, body .page-content, body #main-content, body .single-page-content {
  padding-bottom: 0 !important; margin-bottom: 0 !important;
}

/* Center newsletter form */
.tcl-newsletter-wrap form { max-width: 480px !important; margin: 0 auto !important; text-align: center !important; }
.tcl-newsletter-wrap input[type="submit"] { display: block !important; margin: 18px auto 0 !important; float: none !important; }

/* ── v16 type scale (final target sizes) ── */
.tcl-hero-h1 { font-size: clamp(3.4rem, 7vw, 6.6rem) !important; }
.tcl-hero-tagline { font-size: clamp(2.8rem, 5.5vw, 4.4rem) !important; }
.tcl-hero-sub { font-size: clamp(1.5rem, 2.2vw, 2rem) !important; }
.tcl-hero-eyebrow { font-size: 1.15rem !important; letter-spacing: 2px !important; }
.web-page-content .streaming-title { font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important; }
.tcl-find-title { font-size: clamp(2.6rem, 4.5vw, 4.2rem) !important; }
.tcl-find-sub { font-size: clamp(1.4rem, 2vw, 1.7rem) !important; }
.tcl-find-label { font-size: 1.45rem !important; }
.tcl-realestate-title { font-size: clamp(2.6rem, 4.6vw, 4.2rem) !important; }
.tcl-realestate-sub { font-size: clamp(1.4rem, 2vw, 1.7rem) !important; }
.tcl-newsletter-title { font-size: clamp(2.4rem, 4vw, 3.8rem) !important; }
.tcl-newsletter-sub { font-size: clamp(1.35rem, 2vw, 1.65rem) !important; }
.tcl-btn-primary, .tcl-btn-outline-white { font-size: 1.4rem !important; padding: 1.1rem 2.6rem !important; }
.tcl-viewall { font-size: 1.3rem !important; padding: 0.95rem 2.3rem !important; }
.btn-re { font-size: 1.4rem !important; padding: 1.1rem 2.6rem !important; }
.web-page-content .pic-title { font-size: 1.4rem !important; line-height: 1.25 !important; }
.web-page-content .pic-caption p { font-size: 1.1rem !important; }
.tcl-section-navy .well a.h4 { font-size: 1.55rem !important; }
.tcl-section-navy .well p, .tcl-section-navy .well .bold, .tcl-section-navy .well span { font-size: 1.18rem !important; }

/* Close white gap before footer */
.footer-clear-element { display: none !important; }
.tcl-newsletter-wrap { margin-bottom: 0 !important; padding-bottom: 90px !important; }
.web-page-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }
main#main-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }

.tcl-newsletter-wrap ~ p, .tcl-newsletter-wrap ~ br,
.tcl-newsletter-wrap ~ div:empty { display: none !important; }

@media (max-width: 767px) {
  .footer-clear-element { display: none !important; height: 0 !important; }
  .tcl-newsletter-wrap { margin-bottom: 0 !important; }
  .web-page-content, main#main-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  .web-page-content .row { margin-bottom: 0 !important; }
  .tcl-newsletter-wrap .form-group:last-child,
  .tcl-newsletter-wrap .form-actions { margin-bottom: 0 !important; }
}

@media (max-width: 767px) {
  .tcl-newsletter-wrap { padding-bottom: 48px !important; margin-bottom: 0 !important; }
  .web-page-content, main#main-content { margin: 0 !important; padding-bottom: 0 !important; }
  main#main-content > div:last-of-type { margin: 0 !important; padding: 0 !important; }
  .footer-clear-element { display: none !important; height: 0 !important; margin: 0 !important; }
}

/* Hide broken slider arrows */
.slick-prev-fa, .slick-next-fa, .slick-prev, .slick-next { display: none !important; }

/* Clean auto-slide look on desktop: no dots; keep dots on mobile */
@media (min-width: 768px) {
  .tcl-section-white .slick-dots, .tcl-section-navy .slick-dots { display: none !important; }
}

/* Constrain & center widget sections at all desktop widths */
.tcl-section-white .container,
.tcl-section-navy .container {
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  float: none !important;
}
.tcl-section-white, .tcl-section-navy { overflow-x: hidden !important; }

/* ── Coupon/deals slider now uses the unified slider rules above (events/blog/deals
   are styled identically). Old contain/#0b1020 + flex-centering removed. ── */

/* ── Mobile: identical aspect-ratio + larger legible titles for all three ── */
@media (max-width: 767px) {
  .web-page-content .slickEvents .slick-slide .pic,
  .web-page-content .slickBlogArticles .slick-slide .pic,
  .web-page-content .slickCoupons .slick-slide .pic {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 750 / 400 !important;
    background-size: contain !important;
  }
  .web-page-content .slickEvents .slick-slide .pic .pic-title,
  .web-page-content .slickBlogArticles .slick-slide .pic .pic-title,
  .web-page-content .slickCoupons .slick-slide .pic .pic-title {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2 !important;
  }
  .web-page-content .slickEvents .pic > .pic-caption,
  .web-page-content .slickBlogArticles .pic > .pic-caption,
  .web-page-content .slickCoupons .pic > .pic-caption {
    min-height: 54px !important;
  }
}
/* ============================================================
   /JOIN PRICING PAGE — v29
   Namespace: .tclj  (TCL Join). Self-contained; reuses brand
   tokens + existing button classes (.tcl-btn-primary,
   .tcl-btn-outline-white, .btn-tcl-outline, .btn-tcl-white).
   Waves + toggle + FAQ accordion + booking embed live in animations.js v5.
   v27: ALL font sizes converted rem→px. BD/Bootstrap sets the html root
   font-size to 10px, so rem values were rendering at 62.5% of intent.
   Pixel values are immune to that and match the design previews exactly.
   v28: ~12% trim on body tier, ~8-10% on headings per Brad's calibration.
   v29: final body trim, pale-teal grid section for card contrast,
   global scroll-behavior removed (now set by JS only on /join).
   Also includes the /book-a-call page (.tclb).
   ============================================================ */

.tclj { overflow-x: hidden; }
.tclj-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tclj-wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* Shared site button classes used on these pages — pinned to px so
   Bootstrap's 10px html root can't shrink them (scoped; homepage untouched) */
.tclj .tcl-btn-primary,
.tclj .tcl-btn-outline-white,
.tclj .btn-tcl-white,
.tclb .tcl-btn-primary {
  font-size: 17px !important;
  padding: 15px 32px !important;
}
.tclj .btn-tcl-outline {
  font-size: 16px !important;
  padding: 12px 26px !important;
}

/* ── Shared type ─────────────────────────────────────────── */
.tclj-h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.1 !important;
  color: var(--color-text-dark) !important;
  text-align: center;
  margin: 0 0 18px !important;
  letter-spacing: -0.01em;
}
.tclj-lead {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--color-text-light);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 28px;
  line-height: 1.65;
}

/* ── HERO ────────────────────────────────────────────────── */
.tclj-hero {
  min-height: 78vh;
  background-color: #0D3347;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 20px 90px;
}
.tclj-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 720px);
  height: min(90vw, 720px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.tclj-hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.tclj-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #15C4AF;
  margin-bottom: 24px;
}
.tclj-h1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(46px, 5.8vw, 80px) !important;
  line-height: 1.04 !important;
  color: #FFFFFF !important;
  margin: 0 0 26px !important;
  letter-spacing: -0.02em !important;
}
.tclj-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(19px, 2.1vw, 23px);
  color: rgba(255,255,255,0.78);
  margin: 0 auto 44px;
  line-height: 1.65;
  max-width: 620px;
}
.tclj-hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── FOUNDING BANNER (sun-yellow band, ticker-style) ─────── */
.tclj-founding {
  background: var(--brand-yellow);
  padding: 34px 24px;
  text-align: center;
}
.tclj-founding-inner { max-width: 860px; margin: 0 auto; }
.tclj-founding-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(25px, 2.8vw, 32px) !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 12px !important;
}
.tclj-founding-copy {
  font-family: 'Figtree', sans-serif;
  font-size: 17px;
  color: var(--color-text-dark);
  line-height: 1.6;
  margin: 0 0 14px;
}
.tclj-founding-count {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  margin: 0;
}
.tclj-founding-count .tclj-count {
  background: #0D3347;
  color: #FFCA08;
  border-radius: 100px;
  padding: 4px 14px;
  display: inline-block;
  margin: 2px 4px;
}

/* ── PLACEMENTS GRID (white) ─────────────────────────────── */
.tclj-grid { padding: 90px 0 80px; background: #EAF6F4 !important; }
/* wave below the grid must start from the same pale teal */
.tclj .tcl-wave-white-sand { background-color: #EAF6F4; }
.tclj-tile { border-color: rgba(13,51,71,0.10); box-shadow: 0 6px 22px rgba(13,51,71,0.08); }
.tclj-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.tclj-tile {
  background: #FFFFFF;
  border: 1px solid rgba(13,51,71,0.08);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 4px 18px rgba(13,51,71,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tclj-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(13,51,71,0.10); }
.tclj-tile-icon { font-size: 38px; line-height: 1; margin: 0 0 14px; }
.tclj-tile-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 10px !important;
}
.tclj-tile-copy {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.55;
  margin: 0;
}

/* ── TIERS SECTION (warm sand) ───────────────────────────── */
.tclj-tiers {
  background: var(--color-bg-warm);
  padding: 90px 0 100px;
}

/* Billing toggle */
.tclj-toggle {
  display: flex;
  justify-content: center;
  margin: 8px auto 48px;
  background: #FFFFFF;
  border: 2px solid #0D3347;
  border-radius: 100px;
  padding: 5px;
  width: fit-content;
  gap: 4px;
}
.tclj-tb {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  padding: 14px 28px;
  border-radius: 100px;
  color: var(--color-text-dark);
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.tclj-tb:hover { color: var(--color-text-dark); }
.tclj-tb.is-active { background: #0D3347; color: #FFFFFF; }
.tclj-tb.is-active:hover { color: #FFFFFF; }

/* Billing show/hide — annual is the default state */
.tclj:not(.is-monthly) .tclj-bill-monthly { display: none !important; }
.tclj.is-monthly .tclj-bill-annual { display: none !important; }

/* Cards */
.tclj-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: start;
}
.tclj-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 38px 30px 32px;
  box-shadow: 0 6px 24px rgba(13,51,71,0.08);
  border: 1px solid rgba(13,51,71,0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tclj-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(13,51,71,0.15);
}
.tclj-card-free:hover { box-shadow: 0 20px 48px rgba(21,196,175,0.18); }
.tclj-card-insider {
  border: 3px solid var(--brand-orange);
  box-shadow: 0 14px 42px rgba(245,130,32,0.22);
  transform: translateY(-10px);
}
.tclj-card-insider:hover {
  transform: translateY(-16px);
  box-shadow: 0 24px 56px rgba(245,130,32,0.32);
}
/* Glowing animated wrapper — Celebration Preferred */
.tclj-card-preferred {
  border: 3px solid transparent;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(135deg, #6A4C93, #27AAE1, #15C4AF, #FFCA08, #6A4C93) border-box;
  background-size: auto, 320% 320%;
  animation: tcljPreferredGlow 7s ease-in-out infinite;
  box-shadow: 0 10px 34px rgba(106,76,147,0.30);
}
.tclj-card-preferred:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 52px rgba(106,76,147,0.42), 0 0 30px rgba(39,170,225,0.22);
}
@keyframes tcljPreferredGlow {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}
.tclj-card-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-orange);
  color: #FFFFFF;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 100px;
  white-space: nowrap;
  margin: 0;
}
.tclj-badge-alt { background: #0D3347; color: #FFCA08; }

/* Card ribbon tab — mirrors the live listing ribbon system */
.tclj-card-tab {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 6px;
  margin: 0 0 16px;
  color: #FFFFFF;
}
.tclj-tab-verified { background: var(--brand-teal); }
.tclj-tab-featured { background: #1C75BC; }
.tclj-tab-preferred { background: #6A4C93; }

.tclj-card-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 29px !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 6px !important;
}
.tclj-card-for {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 14px;
}
.tclj-ribbon-note {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-dark);
  margin: 0 0 14px;
}

.tclj-price-wrap {
  border-top: 1px solid rgba(13,51,71,0.10);
  border-bottom: 1px solid rgba(13,51,71,0.10);
  padding: 18px 0;
  margin: 0 0 18px;
}
.tclj-price {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(44px, 4vw, 56px) !important;
  line-height: 1 !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 6px !important;
}
.tclj-per {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-light);
}
.tclj-price-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  margin: 0;
}
.tclj-price-was {
  font-size: 26px;
  font-weight: 700 !important;
  color: var(--color-text-light);
  text-decoration: line-through;
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--brand-orange);
  margin-right: 6px;
  vertical-align: 8px;
}
.tclj-reg {
  white-space: nowrap;
  opacity: 0.8;
}
.tclj-founding-chip {
  background: rgba(255,202,8,0.22);
  border: 1px solid rgba(201,151,28,0.45);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-dark);
  margin: 14px 0 0;
}

.tclj-feat-lead {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text-dark);
  margin: 0 0 10px;
}
.tclj-feat {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.tclj-feat li {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-dark);
  padding: 7px 0 7px 32px;
  position: relative;
}
.tclj-feat li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--brand-teal);
  font-weight: 800;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.tclj-card-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: auto 0 16px;
}
.tclj-cta { width: 100%; justify-content: center !important; text-align: center; }
/* Buttons inside cards were inheriting hero-button scale — size them down */
.tclj-card-ctas .tcl-btn-primary,
.tclj-card-ctas .btn-tcl-outline {
  font-size: 17px !important;
  padding: 13px 24px !important;
}
.tclj-fine {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.5;
  margin: 0 0 8px;
}

/* ── TRUSTED PARTNER BAND (navy + gold) ──────────────────── */
.tclj-partner {
  background-color: #0D3347;
  /* Gold spotlight: top-center, casting downward. The first (linear) layer
     keeps the top ~110px flat navy so the wave above meets it seamlessly —
     the old corner gradient is what caused the straight line under the wave. */
  background-image:
    linear-gradient(180deg, #0D3347 0px, rgba(13,51,71,0) 110px),
    radial-gradient(ellipse 62% 58% at 50% 0%, rgba(201,151,28,0.30) 0%, rgba(201,151,28,0.09) 46%, transparent 72%);
  margin-top: -1px; /* kills the subpixel hairline under the injected wave */
  padding: 100px 24px;
}
.tclj-partner-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.tclj-partner-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(38px, 4.6vw, 54px) !important;
  color: #C9971C !important;
  line-height: 1.1 !important;
  margin: 0 0 18px !important;
}
.tclj-partner-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(19px, 2vw, 22px);
  color: rgba(255,255,255,0.82) !important;
  margin: 0 auto 36px;
  max-width: 640px;
  line-height: 1.6;
}
.tclj-partner .tclj-feat { text-align: left; max-width: 720px; margin: 0 auto 32px; }
.tclj-partner .tclj-feat li { color: rgba(255,255,255,0.88) !important; font-size: 16px; padding: 9px 0 9px 34px; }
.tclj-partner .tclj-feat li::before { content: '\2605'; color: #C9971C; }
.tclj-partner .tclj-feat li strong { color: #FFFFFF; }
.tclj-partner-scarcity {
  font-family: 'Figtree', sans-serif;
  font-size: 17px;
  color: rgba(255,255,255,0.78) !important;
  max-width: 680px;
  margin: 0 auto 34px;
  line-height: 1.65;
}
.tclj-partner-scarcity strong { color: #FFCA08; }
.tclj-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 18px;
  padding: 16px 38px;
  border-radius: 100px;
  background: #C9971C;
  color: #FFFFFF !important;
  border: 2px solid #C9971C;
  text-decoration: none !important;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}
.tclj-btn-gold:hover {
  background: #FFCA08;
  border-color: #FFCA08;
  color: #0D3347 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,202,8,0.35);
}
.tclj-partner-fine {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.55) !important;
  margin: 28px 0 0;
}

/* ── LAUNCH CALL / PROMISE / FOUNDER (white) ─────────────── */
.tclj-trust { padding: 90px 0; }
.tclj-promise {
  background: rgba(21,196,175,0.07);
  border-left: 5px solid var(--brand-teal);
  border-radius: 0 20px 20px 0;
  padding: 28px 32px;
  margin: 44px 0;
}
.tclj-promise-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 10px !important;
}
.tclj-promise-copy {
  font-family: 'Figtree', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0;
}
.tclj-founder {
  background: var(--color-bg-warm);
  border-radius: 24px;
  padding: 38px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.tclj-founder-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #FFFFFF;
  box-shadow: 0 6px 18px rgba(13,51,71,0.15);
  flex-shrink: 0;
}
.tclj-founder-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 12px !important;
}
.tclj-founder-body p {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-dark);
  margin: 0 0 14px;
}
.tclj-founder-sig {
  font-family: 'Caveat', cursive !important;
  font-weight: 600 !important;
  font-size: 29px !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 18px !important;
}

/* ── HOW IT WORKS ────────────────────────────────────────── */
.tclj-howit { background: #FFFFFF; padding: 20px 0 90px; }
.tclj-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.tclj-step { text-align: center; padding: 0 14px; }
.tclj-step-num {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--brand-teal);
  color: #FFFFFF;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.tclj-step-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 8px !important;
}
.tclj-step-copy {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.55;
  margin: 0;
}

/* ── FAQ (white, JS accordion) ───────────────────────────── */
.tclj-faq { padding: 70px 0 90px; }
.tclj-faq-list { margin-top: 36px; }
.tclj-faq-item {
  border-bottom: 1px solid rgba(13,51,71,0.10);
  padding: 4px 0;
}
.tclj-faq-q {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  color: var(--color-text-dark) !important;
  margin: 0 !important;
  padding: 20px 48px 20px 0;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.tclj-faq-q::after {
  content: '\2212';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(21,196,175,0.12);
  color: var(--brand-teal);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  transition: background-color 0.2s ease;
}
.tclj-faq-item.is-collapsed .tclj-faq-q::after { content: '+'; }
.tclj-faq-item.is-collapsed .tclj-faq-a { display: none; }
.tclj-faq-a p {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0;
  padding: 0 0 20px;
}

/* ── FINAL CTA (navy) ────────────────────────────────────── */
.tclj-final {
  background: #0D3347;
  padding: 100px 24px 90px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tclj-final::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 600px);
  height: min(80vw, 600px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.tclj-final-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.tclj-final-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(36px, 4.2vw, 52px) !important;
  color: #FFFFFF !important;
  line-height: 1.12 !important;
  margin: 0 0 20px !important;
}
.tclj-final-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 20px;
  color: rgba(255,255,255,0.78) !important;
  margin: 0 auto 40px;
  max-width: 640px;
  line-height: 1.65;
}
.tclj-final-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.tclj-tagline {
  font-family: 'Caveat', cursive !important;
  font-weight: 600 !important;
  font-size: clamp(30px, 3.3vw, 40px) !important;
  color: #FFCA08 !important;
  margin: 0 !important;
}

/* ── Match homepage (/welcome) type scale ────────────────────
   The /join page (.tclj) ran larger than the homepage and felt
   inconsistent. These overrides bring every text size in line
   with the /welcome scale (values validated against measured
   homepage sizes: hero H1 66, section heading 42, hero sub 20,
   eyebrow ~12, body ~14-15). Edit here to retune the join scale. */
.tclj-h1          { font-size: clamp(38px, 5.2vw, 66px) !important; }
.tclj-h2          { font-size: clamp(28px, 3.4vw, 42px) !important; }
.tclj-sub         { font-size: clamp(16px, 1.6vw, 20px) !important; }
.tclj-lead        { font-size: clamp(15px, 1.4vw, 18px) !important; }
.tclj-eyebrow     { font-size: 13px !important; }
.tclj-card-title  { font-size: 24px !important; }
.tclj-card-for    { font-size: 15px !important; }
.tclj-ribbon-note { font-size: 15px !important; }
.tclj-price       { font-size: clamp(36px, 3.2vw, 46px) !important; }
.tclj-per         { font-size: 17px !important; }
.tclj-price-sub   { font-size: 14px !important; }
.tclj-price-was   { font-size: 21px !important; }
.tclj-founding-chip { font-size: 14px !important; }
.tclj-feat-lead   { font-size: 16px !important; }
.tclj-feat li,
.tclj-partner .tclj-feat li { font-size: 15px !important; }
.tclj-faq-q       { font-size: 18px !important; }
.tclj-faq-a p     { font-size: 15px !important; }
.tclj-final-title { font-size: clamp(28px, 3.4vw, 44px) !important; }
.tclj-final-sub   { font-size: 17px !important; }

/* ── MAGICAL BUTTON HOVERS (scoped to .tclj / .tclb) ─────────
   Replaces the darker-orange hover with a sunset gradient shift,
   a soft gold glow, and a shine sweep across the pill. Scoped so
   the homepage buttons are untouched — remove the scope prefixes
   to take it site-wide. */
.tclj .tcl-btn-primary,
.tclb .tcl-btn-primary,
.tclj-btn-gold {
  position: relative;
  overflow: hidden;
}
.tclj .tcl-btn-primary::after,
.tclb .tcl-btn-primary::after,
.tclj-btn-gold::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.tclj .tcl-btn-primary:hover::after,
.tclb .tcl-btn-primary:hover::after,
.tclj-btn-gold:hover::after { left: 135%; }
.tclj .tcl-btn-primary:hover,
.tclb .tcl-btn-primary:hover {
  background: linear-gradient(135deg, #F58220 0%, #FFCA08 100%);
  border-color: #F58220;
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 3px rgba(255,202,8,0.28), 0 10px 30px rgba(245,130,32,0.45);
}
.tclj-btn-gold:hover {
  background: linear-gradient(135deg, #C9971C 0%, #FFCA08 100%);
  border-color: #FFCA08;
  color: #0D3347 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 3px rgba(255,202,8,0.25), 0 10px 30px rgba(255,202,8,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .tclj-card-preferred { animation: none; }
  .tclj .tcl-btn-primary::after,
  .tclb .tcl-btn-primary::after,
  .tclj-btn-gold::after { transition: none; display: none; }
  .tclj-card, .tclj-card:hover, .tclj-card-insider:hover, .tclj-card-preferred:hover { transition: none; }
}

/* ── NEW WAVES for /join flow ────────────────────────────── */
.tcl-wave-white-sand {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23F9E0BB' d='M0,35 C360,70 720,0 1080,35 C1260,52 1380,18 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-sand-navy {
  background-color: #F9E0BB;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230D3347' d='M0,20 C360,70 720,10 1080,45 C1260,62 1380,30 1440,45 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-navy-white {
  background-color: #0D3347;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,35 C360,0 720,70 1080,35 C1260,18 1380,52 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .tclj-tiles { grid-template-columns: repeat(2, 1fr); }
  .tclj-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .tclj-card-insider { transform: none; }
}
@media (max-width: 767px) {
  .tclj-hero { min-height: 64vh; padding: 90px 20px 70px; }
  .tclj-tiles { grid-template-columns: 1fr; }
  .tclj-steps { grid-template-columns: 1fr; gap: 36px; }
  .tclj-founder { flex-direction: column; align-items: center; text-align: center; padding: 30px 24px; }
  .tclj-grid, .tclj-tiers, .tclj-trust, .tclj-faq { padding-top: 64px; padding-bottom: 64px; }
  .tclj-partner, .tclj-final { padding-top: 70px; padding-bottom: 70px; }
  .tclj-toggle { margin-bottom: 36px; }
  .tclj-tb { font-size: 15px; padding: 12px 20px; }
  .tclj-final-btns a { width: 100%; justify-content: center; }
}

/* ── /BOOK-A-CALL PAGE (.tclb) ───────────────────────────── */
/* Booking iframe is injected by animations.js (Froala strips iframes). */
.tclb { overflow-x: hidden; }
.tclb-hero {
  background-color: #0D3347;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 140px 24px 110px;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tclb-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* sized to fit INSIDE the hero so the sun never gets clipped */
  width: min(78vw, 460px);
  height: min(78vw, 460px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.tclb-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.tclb-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #15C4AF;
  margin-bottom: 24px;
}
.tclb-h1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(46px, 6vw, 80px) !important;
  line-height: 1.04 !important;
  color: #FFFFFF !important;
  margin: 0 0 26px !important;
  letter-spacing: -0.02em !important;
}
.tclb-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(20px, 2.2vw, 24px);
  color: rgba(255,255,255,0.80);
  margin: 0 auto;
  line-height: 1.65;
  max-width: 660px;
}
.tclb-sub strong { color: #FFCA08; }
.tclb-embed {
  background: #FFFFFF;
  padding: 50px 24px 90px;
}
.tclb-widget {
  max-width: 920px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(13,51,71,0.08);
  border-radius: 24px;
  box-shadow: 0 10px 36px rgba(13,51,71,0.10);
  padding: 14px;
  min-height: 720px;
}
.tclb-widget iframe {
  width: 100%;
  height: 980px;
  border: 0;
  border-radius: 16px;
  display: block;
}
.tclb-loading {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  text-align: center;
  padding: 60px 0;
  margin: 0;
}
.tclb-fallback {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: var(--color-text-light);
  text-align: center;
  margin: 22px auto 0;
}
.tclb-fallback a { color: var(--brand-teal); font-weight: 600; }
@media (max-width: 767px) {
  .tclb-hero { padding: 100px 20px 70px; min-height: 440px; }
  .tclb-hero::before { width: min(82vw, 340px); height: min(82vw, 340px); }
  .tclb-widget { padding: 8px; border-radius: 18px; }
  .tclb-widget iframe { height: 1050px; }
}

/* ============================================================
   HOMEPAGE MERCH SLIDER — m1
   Self-contained test section. Namespace: .tclm  (TCL Merch).
   Every selector is prefixed .tclm — NO bare element selectors,
   NO global rules — so this block cannot affect any other slider
   or element anywhere on the site. Carousel behavior lives in
   animations.js (the .tclm IIFE). Safe to delete as a unit.
   ============================================================ */

/* Waves bracketing the merch section.
   Top: orange (#F58220, real-estate section above) -> white (merch).
   Bottom: white (merch) -> teal (#15C4AF, insider section below).
   Injected by the .tclm IIFE, which also neutralizes the homepage's
   existing orange->teal wave so it can't strand against the white. */
.tcl-wave-orange-white {
  background-color: #F58220;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23FFFFFF' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-white-teal {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%2315C4AF' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
/* When bracketed by waves, the section's own borders are redundant */
.tclm-has-waves .tclm-section { border-top: none; border-bottom: none; }

.tclm { overflow-x: hidden; }
.tclm-section {
  background: #FFFFFF;
  padding: 80px 24px 88px;
  border-top: 1px solid rgba(13,51,71,0.06);
  border-bottom: 1px solid rgba(13,51,71,0.06);
}
.tclm-wrap { max-width: 760px; margin: 0 auto; text-align: center; }

.tclm-h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 4.2vw, 52px) !important;
  line-height: 1.1 !important;
  color: var(--color-text-dark) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em;
}
.tclm-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--color-text-light);
  margin: 0 auto 40px;
  line-height: 1.6;
  max-width: 560px;
}

/* Slider shell */
.tclm-slider {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.tclm-viewport {
  overflow: hidden;
  border-radius: 18px;
}
.tclm-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}
.tclm-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 4px 0;
}
.tclm-frame {
  width: 440px;
  max-width: 100%;
  height: 560px;
  border: 0 !important;
  background: transparent !important;
  display: block;
  margin: 0 auto;
}

/* Arrows — teal circles, matching the site's existing slider arrows */
.tclm-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: #15C4AF;
  color: #FFFFFF;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.tclm-arrow:hover { background: #119e8d; transform: translateY(-50%) scale(1.06); }
.tclm-prev { left: -8px; }
.tclm-next { right: -8px; }

/* Dots — teal, matching the site's existing slider dots */
.tclm-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.tclm-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #15C4AF;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tclm-dot:hover { opacity: 0.7; }
.tclm-dot.is-active { opacity: 1; transform: scale(1.25); }

@media (max-width: 600px) {
  .tclm-section { padding: 60px 16px 64px; }
  .tclm-arrow { display: none; }   /* dots + auto-advance only on mobile */
  .tclm-frame { height: 500px; }   /* enough room for the Buy button */
  .tclm-dots { margin-top: 16px; } /* breathing room above the dots */
}

/* ============================================================
   HOMEPAGE BUSINESS CTA BAND — b3
   Self-contained. Namespace: .tclb-cta  (TCL Business CTA).
   Every selector is prefixed .tclb-cta — NO bare element selectors,
   NO global rules — cannot affect anything else on the site.
   Wave injection lives in animations.js (.tclb-cta IIFE).
   Safe to delete as a unit.
   ============================================================ */

/* Waves bracketing the band, placed UNDER the white merch section and
   ABOVE the teal newsletter section: white -> navy on top,
   navy -> teal on the bottom. */
.tcl-wave-white-navy-b {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230D3347' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-navy-teal-b {
  background-color: #0D3347;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%2315C4AF' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}

.tclb-cta { overflow-x: hidden; }
.tclb-cta-section {
  background-color: #0D3347;
  /* First layer keeps the top ~80px flat navy so the wave above meets it
     with no color seam; the teal glow blooms below that line. */
  background-image:
    linear-gradient(180deg, #0D3347 0px, rgba(13,51,71,0) 80px),
    radial-gradient(ellipse 70% 58% at 50% 0%, rgba(21,196,175,0.18) 0%, transparent 62%);
  margin-top: -1px; /* kills the subpixel hairline under the injected wave */
  padding: 96px 24px 100px;
}
.tclb-cta-wrap { max-width: 760px; margin: 0 auto; text-align: center; }

.tclb-cta-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #15C4AF;
  margin: 0 0 20px;
}
.tclb-cta-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 4.6vw, 56px) !important;
  line-height: 1.08 !important;
  color: #FFFFFF !important;
  margin: 0 0 22px !important;
  letter-spacing: -0.01em;
}
.tclb-cta-sub {
  font-family: 'Figtree', sans-serif;
  font-size: clamp(17px, 1.9vw, 20px);
  color: rgba(255,255,255,0.80);
  line-height: 1.65;
  margin: 0 auto 38px;
  max-width: 620px;
}
.tclb-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.tclb-cta-btn-gold,
.tclb-cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 17px;
  padding: 16px 34px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  border: 2px solid transparent;
}
.tclb-cta-btn-gold {
  background: #FFCA08;
  color: #0D3347;
  border-color: #FFCA08;
}
.tclb-cta-btn-gold:hover {
  background: #ffd633;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255,202,8,0.35);
  color: #0D3347;
}
.tclb-cta-btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.55);
}
.tclb-cta-btn-ghost:hover {
  background: #FFFFFF;
  color: #0D3347;
  transform: translateY(-2px);
}
.tclb-cta-fine {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin: 22px 0 0;
}

@media (max-width: 600px) {
  .tclb-cta-section { padding: 70px 18px 74px; }
  .tclb-cta-btns a { width: 100%; }
}

/* ── "List Your Business Free" button for the Featured Businesses section ──
   Solid-gold primary variant of the existing .tcl-viewall pill, so it sits
   beside the outline "Browse All Businesses" button as the primary action.
   Scoped to .tcl-viewall-solid — affects nothing else. */
.tcl-viewall-solid {
  background: #FFCA08 !important;
  color: #0D3347 !important;
  border-color: #FFCA08 !important;
  margin-left: 12px;
}
.tcl-viewall-solid:hover {
  background: #ffd633 !important;
  color: #0D3347 !important;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .tcl-viewall-solid { margin-left: 0; margin-top: 12px; }
}

/* ============================================================
   EVENTS CALENDAR RESTYLE — cal4 (structure & look only)
   Bootstrap Calendar v2.1 (#calendar.cal-context). Pure CSS — the
   widget is never edited (per BD's warning). Sizes in px (BD's
   Bootstrap root is 10px, so rem would render at 62.5%).

   cal4 intentionally styles ONLY the calendar shell: heading, nav
   buttons, grid container, weekday header, day cells, today, and
   hover. It does NOT touch event pills, the count badges, the
   "X Events" text, or the expanded event list — those keep BD's
   default appearance. Nothing here targets event <a> elements.
   ============================================================ */

/* ---- Module heading ---- */
.calendarDate {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  color: #0D3347 !important;
  margin: 0 0 18px !important;
}

/* ---- Nav buttons (Prev / Current / Next, Year / Month) ---- */
.btn-group [data-calendar-nav],
.btn-group [data-calendar-view] {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 100px !important;
  border: 2px solid #15C4AF !important;
  background: #FFFFFF !important;
  color: #0D3347 !important;
  padding: 8px 18px !important;
  margin: 0 3px !important;
  box-shadow: none !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}
.btn-group [data-calendar-nav]:hover,
.btn-group [data-calendar-view]:hover { background: #15C4AF !important; color: #FFFFFF !important; }
.btn-group [data-calendar-view].active { background: #0D3347 !important; border-color: #0D3347 !important; color: #FFFFFF !important; }

/* ---- Grid container ---- */
#calendar.cal-context {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(13,51,71,0.10);
  box-shadow: 0 6px 22px rgba(13,51,71,0.06);
}

/* ---- Weekday header row ---- */
.cal-context .cal-row-head .cal-cell1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  background: #0D3347 !important;
  padding: 14px 0 !important;
  text-align: center;
}

/* ---- Day cells ---- */
.cal-context .cal-month-day {
  height: 100px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(13,51,71,0.07) !important;
  padding: 8px 10px !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.cal-context .cal-cell1 { background: transparent !important; }

/* date number */
.cal-context .cal-month-day span[data-cal-date] {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #0D3347 !important;
}

/* days outside the current month — muted */
.cal-context .cal-day-outmonth { background: #f7f9fa !important; }
.cal-context .cal-day-outmonth span[data-cal-date] { color: #b4c0c7 !important; }

/* weekend tint (subtle warm) */
.cal-context .cal-day-weekend.cal-day-inmonth { background: #FFFDF7 !important; }

/* holidays — soft gold accent on the date number */
.cal-context .cal-day-holiday span[data-cal-date] { color: #C9971C !important; font-weight: 800 !important; }

/* TODAY — teal highlight (overrides BD's grey rgb(0 0 0 /10%)) */
.cal-context .cal-day-today {
  background: rgba(21,196,175,0.14) !important;
  box-shadow: inset 0 0 0 2px #15C4AF !important;
}
.cal-context .cal-day-today span[data-cal-date] {
  background: #15C4AF !important; color: #FFFFFF !important;
  border-radius: 50% !important; width: 32px; height: 32px;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-weight: 800 !important;
}

/* gentle hover on in-month days */
.cal-context .cal-day-inmonth:hover {
  background: rgba(39,170,225,0.08) !important;
  box-shadow: inset 0 0 0 2px rgba(39,170,225,0.45);
  cursor: pointer;
}

/* ---- MOBILE ---- */
@media (max-width: 600px) {
  .calendarDate { font-size: 22px !important; text-align: center; }
  .btn-group { float: none !important; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .cal-context .cal-row-head .cal-cell1 { font-size: 11px !important; padding: 10px 0 !important; }
  .cal-context .cal-month-day { height: 72px !important; padding: 5px 4px !important; }
  .cal-context .cal-month-day span[data-cal-date] { font-size: 14px !important; }
  .cal-context .cal-day-today span[data-cal-date] { width: 26px; height: 26px; }
}

/* ============================================================
   THE LOOP — newsletter signup — loop2
   Wraps a cross-origin GHL form iframe. We style only AROUND the
   iframe (card, eyebrow, title, copy); the fields/button inside
   are styled in GHL. Namespace: .tcl-loop — cannot leak.
   Sizes in px (BD's Bootstrap root is 10px; rem would shrink 37.5%).
   Iframe is injected by animations.js (Froala strips iframes).
   ============================================================ */

.tcl-loop {
  max-width: 620px;
  margin: 32px auto;
  background: #FFFFFF;
  border: 1px solid rgba(35,31,32,0.10);
  border-top: 4px solid #15C4AF;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(35,31,32,0.08);
  padding: 36px 34px 30px;
  text-align: center;
  box-sizing: border-box;
}
.tcl-loop__eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #15C4AF;
  margin: 0 0 12px;
}
.tcl-loop__title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 36px) !important;
  line-height: 1.1 !important;
  color: #231F20 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em;
}
.tcl-loop__sub {
  font-family: 'Figtree', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #5a5658;
  max-width: 46ch;
  margin: 0 auto 22px;
}
.tcl-loop__form { width: 100%; }
.tcl-loop__form iframe {
  width: 100% !important;
  border: none !important;
  min-height: 300px;          /* fallback so it never collapses before GHL resizes */
  display: block;
}

/* focus visibility for accessibility */
.tcl-loop a:focus-visible,
.tcl-loop button:focus-visible { outline: 2px solid #15C4AF; outline-offset: 2px; }

/* ---- Sidebar modifier: compact, left-aligned, full width ---- */
.tcl-loop.tcl-loop--sidebar {
  max-width: 100%;
  margin: 0 0 24px;
  padding: 22px 20px 18px;
  text-align: left;
}
.tcl-loop--sidebar .tcl-loop__eyebrow { font-size: 12px; margin-bottom: 9px; }
.tcl-loop--sidebar .tcl-loop__title { font-size: 22px !important; margin-bottom: 9px !important; }
.tcl-loop--sidebar .tcl-loop__sub { font-size: 15px; margin: 0 0 16px; max-width: none; }
.tcl-loop--sidebar .tcl-loop__form iframe { min-height: 260px; }

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .tcl-loop { padding: 28px 20px 24px; margin: 24px auto; }
  .tcl-loop__sub { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tcl-loop, .tcl-loop * { transition: none !important; animation: none !important; }
}

/* ---- Homepage teal-band variant ----
   For the existing full-width teal "Insider" section. No card — the
   GHL form sits directly on the teal band, centered, matching the
   current homepage look but running on GHL. Apply .tcl-loop--band to
   the wrapper. The form iframe is centered with a sensible max-width. */
.tcl-loop.tcl-loop--band {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 760px !important;
  padding: 0 20px !important;
  margin: 0 auto !important;
}
.tcl-loop--band .tcl-loop__form {
  max-width: 520px;
  margin: 0 auto;
}
.tcl-loop--band .tcl-loop__form iframe { min-height: 320px; }

/* ============================================================
   APP HOME LANDER — app10
   Mobile-first quick-link grid for logged-in app users.
   Dedicated BD page (slug: app-home). Namespace: .tcla
   Pure CSS, px sizing (BD's Bootstrap root is 10px → rem would shrink).

   KEY DECISIONS (root-cause fixes, not patches):
   - NO separate sun watermark. The logo SVG (1047x239) already contains
     the sun + wordmark, so there is nothing to drift over the tiles.
   - Mobile-FIRST: base styles are the phone layout (big tiles, ~20px
     text, icon-on-top centered). Desktop is the enhancement via min-width.
   - Tiles: icon on top, label below, centered, generous padding/height.
   ============================================================ */

.tcla {
  min-height: 100vh;
  background-color: #0D3347;
  background-image: radial-gradient(ellipse 90% 30% at 50% 0%, rgba(21,196,175,0.18) 0%, transparent 65%);
  background-repeat: no-repeat;
  padding: 20px 14px 130px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
}
/* Fixed navy backdrop covering the whole viewport (and beyond), so iOS
   rubber-band overscroll shows navy, never BD's white body. */
.tcla::after {
  content: '';
  position: fixed;
  top: -50vh; left: 0; right: 0; bottom: -50vh;  /* bleed past edges */
  background: #0D3347;
  z-index: -1;
  pointer-events: none;
}
.tcla * { box-sizing: border-box; }

/* ---- Header ---- */
.tcla-head { text-align: center; margin: 0 auto 18px; max-width: 600px; }
.tcla-logo {
  display: block;
  width: 300px;
  max-width: 80vw;
  height: auto;       /* PNG has intrinsic dimensions, so auto height is safe */
  margin: 4px auto 14px;
}
.tcla-tagline {
  font-family: 'Caveat', cursive !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  color: #FFCA08 !important;
  margin: 0 0 6px !important;
  line-height: 1.05;
}
.tcla-welcome {
  font-family: 'Figtree', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* ---- Tile grid: 2 columns, BIG tiles, icon-on-top centered ---- */
.tcla-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}
.tcla-tile {
  display: flex;
  flex-direction: column;        /* icon on top, label below */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 7px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 16px 12px;
  min-height: 96px;              /* compact but still tappable */
  text-decoration: none !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.tcla-tile:active { transform: scale(0.97); background: rgba(21,196,175,0.18); border-color: #15C4AF; }
.tcla-tile-ico { font-size: 32px; line-height: 1; }
.tcla-tile-label {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800;
  font-size: 18px;
  color: #FFFFFF !important;
  line-height: 1.15;
}
.tcla-tile-badge {
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: #F58220;
  color: #FFFFFF;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ---- "Ask Sunni!" label + arrow (points at the GHL bubble) ---- */
.tcla-sunni {
  position: fixed;
  right: 92px;
  bottom: 70px;
  z-index: 9998;
  pointer-events: none;
  text-align: right;
}
.tcla-sunni-text {
  font-family: 'Caveat', cursive !important;
  font-weight: 700;
  font-size: 32px;
  color: #FFCA08;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  display: inline-block;
  position: relative;
}

/* ============================================================
   DESKTOP enhancement (wider screens only). Phone is the default
   above; here we relax to a roomier layout and 4 columns.
   ============================================================ */
@media (min-width: 700px) {
  .tcla { padding: 36px 24px 120px; }
  .tcla-logo { width: 360px; max-width: 60vw; }
  .tcla-tagline { font-size: 38px !important; }
  .tcla-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1040px; }
  .tcla-tile { min-height: 120px; padding: 22px 16px; }
  .tcla-tile-ico { font-size: 38px; }
  .tcla-tile-label { font-size: 18px; }
}

@media (hover: hover) {
  .tcla-tile:hover { background: rgba(21,196,175,0.16); border-color: #15C4AF; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .tcla-tile { transition: none !important; }
}

/* ============================================================
   HOMEPAGE NEW SECTIONS — ns1
   Giveaway, App teaser, Sunni intro, Guides, Social.
   Namespaces: .tcl-give .tcl-app .tcl-sunni .tcl-guides .tcl-social
   All px sizing (BD Bootstrap root is 10px → rem would shrink).
   Waves: 2 new defs below + reuse of existing wave classes.
   Sunni image is a CSS background (Froala-proof — no <img> to strip).
   ============================================================ */

/* ── 2 NEW WAVE DEFINITIONS ─────────────────────────────────
   grey→orange  : above the Giveaway (Find grid grey → orange)
   teal→navy    : below the App (teal App → navy Sunni)
   All other transitions reuse existing wave classes. */
.tcl-wave-grey-orange {
  background-color: #F7F7F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%23F58220' d='M0,35 C240,0 480,70 720,35 C960,0 1200,70 1440,35 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}
.tcl-wave-teal-navy {
  background-color: #15C4AF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230D3347' d='M0,20 C360,70 720,10 1080,45 C1260,62 1380,30 1440,45 L1440,70 L0,70 Z'/%3E%3C/svg%3E");
}

/* ── Shared bits ───────────────────────────────────────────── */
.tcl-give, .tcl-app, .tcl-sunni, .tcl-guides, .tcl-social { overflow-x: hidden; }
.tcl-ns-wrap { max-width: 840px; margin: 0 auto; }
.tcl-ns-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700; font-size: 15px; letter-spacing: 0.22em;
  text-transform: uppercase; margin: 0 0 16px;
}
.tcl-ns-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important; font-size: clamp(34px, 4.6vw, 54px) !important;
  line-height: 1.06 !important; letter-spacing: -0.01em; margin: 0 0 14px !important;
}
.tcl-ns-cav {
  font-family: 'Caveat', cursive !important; font-weight: 600 !important;
  font-size: 34px !important; line-height: 1 !important; margin: 0 0 20px !important;
}
.tcl-ns-sub {
  font-family: 'Figtree', sans-serif; font-size: 20px; line-height: 1.6;
  max-width: 620px; margin: 0 auto 30px;
}

/* ── GIVEAWAY (orange) ─────────────────────────────────────── */
.tcl-give {
  background: #F58220;
  padding: 88px 40px; text-align: center; margin-top: -1px;
}
.tcl-give .tcl-ns-eyebrow { color: #FFCA08; }
.tcl-give .tcl-ns-title { color: #FFFFFF !important; }
.tcl-give .tcl-ns-sub { color: rgba(255,255,255,0.92); }
.tcl-give-btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800;
  font-size: 22px; padding: 20px 46px; border-radius: 100px;
  background: #FFCA08; color: #0D3347 !important; border: none;
  text-decoration: none !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tcl-give-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.26); text-decoration: none !important; }

/* ── APP teaser (teal) ─────────────────────────────────────── */
.tcl-app {
  background: #15C4AF; padding: 88px 40px; text-align: center; margin-top: -1px;
}
.tcl-app .tcl-ns-eyebrow { color: #0D3347; opacity: 0.7; }
.tcl-app .tcl-ns-title { color: #0D3347 !important; }
.tcl-app .tcl-ns-cav { color: #0D3347 !important; }
.tcl-app .tcl-ns-sub { color: #0D3347; opacity: 0.85; }
.tcl-app-badge {
  display: inline-block; font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 24px; border-radius: 100px; background: #0D3347; color: #FFCA08;
}

/* ── SUNNI intro (navy) — image is a CSS background (Froala-proof) ── */
.tcl-sunni {
  background: #0D3347; padding: 64px 40px; margin-top: -1px;
  position: relative; overflow: hidden; text-align: center;
}
/* Mobile-first: Sunni sits on top, centered, in normal flow via ::before */
.tcl-sunni::before {
  content: ''; display: block; width: 230px; height: 320px;
  margin: 0 auto 22px;
  background: url('assets/TP_Sunni_%20Wave.png') center bottom / contain no-repeat;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.35));
}
.tcl-sunni-inner { max-width: 1100px; margin: 0 auto; }
.tcl-sunni .tcl-ns-eyebrow { color: #15C4AF; }
.tcl-sunni .tcl-ns-title { color: #FFFFFF !important; font-size: clamp(36px, 4.6vw, 56px) !important; }
.tcl-sunni .tcl-ns-cav { color: #FFCA08 !important; }
.tcl-sunni .tcl-ns-sub { color: rgba(255,255,255,0.82); }
@media (min-width: 768px) {
  .tcl-sunni { text-align: left; min-height: 540px; display: flex; align-items: center; }
  /* Promote Sunni to an absolutely-positioned figure on the left */
  .tcl-sunni::before {
    position: absolute; left: 4%; bottom: 0; margin: 0;
    width: 36%; height: 92%;
  }
  .tcl-sunni-inner { padding-left: 44%; }
  .tcl-sunni .tcl-ns-sub { margin-left: 0; }
}

/* ── GUIDES (white) ────────────────────────────────────────── */
.tcl-guides { background: #FFFFFF; padding: 88px 40px; text-align: center; }
.tcl-guides .tcl-ns-eyebrow { color: #15C4AF; }
.tcl-guides .tcl-ns-title { color: #0D3347 !important; }
.tcl-guides .tcl-ns-sub { color: #5A7A8A; }
.tcl-guides-ico { font-size: 46px; color: #15C4AF; margin-bottom: 18px; display: block; }
.tcl-guides-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800;
  font-size: 18px; padding: 16px 36px; border-radius: 100px;
  background: #15C4AF; color: #FFFFFF !important; border: 2px solid #15C4AF;
  text-decoration: none !important; transition: all 0.2s ease;
}
.tcl-guides-btn:hover { background: #0FA292; border-color: #0FA292; transform: translateY(-2px); text-decoration: none !important; color: #fff !important; }

/* ── SOCIAL (navy) ─────────────────────────────────────────── */
.tcl-social { background: #0D3347; padding: 88px 40px; text-align: center; margin-top: -1px; }
.tcl-social .tcl-ns-eyebrow { color: #15C4AF; }
.tcl-social .tcl-ns-title { color: #FFFFFF !important; }
.tcl-social .tcl-ns-sub { color: rgba(255,255,255,0.82); }
.tcl-social-ico { font-size: 46px; color: #15C4AF; margin-bottom: 18px; display: block; }
.tcl-social-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.tcl-social-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800;
  font-size: 16px; padding: 14px 26px; border-radius: 100px;
  text-decoration: none !important; border: 2px solid rgba(255,255,255,0.5);
  color: #FFFFFF !important; transition: transform 0.2s ease, background-color 0.2s ease;
}
.tcl-social-btn:hover { transform: translateY(-2px); text-decoration: none !important; }
.tcl-social-btn.is-fb { background: #1877F2; border-color: #1877F2; }
.tcl-social-btn.is-fb:hover { background: #166fe0; }
.tcl-social-btn.is-ig { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); border-color: transparent; }
.tcl-social-btn.is-grp:hover { background: rgba(255,255,255,0.12); }

/* ── NEWSLETTER eyebrow (Sunny Side Up) — only addition to newsletter ── */
.tcl-newsletter-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800; font-size: 14px; letter-spacing: 0.22em;
  text-transform: uppercase; color: #0D3347; opacity: 0.75; margin: 0 0 10px;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .tcl-give, .tcl-app, .tcl-guides, .tcl-social { padding: 60px 18px; }
  .tcl-sunni { padding: 50px 18px; }
  .tcl-give-btn { font-size: 19px; padding: 17px 36px; }
  .tcl-social-btns { flex-direction: column; align-items: center; }
  .tcl-social-btn { width: 100%; max-width: 320px; justify-content: center; }
}
/* ============================================================
   VIDEO LANDERS — vl1
   Three BD pages share one navy video-lander base (.tclvp) and one
   glowing video holder component (.tclv):
     • Free offer page   — add class "tclvp tclvp-offer"  to the page wrapper
     • Confirmation page — add class "tclvp tclvp-confirm"
     • Giveaway page     — add class "tclvp tclvp-give"
   GHL calendar iframe + video iframes are injected by animations.js
   (Froala strips iframes). All px sizing (BD Bootstrap root is 10px).
   ============================================================ */
.tclvp {
  min-height: 100vh; background-color: #0D3347; color: #FFFFFF;
  padding: 70px 24px 90px; position: relative; overflow: hidden;
}
.tclvp::before {
  content: ''; position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 980px); height: min(92vw, 980px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat;
  opacity: 0.05; pointer-events: none;
}
.tclvp-inner { max-width: 860px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.tclvp-eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 700;
  font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: #15C4AF; margin: 0 0 18px;
}
.tclvp-h1 {
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 900 !important;
  font-size: clamp(36px, 5vw, 60px) !important; line-height: 1.05 !important;
  letter-spacing: -0.01em; margin: 0 0 18px !important; color: #FFFFFF !important;
}
.tclvp-h1 .tclvp-hl { color: #FFCA08; }
.tclvp-sub {
  font-family: 'Figtree', sans-serif; font-size: clamp(18px, 2vw, 22px);
  color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto 44px; line-height: 1.6;
}
.tclvp-cav { font-family: 'Caveat', cursive !important; font-weight: 600 !important; font-size: 30px !important; color: #FFCA08 !important; margin: 0 0 8px !important; }

/* ── GLOWING VIDEO HOLDER (shared) ─────────────────────────── */
.tclv {
  position: relative; max-width: 760px; margin: 0 auto; border-radius: 24px; padding: 6px;
  background: linear-gradient(135deg, #15C4AF, #27AAE1, #FFCA08, #F58220);
  animation: tclvGlow 3.2s ease-in-out infinite;
}
@keyframes tclvGlow {
  0%,100% { box-shadow: 0 0 28px 4px rgba(21,196,175,0.45), 0 0 60px 10px rgba(245,130,32,0.25); }
  50%     { box-shadow: 0 0 46px 10px rgba(255,202,8,0.6), 0 0 90px 22px rgba(21,196,175,0.4); }
}
.tclv-screen {
  position: relative; border-radius: 19px; overflow: hidden; aspect-ratio: 16/9;
  background: radial-gradient(ellipse at center, #143b52 0%, #0a2738 100%);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tclv-screen::after {
  content: ''; position: absolute; inset: 0;
  background: url('assets/Favicon_72x72.svg') center/120px no-repeat; opacity: 0.08; pointer-events: none;
}
.tclv-overlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; }
.tclv-play {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, #F58220, #FFCA08);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(245,130,32,0.5);
}
.tclv-play::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255,202,8,0.55); animation: tclvRing 2.4s ease-out infinite;
}
.tclv-play::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); margin-left: 4px;
  width: 0; height: 0; border-style: solid;
  border-width: 16px 0 16px 27px;
  border-color: transparent transparent transparent #0D3347;
}
@keyframes tclvRing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.1); opacity: 0; } }
.tclv-tri { width: 0; height: 0; border-style: solid; border-width: 18px 0 18px 30px; border-color: transparent transparent transparent #0D3347; margin-left: 7px; position: relative; z-index: 2; }
.tclv-label {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #0D3347; background: #FFCA08;
  padding: 10px 22px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3); animation: tclvLabel 1.8s ease-in-out infinite;
}
@keyframes tclvLabel { 0%,100% { transform: translateX(-50%) scale(1); opacity: 0.92; } 50% { transform: translateX(-50%) scale(1.06); opacity: 1; } }
/* injected video iframe fills the screen, sits above the placeholder */
.tclv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* ── OFFER PAGE: calendar block ────────────────────────────── */
.tclvp-next { margin-top: 64px; }
.tclvp-next-h { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800 !important; font-size: clamp(26px, 3.2vw, 38px) !important; margin: 0 0 30px !important; color: #FFFFFF !important; }
.tclvp-cal {
  max-width: 760px; margin: 0 auto; min-height: 300px; border-radius: 18px;
  background: #FFFFFF; padding: 10px; position: relative;
}
.tclvp-cal-loading {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 16px;
  color: #5A7A8A; text-align: center; padding: 80px 0; margin: 0;
}
.tclvp-cal iframe { width: 100%; border: none; min-height: 700px; border-radius: 12px; display: block; }

/* ── CONFIRMATION PAGE bits ────────────────────────────────── */
.tclvp-check {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 26px;
  background: #15C4AF; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(21,196,175,0.4);
}
.tclvp-check::after {
  content: ''; width: 34px; height: 18px; border-left: 6px solid #FFFFFF; border-bottom: 6px solid #FFFFFF;
  transform: rotate(-45deg) translate(2px,-4px); border-radius: 2px;
}
.tclvp-points { list-style: none; padding: 0; margin: 40px auto 0; max-width: 560px; text-align: left; }
.tclvp-points li {
  font-family: 'Figtree', sans-serif; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.9);
  padding: 14px 0 14px 44px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tclvp-points li::before {
  content: ''; position: absolute; left: 6px; top: 18px; width: 20px; height: 11px;
  border-left: 3px solid #FFCA08; border-bottom: 3px solid #FFCA08; transform: rotate(-45deg);
}
.tclvp-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 40px;
  font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800; font-size: 18px;
  padding: 16px 38px; border-radius: 100px; background: #F58220; color: #FFFFFF !important;
  border: 2px solid #F58220; text-decoration: none !important; transition: all 0.2s ease;
}
.tclvp-btn:hover { background: #d96e14; border-color: #d96e14; transform: translateY(-2px); text-decoration: none !important; color: #fff !important; }

/* ── GIVEAWAY PAGE bit ─────────────────────────────────────── */
.tclvp-give-badge {
  display: inline-block; font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800;
  font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: #0D3347; background: #FFCA08;
  padding: 12px 28px; border-radius: 100px; margin-top: 8px;
}

@media (max-width: 767px) {
  .tclvp { padding: 50px 16px 64px; }
  .tclvp-next { margin-top: 48px; }
  .tclvp-points li { font-size: 16px; }
  .tclv-play { width: 70px; height: 70px; }
  .tclv-play::after { border-width: 12px 0 12px 20px; }
  .tclv-label { font-size: 12px; padding: 7px 14px; bottom: 12px; letter-spacing: 0.04em; }
}
/* ============================================================
   GUIDE LANDERS + LIBRARY — gl1
   Per-guide lead-capture lander (.tclgd) + growing Guides Library
   grid (.tcllib). One GHL form (RaXLw3gMkshHMYBlYi2n) serves every
   guide; the hidden guide_requested field is pre-filled from each
   page's data-guide value (see animations.js). All px sizing.
   ============================================================ */

/* ── GUIDE LANDER ──────────────────────────────────────────── */
.tclgd { min-height: 100vh; background-color: #0D3347; color: #FFFFFF; padding: 70px 24px; position: relative; overflow: hidden; }
.tclgd::before {
  content: ''; position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
  width: min(92vw, 980px); height: min(92vw, 980px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat; opacity: 0.05; pointer-events: none;
}
.tclgd-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; display: flex; align-items: center; gap: 60px; }
.tclgd-left { flex: 0 0 42%; display: flex; justify-content: center; perspective: 1600px; }
.tclgd-mock {
  position: relative; max-width: 440px; width: 100%;
}
.tclgd-mock img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 44px rgba(0,0,0,0.5)); }
.tclgd-glow { position: absolute; inset: -30px; z-index: -1; background: radial-gradient(ellipse at center, rgba(21,196,175,0.4), transparent 70%); filter: blur(20px); }
.tclgd-right { flex: 1; }
.tclgd-eyebrow { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 700; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: #15C4AF; margin: 0 0 14px; }
.tclgd-title { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 900 !important; font-size: clamp(32px, 3.8vw, 46px) !important; line-height: 1.05 !important; margin: 0 0 14px !important; color: #FFFFFF !important; }
.tclgd-title .tclgd-hl { color: #FFCA08; }
.tclgd-sum { font-family: 'Figtree', sans-serif; font-size: 18px; color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0 0 24px; max-width: 480px; }
.tclgd-inside-h { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.tclgd-list { list-style: none; margin: 0 0 30px; padding: 0; }
.tclgd-list li { font-family: 'Figtree', sans-serif; font-size: 16.5px; color: rgba(255,255,255,0.9); padding: 8px 0 8px 32px; position: relative; }
.tclgd-list li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 16px; height: 9px; border-left: 3px solid #FFCA08; border-bottom: 3px solid #FFCA08; transform: rotate(-45deg); }
.tclgd-form { background: #fff; border-radius: 16px; padding: 14px; max-width: 460px; box-shadow: 0 16px 40px rgba(0,0,0,0.3); position: relative; min-height: 360px; }
.tclgd-form-loading { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; color: #5A7A8A; text-align: center; padding: 80px 0; margin: 0; }
.tclgd-form iframe { width: 100%; border: none; min-height: 360px; border-radius: 10px; display: block; }
@media (max-width: 880px) {
  .tclgd-inner { flex-direction: column; gap: 36px; text-align: center; }
  .tclgd-left { flex: none; }
  .tclgd-mock { transform: none; max-width: 360px; }
  .tclgd-sum, .tclgd-form { margin-left: auto; margin-right: auto; }
  .tclgd-list { display: inline-block; text-align: left; }
}

/* ── GUIDES LIBRARY ────────────────────────────────────────── */
.tcllib { background: #0D3347; color: #fff; padding: 80px 24px 100px; position: relative; overflow: hidden; }
.tcllib::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: min(80vw, 700px); height: min(80vw, 700px);
  background: url('assets/Favicon_72x72.svg') center/contain no-repeat; opacity: 0.05; pointer-events: none;
}
.tcllib-head { max-width: 760px; margin: 0 auto 50px; text-align: center; position: relative; z-index: 2; }
.tcllib-eyebrow { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 700; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: #15C4AF; margin: 0 0 16px; }
.tcllib-h1 { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 900 !important; font-size: clamp(34px, 4.5vw, 54px) !important; line-height: 1.05 !important; color: #fff !important; margin: 0 0 16px !important; }
.tcllib-sub { font-family: 'Figtree', sans-serif; font-size: clamp(17px, 2vw, 20px); color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0; }
.tcllib-grid { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tcllib-card { background: #1B4A63; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tcllib-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
.tcllib-cover { display: block; width: 100%; aspect-ratio: 17/22; object-fit: cover; background: #0a2738; }
.tcllib-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.tcllib-card-title { font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; color: #fff !important; margin: 0 0 8px !important; line-height: 1.2; }
.tcllib-card-desc { font-family: 'Figtree', sans-serif; font-size: 15px; color: rgba(255,255,255,0.75); line-height: 1.5; margin: 0 0 18px; flex: 1; }
.tcllib-card-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Bricolage Grotesque', sans-serif !important; font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 100px; background: #F58220; color: #fff !important; border: 2px solid #F58220; text-decoration: none !important; transition: all 0.2s ease; }
.tcllib-card-btn:hover { background: #d96e14; border-color: #d96e14; color: #fff !important; text-decoration: none !important; }
@media (max-width: 900px) { .tcllib-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 560px) { .tcllib-grid { grid-template-columns: 1fr; max-width: 360px; } }

.web-page-content p:empty,
.tcl-wave + p:empty,
p:empty + .tcl-wave { display: none !important; }

/* ── MOBILE TAP FIX — slider cards (events/blog/deals) ─────────
   Cards were unclickable on mobile: the ::before/::after image
   layers and caption were intercepting taps before they reached
   the card's link. Decorative layers now ignore pointer events,
   and the link element is forced to cover the whole card on top. */
.slickEvents .pic::before, .slickEvents .pic::after,
.slickBlogArticles .pic::before, .slickBlogArticles .pic::after,
.slickCoupons .pic::before, .slickCoupons .pic::after {
  pointer-events: none !important;
}
.slickEvents .pic > .pic-caption,
.slickBlogArticles .pic > .pic-caption,
.slickCoupons .pic > .pic-caption {
  pointer-events: none !important;
}
.slickEvents .pic > .homepage-link-element,
.slickBlogArticles .pic > .homepage-link-element,
.slickCoupons .pic > .homepage-link-element {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 6 !important;
  pointer-events: auto !important;
}

/* ── FEATURED BUSINESSES: whole card clickable ─────────────────
   The featured-members cards (.tcl-section-navy .well) were only
   clickable on the business-name link. A stretched pseudo-element
   on that title link now covers the entire card, so a tap anywhere
   opens the profile. The card's own button keeps its higher stacking
   so it stays independently clickable. */
.tcl-section-navy .well {
  position: relative !important;
}
.tcl-section-navy .well a.h4::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
}
.tcl-section-navy .well .btn-primary,
.tcl-section-navy .well .btn,
.tcl-section-navy .well a:not(.h4) {
  position: relative;
  z-index: 3;
}