/* @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    */
/*****************************************/

.h1-home {font-size: clamp(50px, 4vw, 76px);}
.h2 {font-size: clamp(46px, 4vw, 60px);}
.h5 {font-size: clamp(22px, 2vw, 28px);}
p {clamp(16px, 1.1vw, 18px);}

ul {margin-top:0;}
.hhs-menu-toggle { padding-left: 1em; z-index: 1001; padding-top: 10px;}
.bg-no-repeat .row {background-repeat: no-repeat !important;}
.hhs-header-logo {  padding-top: 0px;  margin-left: 20px;}

.hs-interactives-modal-overlay {    background: rgba(0, 0, 0, 0.95);}

.policy p {font-size:16px !important;}
.policy li {margin-bottom: -15px;}

#hero-video {min-height:700px; }
#hero-video::after {
  content: "";
  position: absolute;
  width: 583px;
  height: 427px;
  right: 0;
  bottom:0;
  z-index: 2;       
  pointer-events: none;
   background: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/video-corner-gradient.svg')    no-repeat center / contain;
}
.vjs-big-play-button .simple-play-button {background-color:#FF6500 !important; }
#four-block .c-col .col-1 {  display: flex; justify-content: center;}



/* IMAGE BLOCK */
.tc-image-block {
  background: #fff;
  width:100%;
  display: flex;
  justify-content: center;
}

.tc-grid {
  width: 100%;
  max-width: 700px;
  margin: 0 auto; /* horizontal centering fallback */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* Shared tile */
.tc-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  width:100%;
  height:100%;
  margin:0;
}

.tc-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1; /* keeps the 2x2 block consistent */
}

/* Orange CTA tile */
.tc-cta {
  overflow: visible; /* allow dotted pattern to sit outside */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  min-height: 100%;

}

.tc-cta__card {
  height: 100%;
  border-radius: 10px;
  background: #ff6807;
  padding: 34px 34px 30px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  filter: drop-shadow(20px 20px 30px rgba(0, 0, 0, 0.35));
  aspect-ratio: 1 / 1; /* keeps the 2x2 block consistent */
  position:relative;
    z-index:10;
}

.tc-cta__card::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -80px;
  bottom:-100px;
  z-index: -5;          /* behind card content */
  pointer-events: none;
  background: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/circle-dither-light-orange.svg')
    no-repeat center / contain;
}


/** hover cards**/
#insights-hover-row1 .c-hover-cards-row > div:nth-child(2)
.c-hover-card-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/hover-corner.svg');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 90%;
  pointer-events: none;
  z-index: 0;
}

#insights-hover-row1 .c-hover-cards-row > div:first-child {flex: 0 0 50%; max-width: 50%; pointer-events:none;}

#insights-hover-row1 .c-hover-cards-row > div:nth-child(1)::after{
  content: "";
  position: absolute;
  top: 0;
  right: 15px;
  width: 100%;
  height: 100%;
  background-image: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/corner-gradient-mist.svg');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 50%;
  pointer-events: none;
  z-index: 1;
}

#insights-hover-row2 .c-hover-cards-row > div:nth-child(2) .c-hover-card-container::before,
#insights-hover-row2 .c-hover-cards-row > div:nth-child(4) .c-hover-card-container::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/hover-corner.svg');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 90%;
  pointer-events: none;
  z-index: 0;
}

#insights-hover-row2 p {color: #ffffff; font-size: 26px; line-height: 1.3; letter-spacing: 1px;}
#insights-hover-row1 p {color: #ffffff; font-size: 26px; line-height: 1.3; letter-spacing: 1px;}

.learn-more { display: inline-flex; align-items: left; gap: 12px; text-decoration: none;}

.logos-row > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  width: 1px;
  height: 80%;
  background: rgba(255, 255, 255, 0.35);
  z-index:1;
}

.c-tabs {
    display: flex;
    justify-content: space-between;
    text-align: center;
    list-style: none;
    margin-bottom: 0px;
    padding-left: 0;
    margin-left: 15px;
    margin-right: 15px;
    gap: 20px;
}

/** uses case page **/

#analytics-stack .hhs-reg-image {
    object-fit: contain;
  }
#uc-cards .c-card {
    height: 100% !important;
    border-radius: 10px;
  padding-top:30px !important;
}

/** price card **/
#price-card-wrapper .c-2 {width:100%;   display: flex; justify-content: center; }

.price-card{
  position: relative;
  width: 320px;
  height: 420px;
  padding:40px;
  border-radius: 20px;
  background: #ff6a00;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap:20px;
  box-shadow: 20px 20px 40px 0 rgba(0, 0, 0, 0.25);
  background-image: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Images/price-corner.png');
  background-repeat: no-repeat;
  background-position: right top;
}

/* dotted-square pattern top-right */
#price-card-wrapper .c-2::before {
  content: "";
  position: absolute;
  width:120%;
  height:120%;
  background-position: center;
 /* right: -80px;
  top:-80px;*/
  z-index: 0;          /* behind card content */
  pointer-events: none;
  background: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/circle-dither-light-orange.svg')
    no-repeat center / contain;
}

.hhs-foot-break-line {display:none !important;}
.hhs-foot-nav-base {display:none;}
#footer-form .hsfc-Step__Content { padding: 0 !important;}
#footer-form .col-title {color:#fff !important;}

#hs_form_target_global_footer_-23 > div { padding: 0 !important;}
#hs_form_target_global_footer_-23 .hsfc-Row {margin-bottom:5px;}
#hs_form_target_global_footer_-23 .hsfc-NavigationRow {margin-top:10px;}


_________________________________


/** 1440 MEDIA **/
@media (max-width:1440px) {

.tc-grid  { width: 90%;}
 .tc-cta__card::before {
  width:400px !important;
  height:400px !important;
  right:-90px;
  bottom:-120px;
  z-index:-5;
}
}

@media (min-width: 1440px) {
  .h1-home { font-size: 76px;}
  
}

/** SMALL LAPTOP MEDIA **/
@media (max-width:1025px){
.h1-home {  font-size: 64px;}
.h1 {font-size: 50px;}
.tc-grid {width: 100%; gap: 13px !important; aspect-ratio: 1 / 1; } 
.tc-cta__card::before { width:200px !important; height:200px !important; right:-50px; bottom:-60px; z-index:-5;}
.tc-cta__card h5 {font-size: 19px;}
.tc-cta__card {  padding: 20px 20px 18px;}

#insights-hover-row2 .inner-con {padding:30px !important;}
#insights-hover-row2 p {color: #ffffff; font-size: 23px; line-height: 1.3; letter-spacing: 1px;}
#insights-hover-row2 .c-hover-cards-module .card-col { margin-bottom: 60px; }
#insights-hover-row2 .card-col {padding-right: 7px;padding-left: 7px;}
  
#hero-video::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  bottom:0;
  z-index: 2;       
  pointer-events: none;
   background-image: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/video-corner-gradient.svg')    no-repeat center / contain;
  background-position: bottom right;
  background-size: 50%;
  }

/** TABLET - LAPTOP MEDIA **/
@media (min-width: 760px) and (max-width:1000px) {

#insights-hover-row1 .c-hover-cards-row > div:first-child {flex: 0 0 100%; max-width: 100%; pointer-events:none;} 

#insights-hover-row2 .c-hover-cards-row {flex-direction: column-reverse;}  
  
  }


  
/** MOBILE MEDIA **/
@media (max-width: 760px) {
  
.h1-home {font-size: 50px;}

.tc-grid { width: 100% !important; gap: 10px; aspect-ratio: 1 / 1; margin-top:50px;  } 
.tc-cta__card::before { width:250px !important; height:250px !important; right:-60px; bottom:-80px; z-index:-5;}
.tc-cta__card h5 {font-size: 16px;}

#insights-hover-row1 .c-hover-cards-row > div:first-child {flex: 0 0 100%; max-width: 100%; pointer-events:none;} 
#insights-hover .c-hover-cards-row > div:nth-child(1) .c-hover-card-container::before {   background-size: 70%;}
#insights-hover-row2 .c-hover-cards-row {flex-direction: column-reverse;}
#insights-hover-row2 p {color: #ffffff; font-size: 26px; line-height: 1.3; letter-spacing: 1px;}
  
#hero-video::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  bottom:0;
  z-index: 2;       
  pointer-events: none;
   background-image: url('https://242216844.fs1.hubspotusercontent-na2.net/hubfs/242216844/Thred%20Cloud%20Website/Icons%20and%20SVGs/video-corner-gradient.svg')    no-repeat center / contain;
  background-position: bottom right;
  background-size: 70%;
  }

}