/* =========================================================
   Bla Bla French — Salient child theme custom styles
   =========================================================
   Palette
   -------
   Turquoise (primary):  #0FB5C9
   Deep teal (ink/text): #063B45
   Coral (accent/CTA):   #FF5D73
   Pale tint (tint bg):  #F8FDFF
   White:                #FFFFFF
   ========================================================= */

:root {
  --bla-turquoise: #0FB5C9;
  --bla-turquoise-dark: #0A9CAD;
  --bla-turquoise-light: #E6F9FB;
  --bla-teal: #063B45;
  --bla-coral: #FF5D73;
  --bla-coral-dark: #E84D63;
  --bla-tint: #F8FDFF;
  --bla-white: #FFFFFF;
  --bla-gray: #64748B;
  --bla-light-gray: #F1F5F9;
  --bla-border: #E2E8F0;
  --bla-radius-sm: 0.75rem;
  --bla-radius: 1rem;
  --bla-radius-lg: 1.5rem;
  --bla-radius-xl: 2rem;
  --bla-radius-full: 9999px;
  --bla-shadow-sm: 0 2px 8px rgba(6, 59, 69, 0.06);
  --bla-shadow: 0 10px 30px rgba(6, 59, 69, 0.08);
  --bla-shadow-lg: 0 20px 40px -12px rgba(6, 59, 69, 0.12);
}

/* ---------- Global typography ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--bla-teal);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.vc_custom_heading,
.nectar-scribble-heading,
.wpb_text_column h1,
.wpb_text_column h2,
.wpb_text_column h3,
.wpb_text_column h4,
.wpb_text_column h5,
.wpb_text_column h6 {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bla-teal);
}

p, li, td, th, label, input, textarea, select {
  font-family: "Figtree", ui-sans-serif, system-ui, sans-serif;
}

a {
  color: var(--bla-turquoise);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--bla-turquoise-dark);
}

/* ---------- Layout container helpers ---------- */
.bla-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.bla-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 768px) {
  .bla-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.bla-grid {
  display: grid;
  gap: 1.5rem;
}

.bla-grid-2 {
  grid-template-columns: 1fr;
}

.bla-grid-3 {
  grid-template-columns: 1fr;
}

.bla-grid-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .bla-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .bla-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .bla-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .bla-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.bla-flex {
  display: flex;
}

.bla-flex-col {
  flex-direction: column;
}

.bla-items-center {
  align-items: center;
}

.bla-justify-between {
  justify-content: space-between;
}

.bla-gap-2 { gap: 0.5rem; }
.bla-gap-4 { gap: 1rem; }
.bla-gap-6 { gap: 1.5rem; }
.bla-gap-8 { gap: 2rem; }

.bla-text-center { text-align: center; }
.bla-mx-auto { margin-left: auto; margin-right: auto; }
.bla-mb-4 { margin-bottom: 1rem; }
.bla-mb-6 { margin-bottom: 1.5rem; }
.bla-mb-8 { margin-bottom: 2rem; }
.bla-mb-12 { margin-bottom: 3rem; }
.bla-mt-4 { margin-top: 1rem; }
.bla-mt-6 { margin-top: 1.5rem; }
.bla-mt-8 { margin-top: 2rem; }
.bla-mt-12 { margin-top: 3rem; }

.bla-max-w-2xl { max-width: 42rem; }
.bla-max-w-3xl { max-width: 48rem; }
.bla-max-w-4xl { max-width: 56rem; }

.bla-hidden { display: none; }
.bla-block { display: block; }

@media (min-width: 768px) {
  .bla-md-flex { display: flex; }
  .bla-md-grid { display: grid; }
  .bla-md-block { display: block; }
  .bla-md-hidden { display: none; }
}

/* ---------- Buttons (Salient + generic) ---------- */
body.blabla-brand .nectar-button,
body.blabla-brand a.nectar-button,
body.blabla-brand .nectar-button.small,
body.blabla-brand .nectar-button.medium,
body.blabla-brand .nectar-button.large,
body.blabla-brand .nectar-button.jumbo,
body.blabla-brand .nectar-button.regular-button,
body.blabla-brand .nectar-button.see-through,
body.blabla-brand .nectar-button.see-through-2d,
body.blabla-brand .nectar-button.see-through-3d,
body.blabla-brand .wpb_wrapper > .nectar-button,
body.blabla-brand button[type="submit"],
body.blabla-brand input[type="submit"],
body.blabla-brand .wp-block-button__link,
body.blabla-brand .btn,
body.blabla-brand .comment-form .submit-wrap input[type="submit"] {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--bla-radius-full) !important;
  padding: 0.875rem 2rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: var(--bla-shadow) !important;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.nectar-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--bla-shadow-lg) !important;
}

body.blabla-brand .nectar-button.see-through,
body.blabla-brand .nectar-button.see-through-2d,
body.blabla-brand .nectar-button.see-through-3d,
body.blabla-brand[data-button-style] .nectar-button,
body.blabla-brand[data-button-style] .nectar-button.see-through,
body.blabla-brand[data-button-style] .nectar-button.see-through-2d,
body.blabla-brand[data-button-style] .nectar-button.see-through-3d {
  border-radius: var(--bla-radius-full) !important;
}

/* Solid turquoise (primary) */
.nectar-button[data-color-override="#0FB5C9"],
.nectar-button[data-color-override="false"],
.nectar-button.accent-color,
.nectar-button.turquoise,
.bla-btn-primary {
  background-color: var(--bla-turquoise) !important;
  color: #fff !important;
  border: none !important;
}

.nectar-button.accent-color:hover,
.bla-btn-primary:hover {
  background-color: var(--bla-turquoise-dark) !important;
  color: #fff !important;
}

/* Coral CTA */
.nectar-button[data-color-override="#FF5D73"],
.nectar-button.extra-color-1,
.nectar-button.coral,
.bla-btn-coral {
  background-color: var(--bla-coral) !important;
  color: #fff !important;
  border: none !important;
}

.nectar-button.extra-color-1:hover,
.bla-btn-coral:hover {
  background-color: var(--bla-coral-dark) !important;
  color: #fff !important;
}

/* Outline / white */
.nectar-button.see-through.bla-btn-outline,
.bla-btn-outline {
  background-color: transparent !important;
  color: var(--bla-teal) !important;
  border: 2px solid var(--bla-teal) !important;
  box-shadow: none !important;
}

.bla-btn-outline:hover {
  background-color: var(--bla-teal) !important;
  color: #fff !important;
}

/* White button on dark */
.bla-btn-white {
  background-color: #fff !important;
  color: var(--bla-teal) !important;
}

.bla-btn-white:hover {
  background-color: var(--bla-tint) !important;
}

/* ---------- Header ---------- */
#header-outer,
header#top {
  background-color: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: saturate(180%) blur(12px);
}

header#top nav > ul > li > a,
header#top .sf-menu > li > a,
#header-outer nav > ul > li > a {
  font-family: "Figtree", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--bla-teal) !important;
}

header#top nav > ul > li > a:hover,
header#top .sf-menu > li > a:hover {
  color: var(--bla-turquoise) !important;
}

header#top nav > ul > li.current-menu-item > a,
header#top .sf-menu > li.current-menu-item > a {
  color: var(--bla-turquoise) !important;
}

/* Mobile menu */
#mobile-menu .off-canvas-menu-container nav > ul > li > a,
#mobile-menu .off-canvas-menu-container nav > ul > li > a:hover {
  font-family: "Outfit", sans-serif;
  color: var(--bla-teal);
}

/* Header buttons (if added via menu) */
#header-outer .nectar-button {
  padding: 0.6rem 1.25rem !important;
  font-size: 0.85rem !important;
}

/* ---------- Footer ---------- */
#footer-outer {
  background-color: var(--bla-teal) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

#footer-outer h4,
#footer-outer h5,
#footer-outer h6,
#footer-outer .widget h4 {
  font-family: "Outfit", sans-serif;
  color: #fff !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

#footer-outer a {
  color: rgba(255, 255, 255, 0.8);
}

#footer-outer a:hover {
  color: #fff;
}

#footer-outer .copyright {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
select,
.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
  font-family: "Figtree", sans-serif;
  border: 1px solid var(--bla-border);
  border-radius: var(--bla-radius);
  padding: 0.85rem 1rem;
  background-color: #fff;
  color: var(--bla-teal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--bla-turquoise);
  box-shadow: 0 0 0 3px rgba(15, 181, 201, 0.15);
}

/* ---------- Cards & boxes ---------- */
.bla-card {
  background-color: #fff;
  border: 1px solid var(--bla-border);
  border-radius: var(--bla-radius-xl);
  padding: 2rem;
  box-shadow: var(--bla-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bla-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bla-shadow-lg);
}

.bla-card-dark {
  background-color: var(--bla-teal);
  color: #fff;
  border-radius: var(--bla-radius-xl);
  padding: 2rem;
  box-shadow: var(--bla-shadow-lg);
}

.bla-card-dark h1,
.bla-card-dark h2,
.bla-card-dark h3,
.bla-card-dark h4,
.bla-card-dark p,
.bla-card-dark li,
.bla-card-dark a {
  color: #fff;
}

.bla-card-tint {
  background-color: var(--bla-tint);
  border: 1px solid var(--bla-border);
  border-radius: var(--bla-radius-xl);
  padding: 2rem;
}

/* ---------- Badges ---------- */
.bla-badge {
  display: inline-block;
  background-color: var(--bla-coral);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.9rem;
  border-radius: var(--bla-radius-full);
}

.bla-badge-turquoise {
  background-color: var(--bla-turquoise);
}

/* ---------- Section utilities ---------- */
.bla-section-turquoise {
  background-color: var(--bla-turquoise);
  color: #fff;
}

.bla-section-turquoise h1,
.bla-section-turquoise h2,
.bla-section-turquoise h3,
.bla-section-turquoise p,
.bla-section-turquoise a {
  color: #fff;
}

.bla-section-tint {
  background-color: var(--bla-tint);
}

.bla-section-teal {
  background-color: var(--bla-teal);
  color: #fff;
}

.bla-section-teal h1,
.bla-section-teal h2,
.bla-section-teal h3,
.bla-section-teal p,
.bla-section-teal a {
  color: #fff;
}

/* ---------- Pricing feature list ---------- */
.bla-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bla-feature-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.bla-feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bla-turquoise);
  font-weight: 700;
}

.bla-card-dark .bla-feature-list li::before {
  color: var(--bla-turquoise-light);
}

/* ---------- Acuity iframe wrapper ---------- */
.bla-acuity-wrapper {
  border: 1px solid var(--bla-border);
  border-radius: var(--bla-radius-xl);
  overflow: hidden;
  box-shadow: var(--bla-shadow);
  background-color: #fff;
}

.bla-acuity-wrapper iframe {
  width: 100%;
  min-height: 800px;
  border: 0;
  display: block;
}

/* ---------- Toggle / accordion ---------- */
.bla-toggle-group {
  border-bottom: 1px solid var(--bla-border);
}

.bla-toggle {
  border-top: 1px solid var(--bla-border);
  padding: 1.25rem 0;
}

.bla-toggle summary {
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--bla-teal);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bla-toggle summary::-webkit-details-marker {
  display: none;
}

.bla-toggle summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--bla-turquoise);
  font-weight: 400;
  margin-left: 1rem;
}

.bla-toggle[open] summary::after {
  content: "−";
}

.bla-toggle-content {
  padding-top: 0.75rem;
  color: var(--bla-gray);
  line-height: 1.7;
}

/* ---------- Utility spacing helpers ---------- */
.bla-rounded-xl { border-radius: var(--bla-radius-xl); }
.bla-rounded-full { border-radius: var(--bla-radius-full); }
.bla-shadow-sm { box-shadow: var(--bla-shadow-sm); }
.bla-shadow { box-shadow: var(--bla-shadow); }
.bla-shadow-lg { box-shadow: var(--bla-shadow-lg); }
.bla-text-turquoise { color: var(--bla-turquoise); }
.bla-text-coral { color: var(--bla-coral); }
.bla-text-teal { color: var(--bla-teal); }
.bla-bg-turquoise { background-color: var(--bla-turquoise); }
.bla-bg-coral { background-color: var(--bla-coral); }
.bla-bg-tint { background-color: var(--bla-tint); }
.bla-bg-teal { background-color: var(--bla-teal); }

/* ---------- Salient-specific overrides ---------- */

/* Make toggle titles use brand font */
.toggles .toggle h3 a,
.toggles .toggle h3 a i,
.toggle h3 a {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  color: var(--bla-teal);
}

/* Accent line under headings */
.divider-small-border,
body .divider-small-border {
  background-color: var(--bla-turquoise) !important;
}

/* Fix header search if enabled */
#header-outer .nectar-search-inner-wrap input,
#search-outer input {
  border-radius: var(--bla-radius);
}

/* Blog/post titles */
.blog-title a,
.single .heading-title h1,
.related-posts h3 a {
  font-family: "Outfit", sans-serif;
  color: var(--bla-teal);
}

.blog-title a:hover,
.related-posts h3 a:hover {
  color: var(--bla-turquoise);
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 999px) {
  .bla-card,
  .bla-card-dark,
  .bla-card-tint {
    padding: 1.5rem;
  }

  .bla-acuity-wrapper iframe {
    min-height: 700px;
  }
}

/* Header nav CTA button (add class "blabla-nav-cta" to the menu item) */
.blabla-brand #header-outer .sf-menu li.blabla-nav-cta > a {
  background: var(--bla-turquoise, #0FB5C9) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  margin-left: 8px;
  line-height: 1.2 !important;
  transition: background .2s ease, transform .2s ease;
}
.blabla-brand #header-outer .sf-menu li.blabla-nav-cta > a:hover {
  background: var(--bla-turquoise-dark, #0A9CAD) !important;
  transform: translateY(-1px);
}
.blabla-brand #header-outer .sf-menu li.blabla-nav-cta > a::after,
.blabla-brand #header-outer .sf-menu li.blabla-nav-cta > a::before { display: none !important; }
@media only screen and (max-width: 1000px) {
  .blabla-brand #mobile-menu li.blabla-nav-cta > a {
    background: var(--bla-turquoise, #0FB5C9) !important;
    color: #fff !important;
    border-radius: 999px !important;
    text-align: center;
  }
}

/* ---------- Proof list (numbered steps) ---------- */
.bla-proof-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bla-proof-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.bla-proof-number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--bla-turquoise);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------- Dashboard cards carousel ---------- */
.bla-dashboard-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bla-dashboard-scroll::-webkit-scrollbar {
  display: none;
}

.bla-dashboard-card {
  flex: 0 0 min(86vw, 360px);
  scroll-snap-align: center;
  background: #fff;
  border: 1px solid var(--bla-border);
  border-radius: var(--bla-radius-xl);
  padding: 1.5rem;
  box-shadow: var(--bla-shadow-sm);
}

.bla-card-badge {
  display: inline-block;
  border: 1px solid rgba(15, 181, 201, 0.2);
  background: var(--bla-tint);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bla-turquoise);
}

.bla-mini-card {
  background: rgba(6, 59, 69, 0.03);
  border: 1px solid rgba(6, 59, 69, 0.08);
  border-radius: var(--bla-radius);
  padding: 1rem;
}

.bla-mini-card dl {
  margin: 0;
}

.bla-mini-card dd {
  margin-left: 0;
}

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

.bla-check-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.bla-check-list li::before {
  content: "✓";
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: rgba(15, 181, 201, 0.1);
  color: var(--bla-turquoise);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Blockquote / review cards ---------- */
.bla-blockquote-coral {
  border-left: 4px solid var(--bla-coral);
  background: #fff;
  border-radius: 0 var(--bla-radius) var(--bla-radius) 0;
  padding: 1.5rem;
  box-shadow: var(--bla-shadow);
}

.bla-blockquote-coral p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--bla-teal);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.bla-blockquote-coral footer {
  font-weight: 700;
  color: var(--bla-teal);
}

.bla-review-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bla-radius-xl);
  padding: 2rem;
}

.bla-review-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.bla-review-card footer {
  font-weight: 700;
  color: var(--bla-turquoise-light);
}

/* ---------- Ink button (on turquoise bg) ---------- */
.bla-btn-ink {
  background-color: var(--bla-teal) !important;
  color: #fff !important;
}

.bla-btn-ink:hover {
  background-color: rgba(6, 59, 69, 0.9) !important;
}

/* ---------- How it works panel divider ---------- */
.bla-how-it-works-left {
  border-right: 1px solid var(--bla-border);
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .bla-how-it-works-left {
    border-right: 0;
    padding-right: 0;
    border-bottom: 1px solid var(--bla-border);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}

/* ---------- Notify form ---------- */
.bla-notify-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.bla-notify-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- FAQ accordion ---------- */
.bla-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bla-accordion-item {
  border: 1px solid var(--bla-border);
  border-radius: var(--bla-radius-lg);
  background: #fff;
  padding: 1.25rem 1.5rem;
}

.bla-accordion-title {
  font-size: 1.1rem;
  margin: 0;
  color: var(--bla-teal);
}

.bla-accordion-body p {
  color: var(--bla-gray);
  line-height: 1.7;
  margin: 0.75rem 0 0;
}

/* =========================================================
   Layout hardening for pasted page sections (v1.0.2)
   Fixes: squeezed columns, white gaps, cut-off content.
   ========================================================= */

/* Grid children must be allowed to shrink, otherwise a wide/scrolling
   child (the lesson-example cards) squeezes the neighbouring column. */
.blabla-brand .bla-grid > * {
  min-width: 0;
}

.blabla-brand .bla-section {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Page-builder wrappers add their own spacing: remove doubled-up gaps. */
.blabla-brand .wpb_text_column .bla-section,
.blabla-brand .wpb_wrapper .bla-section,
.blabla-brand .entry-content .bla-section {
  margin: 0;
}

.blabla-brand .wpb_wrapper > p:empty,
.blabla-brand .entry-content > p:empty,
.blabla-brand .bla-section p:empty,
.blabla-brand .bla-section p:empty > br:only-child {
  display: none;
}

.blabla-brand .bla-section img,
.blabla-brand .bla-section iframe {
  max-width: 100%;
}

/* ---------- Lesson-example carousel controls ---------- */
.bla-carousel {
  position: relative;
  min-width: 0;
}

.bla-carousel .bla-dashboard-scroll {
  scroll-behavior: smooth;
}

.bla-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1rem;
}

.bla-carousel-prev,
.bla-carousel-next {
  border: 1px solid rgba(6, 59, 69, 0.15);
  background: #fff;
  color: #063B45;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.bla-carousel-prev:hover,
.bla-carousel-next:hover {
  background: #0FB5C9;
  border-color: #0FB5C9;
  color: #fff;
}

.bla-carousel-dots {
  display: flex;
  gap: 0.5rem;
}

.bla-carousel-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgba(6, 59, 69, 0.2);
  cursor: pointer;
}

.bla-carousel-dot.active {
  background: #0FB5C9;
  transform: scale(1.25);
}

/* ---------- FAQ accordion: collapsed until opened ---------- */
.blabla-brand .bla-accordion-item.is-collapsible .bla-accordion-title {
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
}

.blabla-brand .bla-accordion-item.is-collapsible .bla-accordion-title::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: #0FB5C9;
  font-weight: 700;
}

.blabla-brand .bla-accordion-item.is-collapsible.is-open .bla-accordion-title::after {
  content: "\2013";
}

.blabla-brand .bla-accordion-item.is-collapsible .bla-accordion-body {
  display: none;
}

.blabla-brand .bla-accordion-item.is-collapsible.is-open .bla-accordion-body {
  display: block;
}

/* ---------- Pricing duration switcher (moved out of page content) ---------- */
.blabla-brand .bla-duration-switcher {
  display: inline-flex;
  background: #F1F5F9;
  border-radius: 9999px;
  padding: 0.35rem;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.blabla-brand .bla-duration-btn {
  border: 0;
  background: transparent;
  color: #64748B;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
}

.blabla-brand .bla-duration-btn.active {
  background: #063B45;
  color: #fff;
  box-shadow: 0 2px 8px rgba(6, 59, 69, 0.12);
}

/* Highlighted pricing card is slightly scaled up: leave room so it is never clipped. */
@media (min-width: 1024px) {
  .blabla-brand .bla-section > .bla-container {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
}

/* Never rely on the theme's box model for our own helpers. */
.blabla-brand .bla-container,
.blabla-brand .bla-section,
.blabla-brand .bla-card,
.blabla-brand .bla-card-tint,
.blabla-brand .bla-card-dark,
.blabla-brand .bla-mini-card,
.blabla-brand .bla-dashboard-card,
.blabla-brand .bla-review-card {
  box-sizing: border-box;
}

/* Full-width buttons inside cards must include their own padding. */
.blabla-brand .bla-card a[class*="nectar-button"],
.blabla-brand .bla-card button,
.blabla-brand .bla-card-dark a[class*="nectar-button"],
.blabla-brand .bla-dashboard-card a[class*="nectar-button"] {
  box-sizing: border-box;
  max-width: 100%;
}

/* =========================================================
   v1.0.3 — solid header, full-bleed coloured sections,
   tighter article lists
   ========================================================= */

/* ---------- 1. Header sits ABOVE the page, not over it ---------- */
.blabla-brand #header-space {
  display: block !important;
}

.blabla-brand #header-outer,
.blabla-brand #header-outer.transparent,
.blabla-brand #header-outer[data-transparent-header="true"],
.blabla-brand.transparent-header #header-outer,
.blabla-brand #header-outer #top,
.blabla-brand #header-secondary-outer {
  background-color: #ffffff !important;
}

.blabla-brand #header-outer {
  box-shadow: 0 1px 0 rgba(6, 59, 69, 0.08) !important;
}

.blabla-brand #header-outer #top nav > ul > li > a,
.blabla-brand #header-outer #top nav > ul > li > a > .menu-title-text,
.blabla-brand #header-outer #top nav ul li a,
.blabla-brand #header-outer .slide-out-widget-area-toggle a i,
.blabla-brand #header-outer #top .span_9 > .slide-out-widget-area-toggle a {
  color: var(--bla-teal) !important;
  opacity: 1 !important;
}

.blabla-brand #header-outer #top nav > ul > li > a:hover,
.blabla-brand #header-outer #top nav > ul > li.current-menu-item > a {
  color: var(--bla-turquoise) !important;
}

/* Logo must stay visible on the white bar. */
.blabla-brand #header-outer #logo img,
.blabla-brand #header-outer .row .col.span_3 img {
  opacity: 1 !important;
  filter: none !important;
}

/* Salient pulls the first section up under a transparent header. */
.blabla-brand.transparent-header .container-wrap,
.blabla-brand #ajax-content-wrap .container-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- 2. Coloured sections run edge to edge ---------- */
.blabla-brand #ajax-content-wrap,
.blabla-brand .container-wrap,
.blabla-brand .main-content {
  overflow-x: hidden;
}

.blabla-brand .bla-section-turquoise,
.blabla-brand .bla-section-teal,
.blabla-brand .bla-section-tint {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
  max-width: none;
  border-radius: 0 !important;
}

/* The inner container keeps the text centred and readable. */
.blabla-brand .bla-section-turquoise > .bla-container,
.blabla-brand .bla-section-teal > .bla-container,
.blabla-brand .bla-section-tint > .bla-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 3. Article lists: no blank lines ---------- */
.blabla-brand .bla-section a > h2,
.blabla-brand .bla-section a > h3,
.blabla-brand .bla-section a > h4 {
  margin: 0 !important;
}

.blabla-brand .bla-section hr,
.blabla-brand .bla-section a > br,
.blabla-brand .bla-section a + br,
.blabla-brand .bla-section div > br:first-child,
.blabla-brand .bla-section div > br:last-child {
  display: none !important;
}

.blabla-brand .bla-section a[style*="border-bottom"] {
  line-height: 1.35;
}