Bullet.so Custom CSS

/* ==================================================
   abc-bullet-so-template.css
   v0.1
   Custom Bullet.so Theme by Andrew Borden-Chisholm
   ================================================== */

/* ----------------------
   Root Variables (Light)
   ---------------------- */
:root {
  /* Layout */
  --container-width: 87%;
  --notion-max-width: 87%;
  --navbar-height: 90px;
  --navbar-padding: 3rem;
  --border-radius: 10px;
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;
  
  /* Background */
  
    
 /* Tweak blog post title line height */
.notion-page-title {
  line-height: 1.2 !important;  /* Adjust this value (e.g. 1.1, 1.3) to your preference */
  margin-bottom: 0.5em;         /* Optional: adjust spacing below the title */
}

/* Hide the top breadcrumb navigation */
.breadcrumbs.breadcrumbs-top {
  display: none !important;
}

  /* Typography */
  --primary-font: "Poppins";
  --secondary-font: var(--primary-font);
  --title-font-size: 3rem;
  --heading1: calc(var(--heading-font-size) * 2.5);
  --heading2: calc(var(--heading-font-size) * 1.75);
  --heading3: calc(var(--heading-font-size) * 1.25);

  /* Navbar Styling */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;

  /* General Colors */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.8);

  /* Notion Color Scheme */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h), var(--notion-blue-s), 90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h), calc(var(--notion-blue-s) - 5%), 85%);

  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));

  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));

  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ----------------------
   Dark Mode Overrides
   ---------------------- */
.dark-mode {
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.8);

  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 65%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
}

/* ----------------------
   Bullet Lists and Icons
   ---------------------- */
/* Restore normal bullets */
ul.notion-list-disc {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
}

ul.notion-list-disc > li {
  position: relative;
  padding-left: 0.5rem;
}

/* .notion-list-disc:before {
  /* List Icon */
/*  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg); */
/*  background-image: none;
  background-repeat: no-repeat;
  content: "";
  height: 100%;
  left: 9px;
  position: absolute;
  top: 7px;
  width: 100%;
}
*/

/* ----------------------
   Bullet Button Styles
   ---------------------- */
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
  text-align: center;
}

.bullet-btn:hover {
  box-shadow: -20px 0 50px #12c2e9a8, 10px 10px 40px #c471ed82, 10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
}

/* ----------------------
   Notion Inline Icons
   ---------------------- */
.notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin: 0;
}

.notion-callout .notion-page-icon-inline > * {
  margin: 0 auto;
}

/* ==================================================
   📱 MOBILE CUSTOMIZATIONS (max-width: 800px)
   ================================================== */

@media (max-width: 800px) {
  /* 🔠 Reduce heading sizes for small screens */
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }

  .notion-h1 {
    line-height: 60px;
  }

  /* 📐 Adjust layout columns to stack */
  .bullet-3-column,
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bullet-3-column .notion-column,
  .bullet-4-column .notion-column {
    width: 100% !important;
    margin: 0 auto;
  }

  /* 📚 Resize blog and section headers */
  .blog-section .header,
  .categories-section .header,
  .hero_section h1,
  .blog_page_content .notion-h1,
  .related-posts .header {
    font-size: 30px;
  }

  .blog_page_content .notion-h2 {
    font-size: 28px;
    margin-top: 0;
  }

  .blog_page_content .notion-h3 {
    font-size: 20px;
  }

  /* 🧭 Responsive navigator and list tweaks */
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }

  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }

  .notion-list-view .notion-list-item-body {
    gap: 23px;
    flex-wrap: wrap;
  }

  .notion-list-item-property {
    margin-left: 0;
  }

  .notion-gallery-grid-size-large {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* 📱 Reduce icon and card padding */
  .notion-collection-group .notion-collection-group-title {
    padding: 20px 0 30px;
  }

  .notion-collection-group .notion-list-view {
    padding: 0 3px;
  }

  .notion-h1 {
    padding-top: 0;
  }
}

/* ==================================================
   ✨ ANIMATION: BLUR-IN ON SCROLL (OPTIONAL)
   Easily disable by commenting this section out
   ================================================== */

/* Define keyframes for blur-in animation */
@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* Use on any element with class .blur-in */
.blur-in {
  opacity: 0;
  animation: blurIn 0.8s ease-out forwards;
  animation-delay: 0.1s; /* Staggered delay if needed */
}

/* Optional: Add a class like 'visible' on scroll for precise control */
@media (prefers-reduced-motion: no-preference) {
  .blur-in {
    will-change: opacity, transform, filter;
  }

  .blur-in.visible {
    animation: blurIn 0.8s ease-out forwards;
  }
}

/* ----------------------
   Add your custom block styles below
   ---------------------- */

/* ==================================================
   🧱 CUSTOM BLOCK STYLE TEMPLATES (disabled by default)
   Uncomment to activate, then customize as needed
   ================================================== */

/*
.notion-callout.custom-highlight {
  background-color: var(--notion-yellow);
  border-left: 5px solid orange;
  padding: 1rem 1.5rem;
}
*/

/*
.notion-h2.section-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--notion-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}
*/

/*
.custom-image-rounded img {
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
*/

/*
.custom-cta-box {
  background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
  padding: 2rem;
  color: #fff;
  text-align: center;
  border-radius: var(--border-radius);
}
*/


/* .custom-divider {
  border-top: 1px dashed var(--notion-gray);
  margin: 3rem 0;
}
*/

/* ==================================================
   ⬜ HORIZONTAL LINE (DIVIDER) CUSTOMIZATION
   Adjusts thickness, spacing, and color of lines
   ================================================== */
   
   
.notion-hr, .notion-divider, .notion-page-content hr {
  border: none;
  height: 1px; /* adjust thickness */
  background-color: #888888; /* change color */
  margin: 2em 0; /* spacing */
}

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Blue Scale */
  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h),var(--notion-blue-s),90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h),calc(var(--notion-blue-s) - 5%),85%);

  /* Red Scale */
  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));

  /* Pink Scale */
  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));

  /* Purple Scale */
  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   2. DARK MODE VARIABLES
   ========================================================================== */
.dark-mode {
  /* Color Overrides */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));

  /* Shadows & Navbar */
  --callout-shadow-opacity: 0;
  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray Scale Adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.1
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Blue Scale */
  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h),var(--notion-blue-s),90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h),calc(var(--notion-blue-s) - 5%),85%);

  /* Red Scale */
  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));

  /* Pink Scale */
  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));

  /* Purple Scale */
  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   2. DARK MODE VARIABLES
   ========================================================================== */
.dark-mode {
  /* Color Overrides */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));

  /* Shadows & Navbar */
  --callout-shadow-opacity: 0;
  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray Scale Adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. MOBILE NAV OVERLAY STYLING
   ========================================================================== */
/* When the hamburger menu opens, make the overlay 60% opaque
   and blur whatever’s underneath */
.navbar-menu,
.navbar-menu.open,
.bullet-navbar-cta .mobile-menu {
  /* 60% opacity of your existing dark nav background (#111212) */
  background-color: rgba(17,18,18,0.6) !important;

  /* blur the page behind the overlay (10px here ≈ a heavy blur—you can bump it up or down) */
  -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.2
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Blue Scale */
  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h),var(--notion-blue-s),90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h),calc(var(--notion-blue-s) - 5%),85%);

  /* Red Scale */
  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));

  /* Pink Scale */
  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));

  /* Purple Scale */
  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   2. DARK MODE VARIABLES
   ========================================================================== */
.dark-mode {
  /* Color Overrides */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));

  /* Shadows & Navbar */
  --callout-shadow-opacity: 0;
  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray Scale Adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. MOBILE NAV OVERLAY STYLING
   ========================================================================== */

/* Apply 60% opacity and a “50%”–level blur to the mobile menu overlay */
#navbarMenu.mobile-btn.is-active {
  /* 60% opacity on your dark nav background */
  background-color: rgba(17, 18, 18, 0.6) !important;

  /* blur everything behind the overlay (8px ≈ a medium-strength blur — tweak up/down as needed) */
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Blue Scale */
  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h),var(--notion-blue-s),90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h),calc(var(--notion-blue-s) - 5%),85%);

  /* Red Scale */
  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));

  /* Pink Scale */
  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));

  /* Purple Scale */
  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   2. DARK MODE VARIABLES
   ========================================================================== */
.dark-mode {
  /* Color Overrides */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));

  /* Shadows & Navbar */
  --callout-shadow-opacity: 0;
  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray Scale Adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. MOBILE NAV OVERLAY STYLING
   ========================================================================== */

/* Apply 60% opacity and a “50%”–level blur to the mobile menu overlay */
#navbarMenu.mobile-btn.is-active {
  /* 60% opacity on your dark nav background */
  background-color: rgba(17, 18, 18, 0.6) !important;

  /* blur everything behind the overlay (8px ≈ a medium-strength blur — tweak up/down as needed) */
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   15. MOBILE NAV OVERLAY STYLING (continued)
   ========================================================================== */

/* 15.1 Remove full-row highlight on mobile menu items, only change text color */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  background-color: transparent !important;
  color: #f6ca5d           !important;
}

/* 15.2 Site Header: same 60% opacity & blur as mobile menu */
nav.navbar,
.navbar {
  background-color: rgba(17, 18, 18, 0.6) !important;
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.4
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   0. NAVBAR ALPHA VARIABLE (light & dark)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* 60% of your normal navbar-btn-bg color */
  --navbar-bg-alpha: rgba(17, 18, 18, 0.6);
}
.dark-mode {
  /* 60% of the inverted navbar-btn-bg (white) */
  --navbar-bg-alpha: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Blue Scale */
  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h),var(--notion-blue-s),90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h),var(--notion-blue-s),var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h),calc(var(--notion-blue-s) - 5%),85%);

  /* Red Scale */
  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h),var(--notion-red-s),var(--notion-red-l));

  /* Pink Scale */
  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h),var(--notion-pink-s),var(--notion-pink-l));

  /* Purple Scale */
  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h),var(--notion-purple-s),var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   2. DARK MODE VARIABLES
   ========================================================================== */
.dark-mode {
  /* Color Overrides */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h),var(--fg-color-s),var(--fg-color-l),.8);

  /* Background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h),var(--bg-color-s),var(--bg-color-l));

  /* Shadows & Navbar */
  --callout-shadow-opacity: 0;
  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray Scale Adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h),var(--notion-gray-s),90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h),var(--notion-gray-s),var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. MOBILE NAV OVERLAY STYLING
   ========================================================================== */

/* Apply 60% opacity and a “50%”–level blur to the mobile menu overlay */
#navbarMenu.mobile-btn.is-active {
  /* 60% opacity on your dark nav background */
  background-color: rgba(17, 18, 18, 0.6) !important;

  /* blur everything behind the overlay (8px ≈ a medium-strength blur — tweak up/down as needed) */
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   15. NAV OVERLAY & HEADER: translucent + blur + hover tweak
   ========================================================================== */
#navbarMenu.mobile-btn.is-active,
nav.navbar,
.navbar {
  /* use the alpha var so it toggles light/dark automatically */
  background-color: var(--navbar-bg-alpha) !important;

  /* blur everything behind it */
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* on mobile menu items, remove full-row fill and only change text color */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  background-color: transparent !important;
  color: #f6ca5d           !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.6
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Mobile menu overlay background (light mode) */
  --navbar-menu-background-color: rgba(17, 18, 18, 0.6);

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h), var(--notion-blue-s), 90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h), calc(var(--notion-blue-s) - 5%), 85%);

  /* Red Scale */
  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));

  /* Pink Scale */
  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));

  /* Purple Scale */
  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Mobile menu overlay (dark mode) */
  --navbar-menu-background-color: rgba(255, 255, 255, 0.6);

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. MOBILE NAV OVERLAY STYLING
   ========================================================================== */

/* Apply 60% opacity and a “50%”–level blur to the mobile menu overlay */
#navbarMenu.mobile-btn.is-active {
  /* 60% opacity on your dark nav background */
  background-color: rgba(17, 18, 18, 0.6) !important;

  /* blur everything behind the overlay (8px ≈ a medium-strength blur — tweak up/down as needed) */
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* ==========================================================================
   15. NAV OVERLAY & ITEM HOVER
   ========================================================================== */

/* 15.1 Mobile menu overlay — uses the var you just set above */
#navbarMenu.mobile-btn.is-active {
  background-color: var(--navbar-menu-background-color) !important;

  /* only the overlay gets the blur */
  -webkit-backdrop-filter: blur(8px) !important;
          backdrop-filter: blur(8px) !important;
}

/* 15.2 On menu-item hover, remove any full-row fill and tint the text */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  background-color: transparent !important;
  color: #f6ca5d           !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.7
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}
.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.8
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.9
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* Define your custom light-gray background (change to your desired hex) */
:root {
  --callout-light-bg: #f5f5f5;
}

/* Override Notion’s gray callout only when NOT in dark mode */
body:not(.dark-mode) .notion-callout.notion-gray_background_co {
  /* light gray fill instead of dark */
  background-color: var(--callout-light-bg) !important;
  /* black text throughout */
  color: #000                   !important;
}

/* Ensure title, body text & list items inside the callout are black */
body:not(.dark-mode) .notion-callout.notion-gray_background_co .notion-callout-title,
body:not(.dark-mode) .notion-callout.notion-gray_background_co .notion-callout-text,
body:not(.dark-mode) .notion-callout.notion-gray_background_co li {
  color: #000 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.10
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* Define your custom light-gray background (change to your desired hex) */
:root {
  --callout-light-bg: #f0f0f0; /* adjust this value for future revisions */
}

/* Override all callout blocks in light mode */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* Ensure titles, body text & list items inside callouts remain black */
body:not(.dark-mode) .notion-callout .notion-callout-title,
body:not(.dark-mode) .notion-callout .notion-callout-text,
body:not(.dark-mode) .notion-callout li {
  color: #000 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.11
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background (tweak as needed) */
:root {
  --callout-light-bg: #f0f0f0;  /* Future revisions: change this hex */
}

/* — Force callouts to use flex so icon sits beside text */
.notion-callout {
  display: flex !important;
  align-items: flex-start;
}

/* — Give the icon some breathing room to the right */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.25rem !important;
}

/* — Apply light-mode colors to every element inside a callout */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure ALL inner text (title, body, lists) is black */
body:not(.dark-mode) .notion-callout *,
body:not(.dark-mode) .notion-callout *::before,
body:not(.dark-mode) .notion-callout *::after {
  color: #000 !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout .notion-hr,
body:not(.dark-mode) .notion-callout hr {
  background-color: #ccc     !important;  /* or choose your grey */
  border:           none    !important;
  height:           1px      !important;
  margin:           1rem 0   !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.12
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.13
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.14
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.15
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent any outline, box-shadow or transform on callout hover or when open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the plus/minus toggle icon injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}

/* — Disable pointer events on the summary element so it never moves or shows cursor */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the callout block icon for Table of Contents callouts  
     (swap “.co-table-of-contents” for your real TOC callout class) */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.16
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent any outline, box-shadow or transform on callout hover or when open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the plus/minus toggle icon injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}

/* — Disable pointer events on the summary element so it never moves or shows cursor */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the callout block icon for Table of Contents callouts  
     (swap “.co-table-of-contents” for your real TOC callout class) */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   20. BLOG CALLOUT TOGGLE & TOC ICON TWEAKS
   ========================================================================== */

/* 1. Re-enable click events on the toggle summary */
.notion-toggle summary {
  pointer-events: auto !important;
}

/* 2. Remove the gradient hover/focus styling on the toggle container */
.notion-toggle:hover,
.notion-toggle:focus-within {
  background: none      !important;
  box-shadow: none      !important;
  border: none          !important;
}

/* 3. Hide any auto-injected plus/minus icon */
.notion-toggle summary::after {
  display: none !important;
}

/* 4. Hide the callout‐block icon only on Table of Contents callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.17
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent any outline, box-shadow or transform on callout hover or when open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the plus/minus toggle icon injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}

/* — Disable pointer events on the summary element so it never moves or shows cursor */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the callout block icon for Table of Contents callouts  
     (swap “.co-table-of-contents” for your real TOC callout class) */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   20. BLOG CALLOUT TOGGLE & TOC ICON TWEAKS
   ========================================================================== */

/* 1. Re-enable click events on the toggle summary */
.notion-toggle summary {
  pointer-events: auto !important;
}

/* 2. Remove the gradient hover/focus styling on the toggle container */
.notion-toggle:hover,
.notion-toggle:focus-within {
  background: none      !important;
  box-shadow: none      !important;
  border: none          !important;
}

/* 3. Hide any auto-injected plus/minus icon */
.notion-toggle summary::after {
  display: none !important;
}

/* 4. Hide the callout‐block icon only on Table of Contents callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   21. TOC MOBILE WRAP FIX
   ========================================================================== */

/* Allow the TOC container to scroll horizontally if needed */
.notion-callout .notion-table-of-contents {
  overflow-x: auto      !important;
  padding-bottom: 0.5rem; /* give a bit more breathing room */
}

/* Let TOC items wrap onto multiple lines instead of truncating */
.notion-callout .notion-table-of-contents-item-body {
  white-space: normal   !important;
  word-break: break-word!important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.18
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent any outline, box-shadow or transform on callout hover or when open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the plus/minus toggle icon injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}

/* — Disable pointer events on the summary element so it never moves or shows cursor */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the callout block icon for Table of Contents callouts  
     (swap “.co-table-of-contents” for your real TOC callout class) */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   20. BLOG CALLOUT TOGGLE & TOC ICON TWEAKS
   ========================================================================== */

/* 1. Re-enable click events on the toggle summary */
.notion-toggle summary {
  pointer-events: auto !important;
}

/* 2. Remove the gradient hover/focus styling on the toggle container */
.notion-toggle:hover,
.notion-toggle:focus-within {
  background: none      !important;
  box-shadow: none      !important;
  border: none          !important;
}

/* 3. Hide any auto-injected plus/minus icon */
.notion-toggle summary::after {
  display: none !important;
}

/* 4. Hide the callout‐block icon only on Table of Contents callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   21. TOC MOBILE WRAP FIX
   ========================================================================== */

/* Allow the TOC container to scroll horizontally if needed */
.notion-callout .notion-table-of-contents {
  overflow-x: auto      !important;
  padding-bottom: 0.5rem; /* give a bit more breathing room */
}

/* Let TOC items wrap onto multiple lines instead of truncating */
.notion-callout .notion-table-of-contents-item-body {
  white-space: normal   !important;
  word-break: break-word!important;
}

/* ==========================================================================
   22. MOBILE TOC REFINEMENTS
   ========================================================================== */

/* — 1. Remove summary background, padding/margin shift & hover effect */
.notion-callout .notion-toggle summary {
  background: none              !important;
  padding:    0.75rem 1rem      !important;
  margin:     0                !important;
  transition: none             !important;
  transform:  none             !important;
}
.notion-callout .notion-toggle summary:hover {
  background: none !important;
}

/* — 2. Keep the ▼ marker but hide any default expand/collapse icon */
.notion-callout .notion-toggle summary::after {
  display: none !important;
}
.notion-callout .notion-toggle summary::before {
  content: '▼ '                  !important;
  margin-right: 0.5rem          !important;
}

/* — 3. Remove underlines/border-bottom on TOC links */
.notion-callout .notion-table-of-contents-item-body {
  text-decoration: none         !important;
  border-bottom: none           !important;
}

/* — 4. Tighter spacing inside TOC block on mobile */
@media (max-width: 800px) {
  .notion-callout .notion-callout-text {
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
  }
  .notion-callout .notion-table-of-contents {
    margin: 0 !important;
    padding: 0.5rem 0 !important;
  }
  .notion-callout .notion-table-of-contents-item {
    margin: 0.25rem 0 !important;
    padding: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.19
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent any outline, box-shadow or transform on callout hover or when open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the plus/minus toggle icon injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}

/* — Disable pointer events on the summary element so it never moves or shows cursor */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the callout block icon for Table of Contents callouts  
     (swap “.co-table-of-contents” for your real TOC callout class) */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   20. BLOG CALLOUT TOGGLE & TOC ICON TWEAKS
   ========================================================================== */

/* 1. Re-enable click events on the toggle summary */
.notion-toggle summary {
  pointer-events: auto !important;
}

/* 2. Remove the gradient hover/focus styling on the toggle container */
.notion-toggle:hover,
.notion-toggle:focus-within {
  background: none      !important;
  box-shadow: none      !important;
  border: none          !important;
}

/* 3. Hide any auto-injected plus/minus icon */
.notion-toggle summary::after {
  display: none !important;
}

/* 4. Hide the callout‐block icon only on Table of Contents callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   21. TOC MOBILE WRAP FIX
   ========================================================================== */

/* Allow the TOC container to scroll horizontally if needed */
.notion-callout .notion-table-of-contents {
  overflow-x: auto      !important;
  padding-bottom: 0.5rem; /* give a bit more breathing room */
}

/* Let TOC items wrap onto multiple lines instead of truncating */
.notion-callout .notion-table-of-contents-item-body {
  white-space: normal   !important;
  word-break: break-word!important;
}

/* ==========================================================================
   22. MOBILE TOC REFINEMENTS
   ========================================================================== */

/* — 1. Remove summary background, padding/margin shift & hover effect */
.notion-callout .notion-toggle summary {
  background: none              !important;
  padding:    0.75rem 1rem      !important;
  margin:     0                !important;
  transition: none             !important;
  transform:  none             !important;
}
.notion-callout .notion-toggle summary:hover {
  background: none !important;
}

/* — 2. Keep the ▼ marker but hide any default expand/collapse icon */
.notion-callout .notion-toggle summary::after {
  display: none !important;
}
.notion-callout .notion-toggle summary::before {
  content: '▼ '                  !important;
  margin-right: 0.5rem          !important;
}

/* — 3. Remove underlines/border-bottom on TOC links */
.notion-callout .notion-table-of-contents-item-body {
  text-decoration: none         !important;
  border-bottom: none           !important;
}

/* — 4. Tighter spacing inside TOC block on mobile */
@media (max-width: 800px) {
  .notion-callout .notion-callout-text {
    margin: 0 !important;
    padding: 0.5rem 1rem !important;
  }
  .notion-callout .notion-table-of-contents {
    margin: 0 !important;
    padding: 0.5rem 0 !important;
  }
  .notion-callout .notion-table-of-contents-item {
    margin: 0.25rem 0 !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   23. TOC TOGGLE DYNAMICS & MOBILE WIDTH
   ========================================================================== */

/* 1. Hide the native triangle marker */
.notion-toggle summary::-webkit-details-marker {
  display: none !important;
}

/* 2. Inject a custom ▶ / ▼ marker based on open state */
.notion-toggle summary::before {
  content: '▶\00a0'       !important; /* right-pointing triangle + space */
  font-size: 1em           !important;
  transition: transform 0.2s ease !important;
}
.notion-toggle[open] summary::before {
  content: '▼\00a0'       !important; /* down-pointing triangle */
}

/* 3. Remove any background or hover shifts on the toggle container */
.notion-toggle {
  background: transparent !important;
  box-shadow: none        !important;
  border: none            !important;
  padding: 0              !important;
}
.notion-toggle summary,
.notion-toggle summary:hover {
  background: none        !important;
  transform: none         !important;
  transition: none        !important;
  cursor: pointer         !important;
}

/* 4. Ensure the TOC block uses full width on mobile */
@media (max-width: 800px) {
  .notion-callout.co-table-of-contents {
    padding: 1rem !important;
    margin: 0.5rem !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents {
    width: 100% !important;
    margin: 0    !important;
    padding: 0  !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents-item {
    padding: 0.25rem 0 !important;
    margin: 0           !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.20
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */
/* Prevent any outline, box-shadow or transform on callout hover or open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:    none !important;
  box-shadow: none !important;
  transform:  none !important;
}
/* Hide the built-in plus/minus injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}
/* Temporarily disable pointer events on the summary so it doesn’t shift */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}
/* Hide the callout-icon only for your TOC callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}

/* ==========================================================================
   20. TOGGLE CLICK ENABLE + STYLE RESET
   ========================================================================== */
/* Re-enable the clicks on the TOC summary and strip any hover/transform */
.notion-callout.co-table-of-contents .notion-toggle summary {
  pointer-events: auto       !important;
  background:     none       !important;
  border:         none       !important;
  box-shadow:     none       !important;
  transform:      none       !important;
  transition:     none       !important;
  cursor:         pointer    !important;
  padding:        0          !important;
  margin:         0          !important;
}
/* Reset the toggle container too */
.notion-callout.co-table-of-contents .notion-toggle {
  background: transparent   !important;
  box-shadow: none          !important;
  border: none              !important;
  padding: 0                !important;
}

/* ==========================================================================
   21. TOC MOBILE WRAP FIX
   ========================================================================== */
/* Allow horizontal scroll/wrapping of long lines */
.notion-callout.co-table-of-contents .notion-table-of-contents {
  overflow-x:    auto       !important;
  white-space:   normal     !important;
  word-break:    break-word !important;
  padding-bottom: 0.5rem    !important;
}

/* ==========================================================================
   23. DYNAMIC TRIANGLE & FULL-WIDTH ON MOBILE
   ========================================================================== */
/* 1. Hide the browser’s native ▶/▼ marker */
.notion-callout.co-table-of-contents .notion-toggle summary::-webkit-details-marker,
.notion-callout.co-table-of-contents .notion-toggle summary::-moz-list-bullet {
  display: none !important;
}

/* 2. Inject a small dynamic ▶ when closed, ▼ when open */
.notion-callout.co-table-of-contents .notion-toggle summary::before {
  content:        '▶'       !important;
  display:        inline-block !important;
  margin-right:   0.5rem    !important;
  font-size:      0.9em     !important;
  transition:     transform 0.2s ease !important;
}
.notion-callout.co-table-of-contents .notion-toggle[open] summary::before {
  content: '▼' !important;
}

/* 3. Force TOC to fill full width on mobile */
@media (max-width: 800px) {
  .notion-callout.co-table-of-contents {
    padding: 1rem        !important;
    margin:  0.5rem 0    !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents {
    width:      100%     !important;
    max-width:  100%     !important;
    margin:     0        !important;
    padding:    0        !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents-item {
    padding:    0.25rem  0 !important;
    margin:     0          !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.21
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent any outline, box-shadow or transform on callout hover or when open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the plus/minus toggle icon injected via summary::after */
.notion-callout summary::after {
  display: none !important;
}

/* — Disable pointer events on the summary element so it never moves or shows cursor */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the callout block icon for your TOC callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}


/* ==========================================================================
   20. BLOG CALLOUT TOGGLE & TOC ICON TWEAKS
   ========================================================================== */

/* 1. Re-enable click events on the toggle summary */
.notion-toggle summary {
  pointer-events: auto !important;
}

/* 2. Remove the gradient hover/focus styling on the toggle container */
.notion-toggle:hover,
.notion-toggle:focus-within {
  background: none      !important;
  box-shadow: none      !important;
  border: none          !important;
}

/* 3. Hide any auto-injected plus/minus icon */
.notion-toggle summary::after {
  display: none !important;
}

/* 4. (Again) hide the icon on TOC callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}


/* ==========================================================================
   21. TOC MOBILE WRAP FIX
   ========================================================================== */

/* Allow the TOC container to scroll or wrap long lines */
.notion-callout.co-table-of-contents .notion-table-of-contents {
  overflow-x:    auto       !important;
  white-space:   normal     !important;
  word-break:    break-word !important;
  padding-bottom: 0.5rem    !important;
}


/* ==========================================================================
   22. MOBILE TOC REFINEMENTS
   ========================================================================== */

/* — 1. Remove summary background, padding/margin shift & hover effect */
.notion-callout.co-table-of-contents .notion-toggle summary {
  background: none        !important;
  padding:    0.75rem 1rem!important;
  margin:     0          !important;
  transition: none       !important;
  transform:  none       !important;
}
.notion-callout.co-table-of-contents .notion-toggle summary:hover {
  background: none !important;
}

/* — 2. [REMOVED] static ▼ injection here — we’ll restore the small dynamic one below */

/* — 3. Remove underlines/border-bottom on TOC links */
.notion-callout.co-table-of-contents .notion-table-of-contents-item-body {
  text-decoration: none !important;
  border-bottom:    none !important;
}

/* — 4. Tighter spacing inside TOC block on mobile */
@media (max-width: 800px) {
  .notion-callout.co-table-of-contents .notion-callout-text {
    margin:  0 !important;
    padding: 0.5rem 1rem !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents {
    margin:  0 !important;
    padding: 0.5rem 0 !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents-item {
    margin:  0.25rem 0 !important;
    padding: 0 !important;
  }
}


/* ==========================================================================
   23. TOC TOGGLE DYNAMICS & MOBILE WIDTH
   ========================================================================== */

/* 1. Hide the browser’s native ▶/▼ marker */
.notion-callout.co-table-of-contents .notion-toggle summary::-webkit-details-marker,
.notion-callout.co-table-of-contents .notion-toggle summary::marker {
  display: none !important;
}

/* 2. Inject small dynamic ▶ (closed) / ▼ (open) */
.notion-callout.co-table-of-contents .notion-toggle summary::before {
  content:        '▶\00a0'       !important;
  display:        inline-block   !important;
  font-size:      0.9em          !important;
  transition:     transform 0.2s ease !important;
}
.notion-callout.co-table-of-contents .notion-toggle[open] summary::before {
  content: '▼\00a0' !important;
}

/* 3. Ensure the summary stays clickable and strip any shifts */
.notion-callout.co-table-of-contents .notion-toggle {
  background: transparent !important;
  box-shadow: none        !important;
  border: none            !important;
  padding: 0              !important;
}
.notion-callout.co-table-of-contents .notion-toggle summary,
.notion-callout.co-table-of-contents .notion-toggle summary:hover {
  background: none        !important;
  transform: none         !important;
  transition: none        !important;
  cursor: pointer         !important;
}

/* 4. Force TOC to fill full width on mobile */
@media (max-width: 800px) {
  .notion-callout.co-table-of-contents {
    padding: 1rem !important;
    margin:  0.5rem 0 !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents {
    width:     100%       !important;
    max-width: 100%       !important;
    margin:    0          !important;
    padding:   0          !important;
    display:   block      !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents-item {
    width:   100%         !important;
    padding: 0.25rem 0    !important;
    margin:  0           !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.22
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. BLOG CALLOUT TOGGLE & ICON OVERRIDES
   ========================================================================== */

/* — Prevent outline/shadow/transform on any callout hover or open */
.notion-callout,
.notion-callout:hover,
.notion-callout[open] {
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

/* — Hide the built-in plus/minus toggle icon */
.notion-callout summary::after {
  display: none !important;
}

/* — Temporarily disable pointer events so summary doesn’t shift */
.notion-callout summary {
  cursor:         default !important;
  pointer-events: none    !important;
}

/* — Hide the icon only on your TOC callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}


/* ==========================================================================
   20. BLOG CALLOUT TOGGLE & TOC ICON TWEAKS
   ========================================================================== */

/* 1. Re-enable clicks on the toggle summary */
.notion-toggle summary {
  pointer-events: auto !important;
}

/* 2. Strip gradient/hover from the toggle container */
.notion-toggle:hover,
.notion-toggle:focus-within {
  background: none !important;
  box-shadow: none !important;
  border: none     !important;
}

/* 3. Hide any auto-injected summary::after icon */
.notion-toggle summary::after {
  display: none !important;
}

/* 4. (Again) hide the icon on TOC callouts */
.notion-callout.co-table-of-contents .notion-page-icon-inline {
  display: none !important;
}


/* ==========================================================================
   21. TOC MOBILE WRAP FIX
   ========================================================================== */

/* — Allow scrolling/wrapping of long TOC entries */
.notion-callout.co-table-of-contents .notion-table-of-contents {
  overflow-x:    auto       !important;
  white-space:   normal     !important;
  word-break:    break-word !important;
  padding-bottom: 0.5rem    !important;
}


/* ==========================================================================
   22. MOBILE TOC REFINEMENTS
   ========================================================================== */

/* — 1. Remove summary background/padding shift */
.notion-callout.co-table-of-contents .notion-toggle summary {
  background: none           !important;
  padding:    0.75rem 1rem   !important;
  margin:     0             !important;
  transition: none          !important;
  transform:  none          !important;
}
.notion-callout.co-table-of-contents .notion-toggle summary:hover {
  background: none !important;
}

/* — 2. (Removed static ▼) */

/* — 3. Disable underlines on TOC links & spans */
.notion-callout.co-table-of-contents .notion-table-of-contents-item a,
.notion-callout.co-table-of-contents .notion-table-of-contents-item-body {
  text-decoration: none !important;
  border-bottom:    none !important;
}

/* — 4. Tighter spacing; zero left margin on mobile */
@media (max-width: 800px) {
  .notion-callout.co-table-of-contents {
    padding: 1rem !important;
    margin:  0.25rem 0 !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding:     0.5rem 0 !important;
  }
  .notion-callout.co-table-of-contents .notion-table-of-contents-item {
    margin:  0.25rem 0 !important;
    padding: 0        !important;
  }
}


/* ==========================================================================
   23. TOC TOGGLE DYNAMICS & MOBILE WIDTH
   ========================================================================== */

/* 1. Hide the browser’s native ▶/▼ marker */
.notion-callout.co-table-of-contents .notion-toggle summary::-webkit-details-marker,
.notion-callout.co-table-of-contents .notion-toggle summary::marker {
  display: none !important;
}

/* 2. Inject small dynamic ▶ (closed) / ▼ (open) */
.notion-callout.co-table-of-contents .notion-toggle summary::before {
  content:        '▶\00a0'             !important;
  display:        inline-block         !important;
  font-size:      0.9em                !important;
  transition:     transform 0.2s ease  !important;
}
.notion-callout.co-table-of-contents .notion-toggle[open] summary::before {
  content: '▼\00a0' !important;
}

/* 3. Ensure summary stays clickable and strip any shifts */
.notion-callout.co-table-of-contents .notion-toggle {
  background: transparent !important;
  box-shadow: none        !important;
  border: none            !important;
  padding: 0              !important;
}
.notion-callout.co-table-of-contents .notion-toggle summary,
.notion-callout.co-table-of-contents .notion-toggle summary:hover {
  background: none !important;
  transform:  none !important;
  transition: none !important;
  cursor:     pointer  !important;
}

/* 4. Force TOC to fill full width on mobile */
@media (max-width: 800px) {
  .notion-callout.co-table-of-contents .notion-table-of-contents {
    width:     100%       !important;
    max-width: 100%       !important;
    display:   block      !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.23
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.24
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2. Center the client-logos grid */
  .bullet-4-column {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;  /* center all columns */
    gap: 2rem !important;                 /* optional gutter */
  }
  .bullet-4-column .notion-column {
    width: auto !important;               /* let them shrink to content */
    flex: none !important;
    margin: 0 !important;                 /* no extra offsets */
  }
  /* 3. Center each logo within its column */
  .bullet-4-column img,
  .bullet-4-column .notion-asset-wrapper-image img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.25
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
/* ==========================================================================
   20. MOBILE CLIENT GRID CENTERING
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Turn the client list into a wrap-flex container and center it */
  .bullet-4-column {
    display:      flex !important;
    flex-wrap:    wrap !important;
    justify-content: center !important;
    margin:       0 auto !important; /* center the whole block */
    gap:          1.5rem !important; /* optional spacing between logos */
  }

  /* 2. Let each logo cell shrink-to-fit and center its contents */
  .bullet-4-column .notion-column {
    flex:    0 1 auto !important;
    margin:  0 !important;
    text-align: center !important;
  }

  /* 3. Center each image inside its cell */
  .bullet-4-column img,
  .bullet-4-column .notion-asset-wrapper-image img {
    display: block !important;
    margin:  0 auto !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.26
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
/* ==========================================================================
   20. HOMEPAGE CLIENT LOGOS — CENTER GRID
   ========================================================================== */
.bullet-4-column {
  /* center all columns inside the row */
  justify-content: center !important;
  /* auto-margin the row itself */
  margin: 0 auto !important;
}

/* make notion-spacer inert so it only provides its intended gap */
.bullet-4-column .notion-spacer {
  flex: 0 0 min(32px, 4vw) !important;
}

/* on narrow screens wrap into multiple rows if needed, still centered */
@media (max-width: 800px) {
  .bullet-4-column {
    flex-wrap: wrap !important;
  }
  .bullet-4-column .notion-column {
    /* allow each column to shrink-to-fit its contents */
    flex: 0 1 auto !important;
    /* optional gutter between logos */
    margin: 0.5rem !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.27
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   17.x CLIENTS GRID — CENTER LOGOS
   ========================================================================== */

/* 1. Turn off the “spacer” elements so they don’t push your logos around */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* 2. Center the columns in their container and evenly space them */
.bullet-4-column {
  display: flex !important;
  justify-content: space-evenly !important;
  margin: 0 auto !important;  /* ensure the whole grid is centered in its parent */
  flex-wrap: wrap;             /* allow wrapping on narrow screens */
}

/* 3. On mobile, make sure each logo column stays the same width and still centers */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
  }
  .bullet-4-column .notion-column {
    flex: 0 0 50% !important;  /* two logos per row */
    max-width: 50% !important;
  }
}


/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.28
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — iOS SAFARI FIX
   ========================================================================== */

/* 1. Allow the client grid to auto-size and remove any clipping */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height: auto         !important;
  overflow: visible    !important;
  align-items: flex-start !important;
}

/* 2. Ensure all client logos scale properly within their containers */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto  !important;
  display:   block !important;
}

/* 3. (Optional) If you use viewport units elsewhere, consider using dynamic VH */
@supports (height: 100dvh) {
  /* Example: full-screen sections can use device-height */
  .some-full-screen-section {
    height: 100dvh !important;
  }
}

/* ==========================================================================
   17.1 Clients Grid — Two Columns on Mobile
   ========================================================================== */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: space-evenly !important; /* keep them evenly spaced */
    flex-wrap: wrap       !important;         /* allow multiple rows */
  }
  .bullet-4-column .notion-column {
    flex:       0  0 50%   !important; /* each column takes up half the width */
    max-width:  50%        !important;
    margin:     0.5rem 0   !important; /* optional vertical gutter */
  }
}

/* ==========================================================================
   17.2 CLIENTS GRID — CENTER LOGOS
   ========================================================================== */

/* 1. Turn off the “spacer” elements so they don’t push your logos around */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* 2. Center the columns in their container and evenly space them */
.bullet-4-column {
  display: flex !important;
  justify-content: space-evenly !important;
  margin: 0 auto !important;  /* ensure the whole grid is centered in its parent */
  flex-wrap: wrap;             /* allow wrapping on narrow screens */
}

/* 3. On mobile, make sure each logo column stays the same width and still centers */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
  }
  .bullet-4-column .notion-column {
    flex: 0 0 50% !important;  /* two logos per row */
    max-width: 50% !important;
  }
}


/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.29
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Turn off the “spacer” elements so they don’t push your logos around */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container and evenly space the four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center   !important; /* center the two columns */
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important; /* exactly half width */
    max-width:  50%       !important;
    margin:     0.5rem 0  !important; /* optional gutter above/below */
  }
}

/* ==========================================================================
   17.2 CLIENTS GRID — CENTER LOGOS
   ========================================================================== */

/* 1. Turn off the “spacer” elements so they don’t push your logos around */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* 2. Center the columns in their container and evenly space them */
.bullet-4-column {
  display: flex !important;
  justify-content: space-evenly !important;
  margin: 0 auto !important;  /* ensure the whole grid is centered in its parent */
  flex-wrap: wrap;             /* allow wrapping on narrow screens */
}

/* 3. On mobile, make sure each logo column stays the same width and still centers */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
  }
  .bullet-4-column .notion-column {
    flex: 0 0 50% !important;  /* two logos per row */
    max-width: 50% !important;
  }
}


/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.30
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Turn off the “spacer” elements so they don’t push your logos around */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container and evenly space the four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center   !important; /* center the two columns */
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important; /* exactly half width */
    max-width:  50%       !important;
    margin:     0.5rem 0  !important; /* optional gutter above/below */
  }
}

/* ==========================================================================
   17.2 CLIENTS GRID — CENTER LOGOS
   ========================================================================== */

/* 1. Turn off the “spacer” elements so they don’t push your logos around */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* 2. Center the columns in their container and evenly space them */
.bullet-4-column {
  display: flex !important;
  justify-content: space-evenly !important;
  margin: 0 auto !important;  /* ensure the whole grid is centered in its parent */
  flex-wrap: wrap;             /* allow wrapping on narrow screens */
}

/* 3. On mobile, make sure each logo column stays the same width and still centers */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
  }
  .bullet-4-column .notion-column {
    flex: 0 0 50% !important;  /* two logos per row */
    max-width: 50% !important;
  }
}


/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.31
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Kill the spacers so they don’t push logos sideways */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container, center all four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center   !important; /* center the two columns */
  }
  .bullet-4-column .notion-column {
    width:      auto      !important; /* override inline calc() */
    flex:       0 0 50%   !important; /* exactly half the row */
    max-width:  50%       !important;
    margin:     0.5rem 0  !important; /* vertical gutter */
  }
}


/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.32
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Kill the spacers so they don’t push logos sideways */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container, center all four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center   !important; /* center the two columns */
  }
  .bullet-4-column .notion-column {
    width:      50%      !important; /* override inline calc() */
    flex:       0 0 50%   !important; /* exactly half the row */
    max-width:  50%       !important;
    margin:     0.5rem 0  !important; /* vertical gutter */
  }
}


/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.33
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Kill the spacers so they don’t push logos sideways */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container, center all four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   17.x CLIENTS GRID — FORCE TWO-COLUMN ON MOBILE
   ========================================================================== */

/* 0. Remove the inline calc() width on every column */
.bullet-4-column .notion-column {
  width: auto !important;
}

/* 1. On small screens, carve each column to exactly half the row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap:      wrap   !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL — Disable horizontal scrolling
   ────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.34
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}



/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   15.2 Site Header: restore sticky positioning
   ========================================================================== */
nav.navbar,
.navbar {
  position: sticky       !important;
  top: 0                 !important;
  width: 100%            !important;
  z-index: 999           !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Kill the spacers so they don’t push logos sideways */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container, center all four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   17.x CLIENTS GRID — FORCE TWO-COLUMN ON MOBILE
   ========================================================================== */

/* 0. Remove the inline calc() width on every column */
.bullet-4-column .notion-column {
  width: auto !important;
}

/* 1. On small screens, carve each column to exactly half the row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap:      wrap   !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL — Disable horizontal scrolling
   ────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.35
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}


/* ==========================================================================
   4.x RESTORE MOBILE STICKY NAV
   ========================================================================== */

/* on all viewports (or wrap in @media max-width:800px if you only want mobile) */
nav.navbar,
.navbar {
  position: sticky   !important;
  top: 0             !important;
  left: 0            !important;
  right: 0           !important;
  width: 100%        !important;
  z-index: 9999      !important;
}

/* if you prefer “fixed” instead of “sticky”, switch to: 
nav.navbar, .navbar {
  position: fixed !important;
  …
} 
*/


/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}

/* ==========================================================================
   15.2 Site Header: restore sticky positioning
   ========================================================================== */
nav.navbar,
.navbar {
  position: sticky       !important;
  top: 0                 !important;
  width: 100%            !important;
  z-index: 999           !important;
}

/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Kill the spacers so they don’t push logos sideways */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container, center all four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   17.x CLIENTS GRID — FORCE TWO-COLUMN ON MOBILE
   ========================================================================== */

/* 0. Remove the inline calc() width on every column */
.bullet-4-column .notion-column {
  width: auto !important;
}

/* 1. On small screens, carve each column to exactly half the row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap:      wrap   !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL — Disable horizontal scrolling
   ────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ABC Bullet.so Custom CSS v1.36
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
  /* Layout & Containers */
  --container-width: 87%;
  --notion-max-width: 87%;
  --border-radius: 10px;

  /* Typography */
  --primary-font: "Sofia Sans";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading-font-size: 1rem; /* base for calculations */
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar colors & sizing */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;
  --navbar-height: 90px;
  --navbar-padding: 3rem;

  /* Database Cards */
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Color Palette (HSL) */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Gray Scale */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Blue Scale */
  /* …and so on… */
}

/* ==========================================================================
   2. DARK MODE OVERRIDES
   ========================================================================== */
.dark-mode {
  /* Invert some palettes */
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), .8);

  /* Dark background */
  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Navbar buttons */
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  /* Gray adjustments */
  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ==========================================================================
   3. CONTAINER & PAGE LAYOUT
   ========================================================================== */
.notion-app {
  position: relative;
}
.dark-mode .notion-app:before {
  background:
    repeating-linear-gradient(90deg, transparent, transparent 19px, #d3d3d3 20px),
    repeating-linear-gradient(180deg, transparent, transparent 19px, #d3d3d3 20px);
  background-size: 32px 38px;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.bullet-column-container,
.bullet-copyright {
  margin: 0 auto;
  width: 77%;
}
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
  }
  .bullet-column-container {
    width: 100%;
  }
}

/* ==========================================================================
   4. NAVBAR & NAVIGATION
   ========================================================================== */
.navbar-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  padding: 0.5rem 1.75rem;
}

/* Desktop: default hover uses navbar button bg color */
.navbar-item:hover {
  color: var(--navbar-btn-bg-color) !important;
}

/* Reset focus‐within styling for accessibility */
a.navbar-item:focus-within {
  background-color: unset;
  color: unset;
}

.bullet-navbar-cta .buttons {
  gap: 30px;
}
.nav-cta-btn {
  padding: 20px 30px;
}
.active-nav {
  color: var(--navbar-btn-bg-color);
}

/* ==========================================================================
   4.x NAV ITEM HOVER STYLING
   ========================================================================== */

/* Mobile menu: tint link text yellow when overlay is open */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  color: #ed742e !important;
}

/* Desktop nav: remove any background fill and tint text yellow on hover */
.bullet-navbar-links .navbar-item:hover {
  background-color: transparent !important;
  color: #ed742e         !important;
}




/* ==========================================================================
   5. BUTTONS & CTAS
   ========================================================================== */
.button {
  border: none;
  height: 3em;
}
.button strong {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
}
.bullet-btn:hover,
.nav-cta-btn:hover {
  box-shadow:
    -20px 0 50px #12c2e9a8,
     10px 10px 40px #c471ed82,
     10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
}

/* ==========================================================================
   6. TYPOGRAPHY
   ========================================================================== */
/* Body Text */
.notion-text {
  color: var(--fg-color-3);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}

/* Headings */
.notion-h1 {
  font-size: var(--heading1);
  font-weight: 700;
  letter-spacing: -1.44px;
  line-height: 90px;
  padding-top: 40px;
}
.notion-h2 {
  font-size: var(--heading2);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 55px;
  padding-bottom: 20px;
  width: 100%;
}
.notion-h3 {
  font-size: var(--heading3);
  font-weight: 800;
  line-height: 1.24;
  margin-top: 15px;
}

/* Gradient Text */
.notion-pink {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Blog & Hero Specific */
.hero_section h1 {
  font-size: 50px;
}
.blog_page_content .notion-h1 {
  font-size: 45px;
  line-height: 57px;
}
.blog_page_content .notion-h2 {
  font-size: 35px;
  margin-top: 0;
}
.blog_page_content .notion-h3 {
  font-size: 25px;
  margin-top: 0;
}
.related-posts .header,
.blog-section .header,
.categories-section .header {
  font-size: 35px;
}

/* ==========================================================================
   7. NOTION OVERRIDES
   ========================================================================== */
/* Hash Links */
.notion-hash-link {
  display: none;
}

/* Default Callout & Cards */
.notion-default_co {
  border-radius: 7px;
  display: grid;
  padding: 20px 40px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-default_co:hover {
  border: 1.5px solid transparent;
  padding: 20px 40px;
}
.notion-default_co img.notion-page-icon {
  border-radius: unset;
}
.notion-default_co .notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin-bottom: 10px;
}
.notion-default_co .notion-callout-text,
.notion-default_co .notion-text {
  margin: 0;
}
.notion-default_co .notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  padding-bottom: 17px;
  position: relative;
}
.notion-default_co:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
}

/* Gray Background Variant */
.notion-gray_background_co {
  background: var(--notion-gray);
  border-radius: 15px;
  padding: 20px 40px;
  display: grid;
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.notion-gray_background_co .notion-text {
  color: #fff;
  line-height: normal;
}
.notion-gray_background_co .notion-callout-text {
  margin-left: 0;
}
.notion-gray_background_co .bullet-btn {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.notion-gray_background_co .bullet-2-column .notion-text {
  font-weight: 900;
}

/* ==========================================================================
   8. LIST STYLES
   ========================================================================== */
.notion-list-disc {
  list-style: none;
  padding-inline-start: 3.1rem;
  position: relative;
}
.notion-list-disc:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  height: 100%;
  background-repeat: no-repeat;
  background-image: url(https://templates.bullet.so/fusion/icons/listIcon.svg);
}
.notion-list-disc li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.notion-list-body {
  border: none;
  gap: 20px;
}
.notion-list-item {
  border-radius: 5px;
  box-shadow: 0 0 3px 0 #d3d3d3;
  margin: 5px auto;
  padding: 20px 30px;
  width: 99%;
  position: relative;
}
.notion-list-item:hover {
  background: transparent;
}
.notion-list-item:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 7px;
  background: linear-gradient(90deg,#12c2e9,#c471ed,#f64f59);
  mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.notion-list-view .notion-page-title-text {
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  width: 100%;
}
.notion-list-view .nested-form-link {
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  font-weight: 600;
  padding: 10px 15px;
}

/* ==========================================================================
   9. TOGGLES & COLLAPSIBLES
   ========================================================================== */
.notion-toggle {
  background: var(--bg-color);
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 1px;
  position: relative;
}
.notion-toggle:hover {
  background:
    linear-gradient(var(--bg-color),var(--bg-color)),
    linear-gradient(to right,#12c2e9,#c471ed,#f64f59);
  background-clip: content-box, border-box;
  border: 2px solid transparent;
  padding: 0;
}
.notion-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 30px 25px;
}
.notion-toggle div .notion-text {
  padding: 30px 25px 0;
}
summary:after {
  content: "+";
  font-size: 48px;
  position: absolute;
  right: 27px;
  top: 0;
  color: #1d2026;
}
.dark-mode summary:after {
  color: #fff;
}
details[open] summary:after {
  content: "-";
}
details[open] summary {
  padding-bottom: 0;
}

/* ==========================================================================
   10. COLLECTION GROUPS & GALLERY
   ========================================================================== */
.notion-collection-group {
  border-bottom: 1.5px solid #d3d3d3;
  margin-bottom: 0;
}
.notion-collection-group[open] {
  border: none;
}
.notion-collection-group-title {
  font-size: 24px;
  font-weight: 600;
  padding: 30px 50px 30px 30px;
  list-style: none;
  position: relative;
  cursor: pointer;
}
.notion-collection-group-title:after {
  content: "+";
  font-size: 39px;
  position: absolute;
  right: 27px;
  top: 16px;
}
.notion-collection-group[open] .notion-collection-group-title:after {
  content: "-";
}
.notion-collection-group .notion-list-view {
  padding: 0 54px;
}
.notion-collection-group .notion-list-body {
  gap: 30px;
  padding: 7px 0;
}
.notion-collection-group .notion-list-item {
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 30px;
  height: 100%;
}
.notion-gallery-grid {
  border: none;
}
.notion-gallery-grid-size-large {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.notion-gallery-grid-size-large .notion-collection-card-cover {
  border-radius: 20px;
}
.notion-gallery-grid-size-large .notion-page-title-text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 21.98px;
  padding: 10px 0 5px;
}
.notion-gallery-grid-size-large .notion-property-text,
.notion-gallery-grid-size-large .notion-property-date {
  white-space: break-spaces;
  color: var(--fg-color-3);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: 22px;
}

/* ==========================================================================
   11. BULLET COLUMNS & FLEX LAYOUTS
   ========================================================================== */
.bullet-2-column {
  display: flex;
  align-items: start;
  overflow: visible;
}
.bullet-2-column .notion-column {
  overflow: visible;
}
.bullet-4-column {
  display: flex;
  align-items: center;
  justify-content: start;
}
.bullet-4-column .notion-column {
  width: calc(20.25% - min(32px,4vw)*3*0.25) !important;
}
@media (max-width: 640px) {
  .bullet-4-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 0 auto;
  }
  .bullet-4-column .notion-column {
    width: 70% !important;
  }
}

/* ==========================================================================
   12. BLOG & HERO SECTIONS
   ========================================================================== */
.categoriezed-blogs {
  padding-bottom: 50px;
}
.blog_nav_container,
.blog-page-content {
  width: 100%;
}
.blog_navigator {
  background: #d3d3d34a;
  border-radius: var(--border-radius);
  margin: 3rem 0 0 2rem;
  padding: 10px 20px;
}
.blog_navigator_title {
  padding-top: 20px;
}
.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  text-transform: uppercase;
}
.footer-link,
.footer-copyright {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}
.footer-copyright {
  color: var(--footer-fg-color);
}
.bullet-footer {
  background-color: var(--footer-bg-color);
}

/* ==========================================================================
   14. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
/* Tablet & below */
@media (max-width: 1024px) {
  .notion-list-item {
    flex-wrap: wrap;
    gap: 10px;
  }
  .notion-list-view .notion-list-item-body,
  .notion-list-item-body {
    flex-wrap: wrap;
    gap: 23px;
  }
}
/* Mobile Landscape */
@media (max-width: 800px) {
  :root {
    --heading1: calc(var(--heading-font-size) * 2);
    --heading2: calc(var(--heading-font-size) * 1.6);
    --heading3: calc(var(--heading-font-size) * 0.75);
    --db-cover-height-large: 240px;
  }
  .notion-h1 {
    line-height: 60px;
  }
  .bullet-3-column {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bullet-3-column .notion-column {
    width: 100% !important;
  }
  .blog-section .header,
  .blog_page_content .notion-h1,
  .categories-section .header,
  .hero_section h1 {
    font-size: 30px;
  }
  .blog_page_content .notion-h2,
  .related-posts .header {
    font-size: 30px;
    margin-top: 0;
  }
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
}
/* Mobile Portrait */
@media (max-width: 600px) {
  :root {
    --db-cover-height-large: 210px;
  }
}

/* ==========================================================================
   15. NAV MENU ITEM HOVER
   ========================================================================== */
#navbarMenu.mobile-btn.is-active .navbar-item:hover {
  /* only tint the text */
  color: #f6ca5d !important;
}



/* ==========================================================================
   16. CALLOUT BLOCKS — LIGHT MODE OVERLAY
   ========================================================================== */

/* — Define your custom light-gray background */
:root {
  --callout-light-bg: #f0f0f0;  /* adjust as needed */
}

/* — Layout icon + text side by side in every callout */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
}

/* — Give the icon breathing room */
.notion-callout .notion-page-icon-inline {
  margin-right: 0.75rem !important;
}

/* — Let the text area flex to fill remaining space */
.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* — Apply light-mode background & enforce black text */
body:not(.dark-mode) .notion-callout {
  background-color: var(--callout-light-bg) !important;
  color:            #000            !important;
}

/* — Ensure every piece of nested text is black */
body:not(.dark-mode) .notion-callout * {
  color: #000 !important;
}

/* — Restore standard bullet discs inside callout lists */
body:not(.dark-mode) .notion-callout .notion-list-disc {
  list-style-type:    disc    !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
}

/* — Style the horizontal rule inside callouts */
body:not(.dark-mode) .notion-callout hr,
body:not(.dark-mode) .notion-callout .notion-hr {
  background-color: #ccc !important;
  border:           none !important;
  height:           1px   !important;
  margin:           1rem 0 !important;
}

/* ==========================================================================
   17. CLIENTS GRID — CENTERED & RESPONSIVE
   ========================================================================== */

/* — 1. Kill the spacers so they don’t push logos sideways */
.bullet-4-column .notion-spacer {
  display: none !important;
}

/* — 2. Make the row a flex container, center all four columns */
.bullet-4-column {
  display:        flex         !important;
  justify-content: space-evenly !important;
  align-items:    center       !important;
  margin:         0 auto       !important;
  flex-wrap:      wrap         !important;
}

/* — 3. iOS Safari fix: allow auto-height & visible overflow */
.bullet-4-column,
.bullet-4-column .notion-column,
.bullet-4-column .notion-collection-card {
  height:         auto      !important;
  overflow:       visible   !important;
}

/* — 4. Ensure all logos scale correctly */
.bullet-4-column img,
.bullet-4-column .notion-asset-wrapper-image img {
  max-width: 100% !important;
  height:    auto !important;
  display:   block !important;
}

/* — 5. Mobile: force two columns per row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   17.x CLIENTS GRID — FORCE TWO-COLUMN ON MOBILE
   ========================================================================== */

/* 0. Remove the inline calc() width on every column */
.bullet-4-column .notion-column {
  width: auto !important;
}

/* 1. On small screens, carve each column to exactly half the row */
@media (max-width: 800px) {
  .bullet-4-column {
    justify-content: center !important;
    flex-wrap:      wrap   !important;
  }
  .bullet-4-column .notion-column {
    flex:       0 0 50%   !important;
    max-width:  50%       !important;
    width:      50%       !important;
    margin:     0.5rem 0  !important;
  }
}

/* ==========================================================================
   18. CALL_OUT BULLETS & LINE THICKNESS
   ========================================================================== */

/* — Always show standard disc bullets in callout lists */
.notion-callout .notion-list-disc {
  list-style-type:     disc       !important;
  list-style-position: outside    !important;
  padding-inline-start:1.5rem     !important;
}

/* — Thicken every horizontal rule site-wide to 2px */
hr,
.notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* — Also ensure callout-embedded rules use 2px thickness */
.notion-callout hr,
.notion-callout .notion-hr {
  height:           1px         !important;
  background-color: currentColor !important;
  border:           none        !important;
}

/* ==========================================================================
   19. MOBILE CENTRING FIXES — TOC & CLIENTS
   ========================================================================== */
@media (max-width: 800px) {
  /* 1. Center the built-in TOC block */
  .blog_navigator {
    margin: 1rem auto !important;        /* center horizontally */
    padding: 0 1rem !important;           /* give a bit of breathing room */
    max-width: 100% !important;           /* don't overflow */
    box-sizing: border-box;
  }
  /* if you need the inner container narrower or padded */
  .blog_navigator_inner_container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* bring this right before the closing “└─ GLOBAL — Disable horizontal scrolling” */
nav.navbar,
.navbar,
.bullet-navbar {
  position: sticky   !important;
  top: 0             !important;
  left: 0            !important;
  right: 0           !important;
  width: 100%        !important;
  z-index: 9999      !important;
}
  
/* ──────────────────────────────────────────────────────────────────────────
   GLOBAL — Disable horizontal scrolling
   ────────────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
}

/* ==================================================
   abc-bullet-so-template.css
   v0.5
   Custom Bullet.so Theme by Andrew Borden-Chisholm
   ================================================== */

/* ----------------------
   Root Variables (Light)
   ---------------------- */
:root {
  /* Layout */
  --container-width: 87%;
  --notion-max-width: 87%;
  --navbar-height: 90px;
  --navbar-padding: 3rem;
  --border-radius: 10px;
  --db-cover-height-large: 310px;
  --db-card-shadow: 0;
  --db-card-gap: 60px;

  /* Typography */
  --primary-font: "Poppins";
  --secondary-font: var(--primary-font);
  --title-font-size: 4.125rem;
  --heading1: calc(var(--heading-font-size) * 3);
  --heading2: calc(var(--heading-font-size) * 2.084);
  --heading3: calc(var(--heading-font-size) * 1.34);

  /* Navbar Styling */
  --navbar-btn-fg-color: #fff;
  --navbar-btn-bg-color: #111212;
  --navbar-fg-color: #4a4e5a;

  /* General Colors */
  --fg-color-h: 210;
  --fg-color-s: 4%;
  --fg-color-l: 11%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.8);

  /* Callout Colors */
  --callout-bg-color: #f0f0f0;
  --callout-text-color: #000;
  --bullet-color: #000;
  --callout-border-color: #d2d6d6;

  /* Notion Color Scheme */
  --notion-gray-h: 180;
  --notion-gray-s: 3%;
  --notion-gray-l: 7%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));

  --notion-blue-h: 205;
  --notion-blue-s: 92%;
  --notion-blue-l: 64%;
  --notion-blue: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l));
  --notion-blue_background: hsl(var(--notion-blue-h), var(--notion-blue-s), 90%);
  --notion-blue_background_co: hsl(var(--notion-blue-h), var(--notion-blue-s), var(--notion-blue-l));
  --notion-item-blue: hsl(var(--notion-blue-h), calc(var(--notion-blue-s) - 5%), 85%);

  --notion-red-h: 343;
  --notion-red-s: 76%;
  --notion-red-l: 63%;
  --notion-red: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));
  --notion-red_background: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));
  --notion-red_background_co: hsl(var(--notion-red-h), var(--notion-red-s), var(--notion-red-l));

  --notion-pink-h: 322;
  --notion-pink-s: 61%;
  --notion-pink-l: 62%;
  --notion-pink: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));
  --notion-pink_background: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));
  --notion-pink_background_co: hsl(var(--notion-pink-h), var(--notion-pink-s), var(--notion-pink-l));

  --notion-purple-h: 300;
  --notion-purple-s: 51%;
  --notion-purple-l: 61%;
  --notion-purple: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));
  --notion-purple_background: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));
  --notion-purple_background_co: hsl(var(--notion-purple-h), var(--notion-purple-s), var(--notion-purple-l));

  /* Footer */
  --footer-bg-color: #111212;
  --footer-fg-color: #fff;
}

/* ----------------------
   Dark Mode Overrides
   ---------------------- */
.dark-mode {
  --fg-color-h: 0;
  --fg-color-s: 0%;
  --fg-color-l: 100%;
  --fg-color: hsl(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l));
  --fg-color-3: hsla(var(--fg-color-h), var(--fg-color-s), var(--fg-color-l), 0.8);

  --bg-color-h: 230;
  --bg-color-s: 10%;
  --bg-color-l: 10%;
  --bg-color: hsl(var(--bg-color-h), var(--bg-color-s), var(--bg-color-l));

  /* Callout Colors for Dark Mode */
  --callout-bg-color: rgba(255, 255, 255, 0.1);
  --callout-text-color: #fff;
  --bullet-color: #fff;
  --callout-border-color: rgba(255, 255, 255, 0.2);

  --navbar-shadow: 0;
  --navbar-btn-fg-color: #111212;
  --navbar-btn-bg-color: #fff;

  --notion-gray-h: 180;
  --notion-gray-s: 1%;
  --notion-gray-l: 16%;
  --notion-gray: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
  --notion-gray_background: hsl(var(--notion-gray-h), var(--notion-gray-s), 90%);
  --notion-gray_background_co: hsl(var(--notion-gray-h), var(--notion-gray-s), var(--notion-gray-l));
}

/* ----------------------
   Bullet Lists - Standard Bullets Everywhere
   ---------------------- */
/* Standard bullets for all lists */
.notion-list-disc {
  list-style-type: disc !important;
  padding-inline-start: 2.5rem !important;
  position: relative;
}

.notion-list-disc:before {
  display: none !important; /* Hide the custom bullet styling everywhere */
}

.notion-list-disc li {
  display: list-item !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  color: var(--fg-color-3) !important;
}

/* Ensure proper spacing in nested lists */
.notion-list-disc .notion-list-disc {
  margin-top: 0.25rem;
}

/* ----------------------
   Callout Styling
   ---------------------- */
.notion-callout {
  display: flex !important;
  align-items: flex-start !important;
  border-radius: 5px;
  padding: 16px 16px 16px 12px;
  background-color: var(--callout-bg-color) !important;
  color: var(--callout-text-color) !important;
  border: 1.5px solid var(--callout-border-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.notion-callout * {
  color: var(--callout-text-color) !important;
  transition: color 0.3s ease;
}

.notion-callout .notion-page-icon-inline {
  margin-right: .75rem !important;
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin: 0 12px 0 0;
}

.notion-callout .notion-page-icon-inline > * {
  margin: 0 auto;
}

.notion-callout .notion-callout-text {
  flex: 1 !important;
}

/* List styling in callouts - consistent across modes */
.notion-callout .notion-list-disc {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-inline-start: 1.5rem !important;
  margin-left: 0 !important;
}

.notion-callout .notion-list-disc li {
  display: list-item !important;
  margin-left: 0 !important;
  color: var(--callout-text-color) !important;
}

/* Horizontal rule styling in callouts */
.notion-callout hr,
.notion-callout .notion-hr {
  background-color: currentColor !important;
  border: none !important;
  height: 1px !important;
  margin: 1rem 0 !important;
  opacity: 0.2;
}

/* ----------------------
   Gallery Items (Recent Posts)
   ---------------------- */
.notion-collection-card {
  background-color: var(--callout-bg-color) !important;
  border: 1.5px solid var(--callout-border-color) !important;
  border-radius: 5px !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
  overflow: hidden;
}

.notion-collection-card-body {
  padding: 16px !important;
}

.notion-collection-card * {
  color: var(--callout-text-color) !important;
  transition: color 0.3s ease;
}

.notion-collection-card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.notion-collection-card-cover {
  border-bottom: 1px solid var(--callout-border-color) !important;
}

/* ----------------------
   Table of Contents (Blog Navigator)
   ---------------------- */
.blog_navigator {
  background-color: var(--callout-bg-color) !important;
  border: 1.5px solid var(--callout-border-color) !important;
  border-radius: var(--border-radius);
  margin-left: 2rem;
  margin-top: 3rem;
  padding: 10px 20px;
  width: 100%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.blog_navigator * {
  color: var(--callout-text-color) !important;
  transition: color 0.3s ease;
}

.blog_navigator_title {
  padding-top: 20px;
  font-weight: 600;
}

.blog_navigator .blog_navigator_inner_container {
  padding: 10px 20px;
}

.blog_navigator a {
  color: var(--callout-text-color) !important;
  text-decoration: none;
}

.blog_navigator a:hover {
  text-decoration: underline;
}

/* ----------------------
   About Page Specific Styling
   ---------------------- */
/* Ensure all bullet lists on About page use standard bullets */
#page-about .notion-list-disc {
  list-style-type: disc !important;
  padding-inline-start: 2.5rem !important;
}

#page-about .notion-list-disc:before {
  display: none !important;
}

#page-about .notion-list-disc li {
  display: list-item !important;
  color: var(--fg-color-3) !important;
}

/* Work experience and education sections */
#page-about .bullet-2-column .notion-list-disc {
  margin-bottom: 0.5rem;
}

/* ----------------------
   Bullet Button Styles
   ---------------------- */
.bullet-btn {
  border: none;
  border-radius: var(--border-radius);
  font-family: var(--primary-font);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  padding: 10px 25px;
  background: var(--navbar-btn-bg-color);
  color: var(--navbar-btn-fg-color);
  opacity: 1;
  outline: none;
  text-align: center;
}

.bullet-btn:hover {
  box-shadow: -20px 0 50px #12c2e9a8, 10px 10px 40px #c471ed82, 10px 10px 40px #f64f5a7c;
  transition: all 0.3s;
}

/* ----------------------
   Notion Inline Icons
   ---------------------- */
.notion-page-icon-inline {
  border-radius: 5px;
  height: 38px;
  width: 38px;
  overflow: hidden;
  margin: 0;
}

.notion-callout .notion-page-icon-inline > * {
  margin: 0 auto;
}

/* ----------------------
   Dark/Light Mode Transition
   ---------------------- */
body, 
.notion-callout, 
.notion-callout *,
.notion-collection-card,
.notion-collection-card *,
.blog_navigator,
.blog_navigator *,
.notion-list-disc:before {
  transition: background-color 0.3s ease, color 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
}

/* ----------------------
   Media Queries
   ---------------------- */
@media (max-width: 800px) {
  .blog_navigator {
    margin-top: 0;
    width: 90%;
  }
  
  /* Adjust bullet list padding on mobile */
  .notion-list-disc {
    padding-inline-start: 2rem !important;
  }
}

/* ==========================================================================
   1. GLOBAL BOX-SIZING RESET
   ========================================================================== */
*,
:after,
:before {
  box-sizing: inherit;
}


/* ==========================================================================
   2. NAVBAR
   ========================================================================== */
/* Wrapper */
.navbar {
  background-color: #fff;
  min-height: 3.25rem;
  position: relative;
  z-index: 30;
}

/* Brand & Tabs */
.navbar-brand,
.navbar-tabs {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
  min-height: 3.25rem;
}

/* Items & Links */
.navbar-item {
  flex-grow: 0;
  flex-shrink: 0;
}
.navbar-item,
.navbar-link {
  display: block;
  line-height: 1.5;
  padding: .5rem .75rem;
  position: relative;
}
.navbar-link:not(.is-arrowless) {
  padding-right: 2.5em;
}
.navbar-link:not(.is-arrowless):after {
  right: 1.125em;
}
.navbar-link:not(.is-arrowless):after,
.select:not(.is-multiple):not(.is-loading):after {
  border: 3px solid transparent;
  border-radius: 2px;
  content: " ";
  display: block;
  height: .625em;
  margin-top: -.4375em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: center;
  width: .025em;
}

/* Active, Focus, Hover states */
.navbar-link.is-active,
.navbar-link:focus,
.navbar-link:focus-within,
a.navbar-item.is-active,
a.navbar-item:focus,
a.navbar-item:focus-within {
  background-color: #fafafa;
}

/* Dropdown */
.navbar-dropdown {
  font-size: .875rem;
  padding: .5rem 0;
}

/* Menu (mobile) */
.navbar-menu {
  display: none;
}
.navbar-menu.is-active {
  display: block;
}

/* End of Navbar */


/* ==========================================================================
   3. GLOBAL TYPOGRAPHY & LAYOUT
   ========================================================================== */
body {
  color: #4a4a4a;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 16px;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   4. LINKS
   ========================================================================== */
a {
  color: #485fc7;
}
.navbar-link,
a,
a.navbar-item {
  cursor: pointer;
}


/* ==========================================================================
   5. BUTTONS & CONTROLS
   ========================================================================== */
/* Buttons container */
.buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.buttons:last-child {
  margin-bottom: -0.5rem;
}
.buttons .button {
  margin-bottom: .5rem;
}
.buttons .button:not(:last-child):not(.is-fullwidth) {
  margin-right: .5rem;
}

/* Button base */
.button {
  background-color: #fff;
  border: 1px solid #dbdbdb;
  color: #363636;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1em;
  height: 2.5em;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  position: relative;
  vertical-align: top;
  border-radius: 4px;
  box-shadow: none;
}

/* Unselectable elements */
.breadcrumb,
.button,
.file,
.is-unselectable,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.tabs {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* ==========================================================================
   6. FORM ELEMENTS (INPUTS, SELECTS, TEXTAREAS)
   ========================================================================== */
.file-cta,
.file-name,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select select,
.textarea {
  border: 1px solid transparent;
  line-height: 1.5;
  padding: calc(.5em - 1px) calc(.75em - 1px);
}
.file-cta,
.file-name,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select select,
.textarea {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 2.5em;
  font-size: 1rem;
  border-radius: 4px;
  box-shadow: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  vertical-align: top;
}
.input,
.select select,
.textarea {
  background-color: #fff;
  border: 1px solid #dbdbdb;
  color: #363636;
  outline: none;
  width: 100%;
  box-shadow: inset 0 .0625em .125em hsla(0,0%,4%,.05);
  max-width: 100%;
}


/* ==========================================================================
   7. NAVBAR BURGER (MOBILE MENU TOGGLE)
   ========================================================================== */
.navbar-burger {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 1em;
  height: 3.25rem;
  margin-left: auto;
  padding: 0;
  position: relative;
  width: 3.25rem;
}
.navbar-burger span {
  background-color: currentColor;
  display: block;
  height: 1px;
  left: calc(50% - 8px);
  position: absolute;
  transform-origin: center;
  transition: background-color 86ms ease-out, opacity 86ms ease-out, transform 86ms ease-out;
  width: 16px;
}
.navbar-burger span:first-child {
  top: calc(50% - 6px);
}
.navbar-burger span:nth-child(2) {
  top: calc(50% - 1px);
}
.navbar-burger span:nth-child(3) {
  top: calc(50% + 4px);
}
/* Active (X) state */
.navbar-burger.is-active span:first-child {
  transform: translateY(5px) rotate(45deg);
}
.navbar-burger.is-active span:nth-child(2) {
  opacity: 0;
}
.navbar-burger.is-active span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}


/* ==========================================================================
   8. PANELS
   ========================================================================== */
.panel {
  border-radius: 6px;
  box-shadow: 0 .5em 1em -.125em hsla(0,0%,4%,.1), 0 0 0 1px hsla(0,0%,4%,.02);
  font-size: 1rem;
}
.panel-block {
  display: flex;
  align-items: center;
  padding: .5em .75em;
  color: #363636;
  justify-content: flex-start;
}
.panel-block > .control {
  flex-grow: 1;
  width: 100%;
}


/* ==========================================================================
   9. CONTROLS & ICONS
   ========================================================================== */
.control {
  box-sizing: border-box;
  clear: both;
  font-size: 1rem;
  position: relative;
  text-align: inherit;
}
.control.has-icons-left .icon.is-left {
  left: 0;
}
.control.has-icons-left .icon,
.control.has-icons-right .icon {
  color: #dbdbdb;
  height: 2.5em;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 2.5em;
  z-index: 4;
}
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.5rem;
  width: 1.5rem;
}
.control.has-icons-left .input,
.control.has-icons-left .select select {
  padding-left: 2.5em;
}


/* ==========================================================================
   10. DROPDOWNS
   ========================================================================== */
.dropdown {
  display: inline-flex;
  position: relative;
  vertical-align: top;
}
.dropdown-menu {
  display: none;
  left: 0;
  min-width: 12rem;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  z-index: 20;
}
.dropdown.is-active .dropdown-menu,
.dropdown.is-hoverable:hover .dropdown-menu {
  display: block;
}


/* ==========================================================================
   11. MEDIA ELEMENTS
   ========================================================================== */
img,
video {
  height: auto;
  max-width: 100%;
}


/* ==========================================================================
   12. TABLES
   ========================================================================== */
table td,
table th {
  vertical-align: top;
}


/* ==========================================================================
   13. CODE & SYNTAX HIGHLIGHTING
   ========================================================================== */
code[class*=language-],
pre[class*=language-] {
  word-wrap: normal;
  background: transparent;
  color: #000;
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
  font-size: 1em;
  line-height: 1.5;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  tab-size: 4;
  text-shadow: 0 1px #fff;
  white-space: pre;
}
:not(pre) > code[class*=language-] {
  background: #f5f2f0;
  border-radius: .3em;
  padding: .1em;
  white-space: normal;
}
@media print {
  code[class*=language-],
  pre[class*=language-] {
    text-shadow: none;
  }
}


/* ==========================================================================
   14. LAYOUT ELEMENTS
   ========================================================================== */
.container {
  flex-grow: 1;
  position: relative;
  width: auto;
}
article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}
blockquote,
dd,
dl,
dt,
fieldset,
figure,
h1,h2,h3,h4,h5,h6,
hr,
iframe,
legend,
li,ol,p,pre,textarea,ul {
  margin: 0;
  padding: 0;
}
hr {
  background-color: #f5f5f5;
  border: none;
  display: block;
  height: 2px;
  margin: 1.5rem 0;
}


/* ==========================================================================
   15. NOTION-CORE & CSS VARIABLES
   ========================================================================== */
:root {
  --notion-font: ui-sans-serif, system-ui, apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --fg-color: #37352f;
  --bg-color: #fff;
  /* …and all other custom variables… */
}

.dark-mode {
  --fg-color: hsla(0,0%,100%,.9);
  --bg-color: #2f3437;
  /* …and dark-mode overrides… */
}

.notion {
  caret-color: var(--fg-color);
  color: var(--fg-color);
  font-family: var(--notion-font);
  font-size: 16px;
  line-height: 1.5;
}

.notion-page-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* …all the rest of the Notion-specific layout and component styles… */


/* ==========================================================================
   16. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media screen and (min-width: 1024px) {
  .navbar {
    min-height: 3.25rem;
  }
  .navbar-menu,
  .navbar-end,
  .navbar-start {
    display: flex;
    align-items: stretch;
  }
  .navbar-menu {
    flex-grow: 1;
    flex-shrink: 0;
  }
  .navbar-item.is-hoverable:hover .navbar-dropdown {
    display: block;
  }
  .navbar-dropdown {
    background-color: #fff;
    border-top: 2px solid #dbdbdb;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 8px hsla(0,0%,4%,.1);
    display: none;
    font-size: .875rem;
    left: 0;
    min-width: 100%;
    position: absolute;
    top: 100%;
    z-index: 20;
  }
}

@media screen and (max-width: 1023px) {
  .navbar-menu {
    background-color: #fff;
    box-shadow: 0 8px 16px hsla(0,0%,4%,.1);
    padding: .5rem 0;
  }
  .navbar-menu.is-active {
    display: block;
  }
}

/* …additional media queries… */


/* ==========================================================================
   17. UTILITIES & OVERFLOWS
   ========================================================================== */
.hide {
  display: none;
}
.show {
  display: block;
}

/* ==========================================================================
   18. BLOG & PAGE-SPECIFIC STYLES
   ========================================================================== */
/* Example blog header */
.header {
  align-items: center;
  display: flex;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
}
.hero_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.blog-section .blogs-container {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr;
}

/* …all other blog-specific typography, grid layouts, tags, etc… */


/* ==========================================================================
   19. ANIMATIONS & KEYFRAMES
   ========================================================================== */
@keyframes spinner {
  to {
    transform: rotate(1turn);
  }
}
@keyframes slideDownAndFade {
  0% {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   End of CSS
   ========================================================================== */