/* =========================================================================
   The Builder Economy — page-scoped stylesheet
   -------------------------------------------------------------------------
   EVERYTHING here is scoped under `.be-page` so it CANNOT affect the site's
   existing header, footer, or any other page. It also bundles the small
   Bootstrap-4 subset (grid / flex / spacing / utilities) this page needs, so
   the page renders correctly without loading any global framework.
   Adapted from the original Visily export (styles.css).
   ========================================================================= */

/* ---- Google font families used by the design -------------------------- */
.be-page,
.be-page p { font-family: "Lato", ui-sans-serif, system-ui, sans-serif; }
.be-page {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #1e293b;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
.be-page *,
.be-page *::before,
.be-page *::after { box-sizing: border-box; }
.be-page * { transition: all 0.2s ease; }

.be-page h1, .be-page h2, .be-page h3,
.be-page h4, .be-page h5, .be-page h6 {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #171a1f;
  margin-top: 0;
}
.be-page p { line-height: 1.625; margin-top: 0; }
.be-page a { color: inherit; text-decoration: none; }
.be-page a:hover { text-decoration: none; }
.be-page img { max-width: 100%; }
.be-page ul { margin: 0; }

/* =========================================================================
   Bootstrap-4 subset (scoped)
   ========================================================================= */

/* ---- Grid ---- */
.be-page .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.be-page [class^="col-"],
.be-page [class*=" col-"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.be-page .col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
  .be-page .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) {
  .be-page .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .be-page .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .be-page .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .be-page .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .be-page .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .be-page .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
}

/* ---- Display ---- */
.be-page .d-none { display: none !important; }
.be-page .d-block { display: block !important; }
.be-page .d-inline-block { display: inline-block !important; }
.be-page .d-flex { display: flex !important; }
@media (min-width: 992px) {
  .be-page .d-lg-block { display: block !important; }
  .be-page .d-lg-none { display: none !important; }
}

/* ---- Flex ---- */
.be-page .flex-column { flex-direction: column !important; }
.be-page .flex-grow-1 { flex-grow: 1 !important; }
.be-page .flex-shrink-0 { flex-shrink: 0 !important; }
.be-page .align-items-start { align-items: flex-start !important; }
.be-page .align-items-center { align-items: center !important; }
.be-page .justify-content-center { justify-content: center !important; }
.be-page .justify-content-between { justify-content: space-between !important; }
@media (min-width: 992px) {
  .be-page .justify-content-lg-end { justify-content: flex-end !important; }
}

/* ---- Sizing ---- */
.be-page .w-100 { width: 100% !important; }
.be-page .h-100 { height: 100% !important; }
.be-page .mw-100 { max-width: 100% !important; }

/* ---- Text ---- */
.be-page .text-center { text-align: center !important; }
.be-page .text-uppercase { text-transform: uppercase !important; }
.be-page .text-white { color: #fff !important; }
.be-page .font-weight-medium { font-weight: 500 !important; }
.be-page .font-weight-bold { font-weight: 700 !important; }

/* ---- Position ---- */
.be-page .position-relative { position: relative !important; }
.be-page .position-absolute { position: absolute !important; }

/* ---- Overflow ---- */
.be-page .overflow-hidden { overflow: hidden !important; }

/* ---- Borders ---- */
.be-page .border { border: 1px solid #dee2e6 !important; }
.be-page .border-top { border-top: 1px solid #dee2e6 !important; }
.be-page .border-0 { border: 0 !important; }
.be-page .border-white { border-color: #fff !important; }
.be-page .rounded { border-radius: 0.25rem !important; }
.be-page .rounded-pill { border-radius: 50rem !important; }
.be-page .rounded-circle { border-radius: 50% !important; }

/* ---- Backgrounds ---- */
.be-page .bg-white { background-color: #fff !important; }

/* ---- Shadows (BS defaults) ---- */
.be-page .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important; }
.be-page .shadow { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important; }

/* ---- List ---- */
.be-page .list-unstyled { padding-left: 0; list-style: none; }

/* ---- Buttons ---- */
.be-page .btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  cursor: pointer;
}
.be-page .btn:focus { outline: 0; }

/* ---- Spacing scale (0,.25,.5,1,1.5,3rem) ---- */
.be-page .mt-0 { margin-top: 0 !important; }
.be-page .mt-2 { margin-top: 0.5rem !important; }
.be-page .mt-4 { margin-top: 1.5rem !important; }
.be-page .mt-5 { margin-top: 3rem !important; }
.be-page .mb-0 { margin-bottom: 0 !important; }
.be-page .mb-1 { margin-bottom: 0.25rem !important; }
.be-page .mb-2 { margin-bottom: 0.5rem !important; }
.be-page .mb-3 { margin-bottom: 1rem !important; }
.be-page .mb-4 { margin-bottom: 1.5rem !important; }
.be-page .mb-5 { margin-bottom: 3rem !important; }
.be-page .ml-1 { margin-left: 0.25rem !important; }
.be-page .mx-auto { margin-left: auto !important; margin-right: auto !important; }
.be-page .pt-3 { padding-top: 1rem !important; }
.be-page .pb-5 { padding-bottom: 3rem !important; }
.be-page .p-4 { padding: 1.5rem !important; }
.be-page .p-5 { padding: 3rem !important; }
.be-page .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.be-page .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.be-page .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.be-page .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.be-page .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.be-page .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.be-page .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.be-page .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

@media (min-width: 992px) {
  .be-page .mt-lg-0 { margin-top: 0 !important; }
  .be-page .mb-lg-0 { margin-bottom: 0 !important; }
  .be-page .pr-lg-4 { padding-right: 1.5rem !important; }
  .be-page .pl-lg-4 { padding-left: 1.5rem !important; }
  .be-page .p-lg-5 { padding: 3rem !important; }
}

/* =========================================================================
   Custom design tokens & helpers (from Visily styles.css) — scoped
   ========================================================================= */
.be-page .text-brand { color: #3C83F6 !important; }
.be-page .bg-brand { background-color: #3C83F6 !important; }
.be-page .border-brand { border-color: #3C83F6 !important; }
.be-page .bg-brand-soft { background-color: rgba(60, 131, 246, 0.1) !important; }
.be-page .bg-linkedin { background-color: #0077B5 !important; }
.be-page .text-body-muted { color: #565d6d !important; }
.be-page .text-heading { color: #171a1f !important; }
.be-page .text-heading-dark { color: #111827 !important; }
.be-page .text-slate { color: #374151 !important; }
.be-page .text-slate-light { color: #6B7280 !important; }
.be-page .bg-surface { background-color: #fafafb !important; }
.be-page .border-hairline { border-color: #dee1e6 !important; }
.be-page .border-soft { border-color: #f3f4f6 !important; }
.be-page .border-slate { border-color: #cbd5e1 !important; }
.be-page .divider-line { background-color: #E5E7EB !important; }

.be-page .bg-black-10 { background-color: rgba(0, 0, 0, 0.1) !important; }
.be-page .bg-black-20 { background-color: rgba(0, 0, 0, 0.2) !important; }
.be-page .bg-black-70 { background-color: rgba(0, 0, 0, 0.7) !important; }
.be-page .bg-white-90 { background-color: rgba(255, 255, 255, 0.9) !important; }

.be-page .bg-gradient-brand { background: linear-gradient(to right, #2563EB, #3C83F6); }

.be-page .btn-brand { background-color: #3C83F6; color: #fff; border: none; }
.be-page .btn-brand:hover { background-color: #2563eb; color: #fff; }

.be-page .rounded-xl { border-radius: 0.75rem !important; }
.be-page .rounded-2xl { border-radius: 1rem !important; }
.be-page .rounded-3xl { border-radius: 1.5rem !important; }

.be-page .container-custom {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .be-page .container-custom { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .be-page .container-custom { padding-left: 2rem; padding-right: 2rem; }
}

.be-page .gap-2 { gap: 0.5rem !important; }
.be-page .gap-3 { gap: 0.75rem !important; }
.be-page .gap-4 { gap: 1rem !important; }

.be-page .py-hero { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 992px) { .be-page .py-hero { padding-top: 5rem; padding-bottom: 5rem; } }
.be-page .py-section-lg { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 992px) { .be-page .py-section-lg { padding-top: 5rem; padding-bottom: 5rem; } }

.be-page .aspect-video { position: relative; aspect-ratio: 16 / 9; }
.be-page .aspect-3-4 { position: relative; aspect-ratio: 3 / 4; }
.be-page .object-cover { object-fit: cover; }
.be-page .aspect-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.be-page .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.be-page .center-absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.be-page .vertical-line { position: absolute; left: 0; top: 50%; width: 1px; height: 18rem; transform: translate(-50%, -50%); z-index: 1; }

.be-page .fs-xs { font-size: 0.75rem !important; }
.be-page .fs-sm { font-size: 0.875rem !important; }
.be-page .fs-lg { font-size: 1.125rem !important; }
.be-page .fs-xl { font-size: 1.25rem !important; }
.be-page .fs-2xl { font-size: 1.5rem !important; }

.be-page .section-title { font-size: 1.875rem; }
@media (min-width: 768px) { .be-page .section-title { font-size: 2.25rem; } }
.be-page .hero-title { font-size: 2.25rem; line-height: 1.2; }
@media (min-width: 768px) { .be-page .hero-title { font-size: 3rem; } }
@media (min-width: 992px) { .be-page .hero-title { font-size: 3.75rem; } }
.be-page .episode-title { font-size: 1.5rem; }
.be-page .cta-title { font-size: 2.25rem; }
@media (min-width: 992px) { .be-page .cta-title { font-size: 3rem; } }

.be-page .backdrop-blur { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

.be-page .shadow-card { box-shadow: 0px 2px 5px 0px #171a1f17, 0px 0px 2px 0px #171a1f1f; }
.be-page .shadow-btn-brand { box-shadow: 0px 2px 5px 0px #3C83F633; }
.be-page .shadow-cta { box-shadow: 0px 6px 16px 0px #3B82F666; }

.be-page .img-zoom-container { overflow: hidden; }
.be-page .img-zoom-container img:hover { transform: scale(1.05); }
.be-page .hover-scale-105:hover { transform: scale(1.05); }
.be-page .hover-scale-110:hover { transform: scale(1.1); }
.be-page .hover-title-brand:hover .hover-title-brand-target { color: #3C83F6; }
.be-page .card-hover-lift:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }

.be-page .vertical-divider-gradient { background: linear-gradient(to bottom, transparent, #dee1e6, transparent); }
.be-page .icon-badge { width: 3rem; height: 3rem; }
.be-page .avatar-64 { width: 4rem; height: 4rem; }
.be-page .episode-thumb { width: 10rem; height: 6rem; }
.be-page .play-btn-64 { width: 4rem; height: 4rem; }
.be-page .social-btn-40 { width: 2.5rem; height: 2.5rem; }
.be-page .dot-12 { width: 0.75rem; height: 0.75rem; }

/* iconify web component sizing helper */
.be-page iconify-icon { display: inline-block; line-height: 1; }

/* =========================================================================
   Guides carousel: ensure consistent card heights
   ========================================================================= */
.be-page .be-guides-carousel .be-slide {
  display: flex;
  flex-direction: column;
}
.be-page .be-guides-carousel .be-slide .bg-white {
  display: flex;
  flex-direction: column;
}
/* Content section (title + subtitle) minimum height for 2-liner titles */
.be-page .be-guides-carousel .p-4:last-of-type {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.be-page .be-guides-carousel .p-4:last-of-type > div:first-child {
  min-height: 5.5rem !important;
}

/* =========================================================================
   Workshops carousel: fixed card heights + scrollable descriptions
   ========================================================================= */
/* Reduce gap between cards */
.be-page .be-workshops-carousel {
  /* gap: 0.4rem !important; */
}
.be-page .be-workshops-carousel .be-slide {
  display: flex;
  flex-direction: column;
}
/* Fixed card height (icon badge + title + description + button) */
.be-page .be-workshops-carousel .bg-white {
  display: flex;
  flex-direction: column;
  height: 22rem; /* Fixed height for all cards */
}
/* Description area: fixed height for 3 lines */
.be-page .be-workshops-carousel .p-4 p:not(.mb-0) {
  min-height: 4.5rem; /* Ensures space for 3 lines minimum */
  max-height: 4.5rem; /* Cap at 3 lines */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem; /* Account for scrollbar space */
}
/* Reduce button font size to prevent wrapping */
.be-page .be-workshops-carousel .btn {
  font-size: 0.875rem;
  padding: 0.5rem 1rem !important;
  white-space: nowrap;
}