/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* Performance: Apply typography only to text containers, not every element */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,
body {
    letter-spacing: calc(.36px - .05em);
    font-feature-settings: "calt" 1, "liga" 1, "cv01" 1, "cv05" 1, "cv06" 1, "cv07" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.header__logo {
    min-width: 60px;
    max-width: 75px;
}

header .login-item { 
    border: none !important;
}

header .nav--arrows .nav__list--level1>li:not(:last-child) {
    margin-inline-end: 1rem;
}

.steps .content-card__img img {
    aspect-ratio: 4/3;
}


/* 
header:not(.header--sticky-active) .row.items-center {
    backdrop-filter: blur(30px);
    border-radius: 10px;
    border: 1px solid rgb(255 255 255 / 15%);
    padding: 12px 0;
}

*/

.accordion__header {
    align-items: center;
}

/* Boxed `Features showcase` */

.boxed-features-showcase .featshow {
  padding: 48px 0; /* <-- Block padding */
}

.boxed-features-showcase .featshow__content__wrapper {
  padding: 96px 0; /* <-- Content padding */
}

.boxed-features-showcase .featshow::before {
  border-radius: 24px; /* <-- Nav box corners */
  box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.05), 0px 16px 32px rgba(0, 0, 0, 0.05); /* <-- Nav box shadow */
}

.boxed-features-showcase .featshow__nav {
  padding: 0 48px; /* <-- Nav's horizontal padding */
}

.boxed-features-showcase .featshow__nav__wrapper {
  width: 100%; /* <-- Full-width nav content */
}

@media (max-width: 767px) {
  .boxed-features-showcase .featshow__nav {
    padding: 0 24px; /* <!-- Nav's horizontal padding on mobile' */
  }
}




/*****************************************/
/* Global Cumstom Rules    */
/*****************************************/

/* Performance: Stabilize hero image to prevent CLS (layout shift) */
.page-hero .img-txt__col--img {
    aspect-ratio: 1;
    overflow: hidden;
}

.page-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}
  
.content-card__img img {
    object-fit: cover;
    aspect-ratio: 3/2;
}  


/* SHIFTER */

  
.shifter__nav__item.btn {
    min-width: 300px;
    text-align: left !important;
    justify-content: flex-start;
}
  
.shifter__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}



/* PARALLAX CARDS */

.prlx-cards .psbody.color--light .pstextall > .psmtitle {
    display: none !important;
    background: #000000;
    border-radius: 999px;
    padding: 5px 12px;
    filter: invert(1);
}

.prlx-cards .pscon_txt, 
.prlx-cards .psimages {
    flex: 1;
} 
  
.prlx-cards .pscon_txt {
    z-index: 1;
}  
  
.prlx-cards .psimages img {
    width: 100%;
    object-fit: cover;
	border-radius: 0px
}  
  
.prlx-cards .psbody .psmtitle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}  
  
.prlx-cards .psbody .psmtitle svg {
    width: 18px;
    color: #1891b4 !important;
}  



.prlx-cards .psbody {
    overflow: hidden;
}
  
.prlx-cards .psbody::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(https://www.ezeep.com/hubfs/overlay-ezeep.svg);
    left: 0;
    top: 0;
 	border-radius: 14px;
    background-size: cover;
    background-position: center;
    mix-blend-mode: plus-lighter;
      -webkit-mask-image: linear-gradient(to left, transparent 25%, black 75%);
    mask-image: linear-gradient(to left, transparent 25%, black 75%);
}  



/* LOGO CAROUSEL */

.invert {
    /* filter: invert(1); */ 
}

.brands {
  opacity: .95 !important;
 }
  
.logos {
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 10%, rgb(0, 0, 0) 20.5%, rgb(0, 0, 0) 80.5%, rgba(0, 0, 0, 0) 90%);
}  

.logos .splide__list,
.integration .splide__list {
    gap: 50px;
}  
  
.logos img,
.integration img {
    object-fit: contain;
    height: 30px;
  	max-width: 180px;
  	object-position: cover;
}


.logos .splide__slide,
.integration .splide__slide {
    margin: 0 !important;
    width: auto !important;
}
  
 

/* QUICK FEATURE */

 .ezeep-features .quickfeat__item {
    border-radius: 24px;
    box-shadow: inset 0 0 1px 1px rgba(34, 35, 38, .095);
    height: 100%;
    margin-bottom: 24px !important;
    padding: 1.56rem;
    position: relative;
    transition: .2s ease-in-out;
}



/* Customer logo on Customer Stoy page template */

   .quick-cta a.quick-action__btn {
    background: white;
    color: #222326 !important;
    }
  
  .quick-cta h3 {
    margin-bottom: 0;
  }

  .logo-story .feature-card {
    aspect-ratio: 1;
  }
  
  @media (max-width: 767px) {
  .logo-story .feature-card {
    aspect-ratio: 16/9;
  }
  }
  
  .logo-story .feature-card div {
    margin: auto !important;
    display: flex;
    align-items: center;
    align-content: center;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}


/* Fix nav flyout z-index on non-overlap pages
.header__sticky-element {
    position: relative;
    z-index: 6;
}
 */

.hsfc-DataPrivacyField .hsfc-RichText span {  line-height: 1.2 !important;  margin-top: 0;  margin-bottom: 0;}    

.review__author__photo img {
    object-fit: contain;
}


@media (max-width: 1024px) {
.footer-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }}





/* =========================================
   WHAT'S NEW — Blog listing
   ========================================= */



.whats-new {
  padding: 60px 0 80px;
  max-width: 1200px;
  margin: 0 auto;
}



.whats-new__container {
  display: flex;
  gap: 48px;
  padding: 0 24px;
}



/* Sticky sidebar */
.whats-new__sidebar {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  width: 260px;
  min-width: 260px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 24px;
  border-right: 1px solid #e5e5e5;
}



.whats-new__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}



.whats-new__nav-month {
  margin-bottom: 0;
  border-bottom: 1px solid #e5e5e5;
}



.whats-new__nav-link {
  display: block;
  padding: 12px 0;
  color: #555;
  text-decoration: none;
  font-size: 15px;
  transition: color .2s;
}



.whats-new__nav-link:hover,
.whats-new__nav-link.is-active {
  color: #1891b4;
  text-decoration: none;
}



.whats-new__nav-dates {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 0 0 0 16px;
}



.whats-new__nav-link--day {
  font-size: 14px;
  padding: 4px 0;
  color: #888;
}



/* Main content */
.whats-new__content {
  flex: 1;
  min-width: 0;
}



.whats-new__month-heading {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 24px 0;
  padding-top: 8px;
  color: #222;
}



.whats-new__post {
  margin-bottom: 48px;
}



.whats-new__date {
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 4px 0;
}



.whats-new__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #222;
}



.whats-new__body {
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
}



.whats-new__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px 0;
}



.whats-new__body a {
  color: #1891b4;
  text-decoration: underline;
  display: none !important
}



/* Pagination */
.whats-new__pagination {
  display: flex;
  justify-content: space-between;
  padding: 32px 0;
  border-top: 1px solid #e5e5e5;
}



.whats-new__page-link {
  color: #1891b4;
  text-decoration: none;
  font-weight: 500;
}



.whats-new__page-link:hover {
  text-decoration: underline;
}



/* Mobile */
@media (max-width: 768px) {
  .whats-new__container {
    flex-direction: column;
    gap: 24px;
  }



  .whats-new__sidebar {
    position: relative;
    top: 0;
    width: 100%;
    min-width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
    padding-right: 0;
    padding-bottom: 16px;
    margin-bottom: 8px;
  }



  .whats-new__month-heading {
    font-size: 1.5rem;
  }



  .whats-new__title {
    font-size: 1.25rem;
  }
}


.compact-card__img img {
border-radius: 0px !important;
}

.blog-classic-sidebar__subscription {
    display: none  !important;
}

.blog-card__img img {
    aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ============================================================================
   WARNING: this file is copied verbatim into an inline <style> in templates/_base.html
   (phase 4c). Never write HubL delimiters (double curly braces, curly-percent or curly-hash) in this file,
   not even inside comments. After editing this file, re-run the phase 4c build so the
   inline copy stays in sync (scratchpad: stage-phase2/build-4c.mjs).
   ============================================================================ */
/* ============================================================================
   PERFORMANCE PATCH — PHASE 2 (2026-09-22)
   The Inter latin-subset @font-face rules, the metric-compatible "Inter
   Fallback" face and the font-family stack override live INLINE in
   templates/_base.html, right after the standard_header_includes tag — NOT here.
   Reason: HubSpot hoists every require_css() link (this file included) into
   standard_header_includes and then appends its own inline <style> with
   @font-face for Inter 400/600/700 AFTER all stylesheets. Only a declaration
   that comes later in the document can override those faces ("last declared
   wins" for identical descriptors), so it has to be in the template.
   This file only keeps the header-logo CLS fix below. APPENDED ONLY — nothing
   above this line was reordered or edited. Roll back: delete from here to EOF.
   ============================================================================ */
/* -----------------------------------------------------------------------
   4. Header logo CLS fix. The logo <img> (#hs_cos_wrapper_static_header_logo,
   ezeep-logo-1.svg) has width="88" height="36" and inline style
   "height:auto;width:88px" — the SVG itself has no reliable intrinsic size
   for the browser's automatic width/height->aspect-ratio UA rule to use,
   so its box collapses to 0 height until the SVG loads, then jumps to 36px
   (CLS). This only sets aspect-ratio (no width/height/min-width/max-width),
   so it does not change the existing sizing in `.header__logo`
   (min-width:60px / max-width:75px, lines 24-27 above) at any breakpoint —
   the box is simply reserved at the correct 88:36 ratio before the SVG
   arrives.
   ----------------------------------------------------------------------- */
#hs_cos_wrapper_static_header_logo img {
    aspect-ratio: 88 / 36;
}


/* -----------------------------------------------------------------------
   5. Keep HubSpot's full Inter files (3 x 110 KB) from being fetched for
   glyphs the latin subset does not cover. Verified live 2026-09-22: the only
   non-latin characters on the home page are "日本語" (language selector —
   Inter has no CJK glyphs at all, so the download was pure waste) and "↵" in
   the skip-to-content "ENTER" badge. Both get a font stack without Inter;
   the visual result is identical (system font was already used for CJK).
   ----------------------------------------------------------------------- */
.lang-select__nav li.ja > a {
    font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
#skip-to-content .badge {
    font-family: "Inter Fallback", Arial, sans-serif;
}

/* -----------------------------------------------------------------------
   6. Above-the-fold content must not start invisible (phase 4c, 2026-09-22).
   The hero text module uses the Act3 "reveal" fade (opacity 0 until main.js
   runs, then a 2 s animation). On the FIRST top-level row of any page that
   only delays the first contentful paint, so the reveal is neutralised there.
   Everything below keeps its animation. Roll back: delete this rule.
   ----------------------------------------------------------------------- */
.row-depth-1.row-number-1 .reveal {
    opacity: 1;
    animation: none !important;
    translate: none;
}