@media (max-width: 48rem) {
html {
font-size: 16px;
}
.section-compliance {
position: unset;
}
.compliance-content {
text-align: center;
}
.compliance-list {
justify-content: center;
text-align: center;
align-items: center;
display: grid;
}
.canvas-scale-wrapper {
width: 100%;
overflow-x: hidden !important;
}
.desktop-1 {
width: 100vw !important;
height: auto !important;
/* Sets core section foundation to white fallback */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
overflow-x: hidden !important;
}
/* Completely isolate and disable desktop background masks that cause text coloring blocks */
.desktop-1-item {
display: none !important;
}
/* Explicit section level layouts matching color blocking definitions in design */
.section-hero {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4rem 1.5rem 3.5rem 1.5rem !important;
}
.section-value {
background-image: url('/assets/images/background/svg/hero_divider_curve.svg') !important;
background-repeat: no-repeat !important;
background-position: center top !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4.5rem 1.5rem 1rem 1.5rem !important;
min-height: 750px !important;
}
.section-companion {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 5rem 1.5rem 4.5rem 1.5rem !important;
position: relative !important;
}
.section-partners {
background-image: url('/assets/images/background/svg/lower_divider_curve.svg') !important;
background-repeat: no-repeat !important;
background-position: center bottom !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 12rem 1.5rem 4.5rem 1.5rem !important;
min-height: 690px !important;
}
.section-testimonial {
width: 100% !important;
position: relative !important;
top: auto !important;
left: auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4.5rem 1.5rem 5.5rem 1.5rem !important;
}
.testimonials-stack {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
overflow: visible !important;
padding: 0 !important;
}
.testimonial-item {
margin-bottom: 2.5rem !important;
}
.testimonial-item:last-child {
margin-bottom: 0 !important;
}
.footer-section {
background-color: #0a132e !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 0 !important;
}
/* Coordinate Map Normalization */
.providing-a-better-container,
.claritys-innovative-computer,
.image-1-icon,
.unlock-the-value,
.engage-was-designed,
.image-3-icon,
.image-5-icon,
.engage-is-more-container,
.engage-strengthens-the,
.join-our-incredible,
.weve-partnered-with,
.b,
.engage-makes-it,
.betsy-weber-lmhc-container {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
width: 100% !important;
height: auto !important;
margin: 0 auto !important;
text-align: center !important;
box-sizing: border-box !important;
}
.timeslot-figma-file {
display: none !important;
}
/* --- FIXED NAVBAR UI LAYOUT --- */
.banner {
position: relative !important;
width: 100% !important;
height: 5.5rem !important;
background-color: #0a132e !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 1.5rem !important;
box-sizing: border-box !important;
z-index: 100 !important;
}
.logo-icon {
position: relative !important;
top: auto !important;
left: auto !important;
width: 7.8rem !important;
height: auto !important;
}
.contact-btn-wrapper {
/* position: relative !important; */
width: 6.5rem !important;
height: 2.35rem !important;
}
.desktop-1-child {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 5.625rem !important;
background-color: #b3e4bd !important;
}
.contact {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
color: #0a132e !important;
display: block !important;
width: auto !important;
height: auto !important;
}
.section-hero {
position: relative !important;
overflow: visible !important;
z-index: 1 !important;
}
.image-2-icon {
display: none !important;
}
.section-value {
position: relative !important;
z-index: 1 !important;
}
/* --- SECTION 1: HERO VIEW --- */
.providing-a-better-container {
font-size: 2.1rem !important;
line-height: 2.75rem !important;
margin-bottom: 1.5rem !important;
color: #ffffff !important;
padding: 0 0.5rem !important;
box-sizing: border-box !important;
}
.claritys-innovative-computer {
font-size: 1rem !important;
line-height: 1.7rem !important;
margin-bottom: 2.5rem !important;
color: #ffffff !important;
padding: 0 0.5rem !important;
box-sizing: border-box !important;
}
.cta-wrapper-1 {
position: relative !important;
width: 16rem !important;
height: 3.4rem !important;
margin-bottom: 3rem !important;
}
.desktop-1-inner {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 5.625rem !important;
background-color: #b3e4bd !important;
color: #0a132e !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
.desktop-1-inner:hover,
.desktop-1-inner:focus {
background-color: #8238EC !important;
color: #fff !important;
}
.image-1-icon {
width: 100% !important;
max-width: 26rem !important;
height: auto !important;
}
/* --- SECTION 2: VALUE PROP VIEW --- */
.unlock-the-value {
color: #0a132e !important;
font-size: 2.1rem !important;
line-height: 2.75rem !important;
margin-bottom: 2rem !important;
}
.video-container {
width: 100% !important;
height: 400px !important;
display: flex !important;
justify-content: center !important;
margin-bottom: 2rem !important;
}
.image-3-icon {
width: 100% !important;
max-width: 28rem !important;
height: auto !important;
border-radius: 0.75rem !important;
}
.engage-was-designed {
color: #fff !important;
font-size: 1rem !important;
line-height: 1.7rem !important;
margin-bottom: 2.5rem !important;
margin-top: 1.5rem !important;
}
.cta-wrapper-2 {
position: relative !important;
width: 16rem !important;
height: 3.4rem !important;
}
.rectangle-div {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 5.625rem !important;
background-color: #b3e4bd !important;
color: #0a132e !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
.rectangle-div:hover,
.rectangle-div:focus {
background-color: #8238EC !important;
color: #fff !important;
}
/* --- SECTION 3: COMPANION WORKFLOW VIEW --- */
.section-companion {
padding-top: 1.5rem !important;
}
.companion-image-spacer {
width: 100% !important;
height: 19rem !important;
/* 17.5rem image + 1.5rem top offset */
flex-shrink: 0 !important;
}
.wave-background-holder,
.image-5-icon {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 25rem !important;
height: 25rem !important;
max-width: 100vw;
z-index: 1 !important;
}
.engage-is-more-container {
position: relative !important;
font-size: 2.1rem !important;
line-height: 2.75rem !important;
margin: 5.3rem 0rem 1.5rem 0rem !important;
color: #ffffff !important;
z-index: 2 !important;
}
.engage-strengthens-the {
position: relative !important;
font-size: 1rem !important;
line-height: 1.7rem !important;
color: #ffffff !important;
z-index: 2 !important;
}
.join-our-incredible {
color: #0a132e !important;
font-size: 2.1rem !important;
line-height: 2.75rem !important;
margin-bottom: 1.5rem !important;
}
.weve-partnered-with {
color: #0a132e !important;
font-size: 1rem !important;
line-height: 1.7rem !important;
margin-bottom: 3rem !important;
}
.cta-wrapper-3 {
position: relative !important;
width: 16rem !important;
height: 3.4rem !important;
}
.rectangle-div-partner {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 5.625rem !important;
background-color: #b3e4bd !important;
color: #0a132e !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
.rectangle-div-partner:hover,
.rectangle-div-partner:focus {
background-color: #8238EC !important;
color: #fff !important;
}
/* --- SECTION 5: CLINICAL TESTIMONIAL VIEW --- */
.b {
width: 100px !important;
height: 100px !important;
justify-self: center;
margin-bottom: 3rem;
}
.engage-makes-it {
font-size: 1.55rem !important;
line-height: 2.25rem !important;
color: #ffffff !important;
margin-bottom: 2.5rem !important;
}
.betsy-weber-lmhc-container {
font-size: 1.05rem !important;
line-height: 1.6rem !important;
color: #b3e4bd !important;
}
.chief-clinical-officer-ocala {
color: #ffffff !important;
}
/* --- SECTION 6: FIXED FOOTER COMPONENT VIEW --- */
.banner2 {
position: relative !important;
top: auto !important;
width: 100% !important;
height: auto !important;
background-color: #0a132e !important;
padding: 5.5rem 1.5rem 3.5rem 1.5rem !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.ellipse-div {
position: absolute !important;
top: -3.5rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 6rem !important;
height: 6rem !important;
background-color: #0a132e !important;
display: block !important;
}
.image-14-icon {
position: absolute !important;
top: -2.7rem !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 9rem !important;
height: auto !important;
display: block !important;
}
.footer-links-grid {
display: flex !important;
flex-direction: column-reverse !important;
align-items: center !important;
width: 100% !important;
}
.terms-of-service,
.privacy-policy,
.infoengagebyclaritycom,
.copyright-2025-all {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
text-align: center !important;
font-size: 0.95rem !important;
line-height: 1.45rem !important;
display: block !important;
height: auto !important;
}
.terms-of-service {
color: #b3e4bd !important;
}
.privacy-policy {
color: #b3e4bd !important;
}
.infoengagebyclaritycom {
color: #ffffff !important;
}
.copyright-2025-all {
color: rgba(255, 255, 255, 0.45) !important;
}
.image-4-icon {
display: none !important;
}
.partners-logos-container {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
width: 100% !important;
height: auto !important;
margin-bottom: 2rem !important;
}
.partner-logo-slot {
position: relative !important;
width: 9.53125rem !important;
height: 9.53125rem !important;
margin-left: 0 !important;
margin-bottom: clamp(-1.25rem, -4vw, -2rem) !important;
}
.partner-logo-slot:last-child {
margin-bottom: 0 !important;
}
.partner-logo-link {
display: block !important;
width: 100% !important;
height: 100% !important;
}
.partner-logo-image {
width: 66% !important;
height: 66% !important;
object-fit: contain !important;
}
.image-4-wave-icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}
}
@media (max-width: 48rem) {
.testimonial-carousel-container {
flex-direction: column;
}
.carousel-btn {
display: none;
/* Hide arrow buttons on small screens in favor of swipe/dots */
}
.testimonial-item {
padding: 1rem 0.5rem;
}
}
@media (max-width: 22rem) {
.join-our-incredible {
font-size: 1.8rem !important;
}
.logo-icon {
width: 3.5rem !important;
}
}
@media (max-width: 32rem) {
.logo-icon {
width: 3.5rem !important;
}
}