html{
 font-size: 100%; 
  background-color:white !important;
  height:100%;

}
#bcont * a , #bcont * div{
  color: #333 !important;
}

#bcont{
  display:block;
padding-bottom:4rem;
}
.button2{
  color: white !important;
    background-color: #203058f7 !important;
    border-radius: 0.2em !important;
    border: none !important;
}
.labeltext{
display:block;
margin-top:1.4em;}
.topnava{
  color:white !important;
}
input{
  border:none;
  outline:none;
  border-bottom:solid 1px gray;
  background-color:transparent;
  text-align:center;
  font-family:'Montserrat', sans-serif
 !important;
}
#passReqCont > span{
  color:#333;
}
input:focus {
  border-color: #00529B;
  background-color: #ffffff;
  outline: none;
}
.bodyNoScroll {
  overflow: hidden;
}
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background:color-mix(in oklab, #e5e7eb 70%, transparent); border-radius:999px; }

@keyframes slideIn2 {
  from {
    transform: translateX(-200%); /* Starts off-screen to the left */
  }
  to {
    transform: translateX(0);
  }
}
/* Modern, sleek scrollbar styles */
::-webkit-scrollbar {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 8px;
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: #888;
}

::-webkit-scrollbar-track {
  background: transparent;
}
a{
  cursor:pointer;
}
/* Firefox */
* {
  scrollbar-color: #b0b0b0 transparent;
}
.topnava, .topmenu{
  animation-duration: 2s; /* Duration of the slide-in effect */
  padding:0 !important;
}
.topnava.scrolled, .topmenu.scrolled {
  animation-name: slideIn2; /* Apply the slide-in animation */
}
.topnava:hover{
color:#264ec1 !important;
font-weight:bold !important;
background-color:transparent !important;
}
.topnav > div > a{color:#26253b !important;}
.getStartedHome{
  font-weight:unset !important;
}


p{
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 400;
  line-height: 1.65;
}
#newlogo:hover{
  cursor: pointer;
}
#cmodal:hover{
  cursor: pointer;
}
.hometidbit{
      width:60%;
      text-align:left;
      margin-left:30%;
      font-size:1.3em;
      font-family:'Montserrat', sans-serif
;
    }


.container{
  width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.top-menu a:hover{
  color:#264ec1 !important;
}
.top-menu{
  /* layout */
  display:flex;                 /* was grid */
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;               /* prevents items from cramming on smaller widths */
  gap: clamp(.6rem, 1.6vw, 1.25rem);

  /* breathing room */
  padding: 0rem 3rem;

  /* existing aesthetics you had */
  text-align:center;
  border-radius:2em;
  margin:auto;
  margin-top:2rem;
  font-size:0.95rem;
  overflow:visible;
  transition: background-color .3s ease, box-shadow .6s ease;
  background:#f3f6ff8f !important;
}


.topowner.scrolled{
  background-color:#0d172e !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 82, .15);
    transition: background-color 0.4s ease-in-out;
  }
  .topowner{
    background:transparent;
  }
  /* Make topowner a flex container */
.topowner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes items to edges */
  padding: 0.1rem 1rem;
  overflow:visible;
}

/* Hide mobile logo by default */
.mobile-logo-container {
  display: none;
  max-height: 2.5rem;
  width: auto;
  font-size:0.4rem;
  margin-top:0.7rem;
}

  /* container for trigger + panel */
.top-menu {
  position: relative;   /* now everything absolute inside here is relative to the full nav */
  overflow: visible;
  /* …all your other styles… */
}
.top-menu > div{
                padding-top: 1em;
            padding-bottom:1em;
}
/* dropdown no longer needs to be positioned */
.dropdown {
  position: static;
  transition:background-color 1s ease, box-shadow 0.6s ease;
}
.top-menu a{
  color:#333 !important;
              font-weight:bold;

}
#starttrial,
#freeGt, .fbutt {
  display: inline-block;               /* ensure it’s not purely inline */
  color: white !important;
  padding: 0.6em 1.2em !important;
  border-radius: 1em !important;

  /* one long gradient strip: */
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 8px 24px rgba(66,82,201,.25);
  background-size: 200% 200%;
  background-position: left center;

  /* animate the position & color */
  transition: background-position 0.6s ease-in-out, color 0.6s ease-in-out;
}

#starttrial:hover,
#freeGt:hover, .fbutt:hover {
  /* slide the gradient over to reveal the “other half” */
  background-position: right center;
  color: aliceblue !important;
filter:saturate(1.05) brightness(1.02);

}
#scheduleCall {
  display: inline-block;               /* ensure it’s not purely inline */
  color: #333 !important;
  padding: 0.6em 1.2em !important;
  border-radius: 1em !important;

  /* one long gradient strip: */
  background: white !important;
  color:#2b2f45;
  border:1px solid #7882c6;  /* darker = crisper edge */
  background-size: 200% 200%;
  background-position: left center;
border:solid 0.1px #24317a !important;
  /* animate the position & color */
  transition: background-position 0.6s ease-in-out, color 0.6s ease-in-out;
}

#scheduleCall:hover{
  /* slide the gradient over to reveal the “other half” */
  background-position: right center;
  color: #333 !important;
}


#freeGt, #scheduleCall{
  font-size:1.2rem !important;
}
.dropMenu {
  position: absolute;    
  top: 100%;
  left: 0;
  padding-bottom:3rem;
    opacity: 0;           /* hidden */
margin-left:3%;
  width: 94%;           /* full width of .top-menu */
  overflow: hidden;
  transition:
    max-height 0.3s ease-out,  /* size animates */
    opacity     0.1s ease-out;  /* fade animates */  background-color: #0b1220;
  z-index: 100;
  max-height:0;
  height:100vh !important;
  overflow: auto;
    border-radius: 0.4rem;
box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
            0 6px 18px rgba(2,6,23,.06),
            0 18px 46px rgba(2,6,23,.12),
            0 48px 120px rgba(2,6,23,.10),
            0 0 0 1px rgba(17,24,39,.08);

}
.faspin{
  font-size:inherit;color:#264ec1 !important;--fa-animation-duration: 6s
}
.logo__care{
  font-family: "Poppins", sans-serif !important;
  font-weight: 600;
  display: inline-block;
  line-height:1;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:0.15px var(--logo-color) ; /* Safari/Chromium */
  text-shadow:0 .21px 0 var(--logo-color) ;  
      /* Firefox fallback */
}

.logotop{
  color: var(--logo-color)  !important;font-size:1.3rem !important;margin-bottom:0em;text-align:left;  
  font-family: "Poppins", sans-serif;
  font-weight: 400 !important; /* try 600 for a lighter feel */
    letter-spacing:-.03rem;  /* tiny tighten/neutral */
    word-spacing:-0.1rem;
    cursor:pointer;
    margin-top:-0.2rem;

}
.logotop_light{
   color: var(--logo-color-light)  !important;
}
.closeNav{
  display:none;
}
.logotop i{
  color:#27365d;font-size:0.9em;--fa-animation-duration: 6s
}

/* show on hover */
.dropdown:hover .dropMenu {
      max-height:80vh;
  opacity: 1;
  height:80vh;
}
.showme2{
  margin-top:0em;font-weight:normal;font-size:1.4em;font-family:'Raleway', sans-serif;
  font-weight: 500;
  color:#333;
}
.dropdown:hover{
background-color: none !important;
  color:#0f0555 !important;
}
.button2{
  text-transform: none;
  font-family:'Montserrat', sans-serif
;
}
  .topmenu.scrolled2{
  color:white;
  }
  #tplb{
    color:#333;cursor:pointer;font-weight:200;margin-bottom:0em;text-align:left;font-weight:500;font-size:1.2em;margin-right:1em;
  }
.cm1, .cm2{
  box-sizing: border-box;
  margin-top:1rem;

}

    .cm1 > a > i, .cm2 > a > i{
      font-size:1.2em !important;
      margin-right:0.4em;
    }


  #tplb.scrolled2{
color:white;
  }
  .gradient-text1, .gradient-text2 {
    font-size:1.4em;
    font-family:"Poppins", sans-serif;
  font-weight: 500 !important;
  color:#333 !important;
text-align:left !important;
margin-left:1.3rem !important;
} 

  #login2.scrolled2{
color:white;
  }
        #mainlogo.scrolled {
            display:block;

        }
        .topmenu {
            font-family: 'Montserrat', sans-serif;
            font-weight:500;
  text-decoration: none; /* Remove default underline */
    position: relative; /* Required for positioning the pseudo-element */
    display: inline-block; /* Or 'inline-flex' depending on your layout */
    padding:0.4em !important;

}

.fa-circle-xmark:hover{
  cursor:pointer;
}

#homeButtonCont{
  z-index:1; position:relative;margin-top:2em;
}
#homeButtonCont > a{
  margin-top:0.4rem;
}

.dropMenu > div{
  display:grid;grid-template-columns:auto auto auto;font-family:'Montserrat', sans-serif;margin-bottom:1em;text-align:left;padding:0 1.4em;align-items:center;box-sizing: border-box;gap:0.4rem;
width:94%;
}

.footer-head{
  margin-bottom:1em;font-size:1.2em;font-weight:bold;
}
.footer-cont{
  width:98%;position:relative;left:0;padding:1em;text-align:center;background:white;margin-top:4em;bottom:0;color:white;padding-top:2vw;
}
.footer-sub{display:grid;grid-template-columns:auto auto auto auto auto;justify-content:center;margin-bottom:3em;gap:2vw;column-gap:10vw;background:white;}
.footer-cont a{
  margin-top:2em !important
  
}


/* Large tablets (992px and below) */
@media (max-width: 992px) {
  /* e.g., shrink grids to tighter columns */
  .griditit {
    grid-template-columns: repeat(4, 1fr);
  }
  .feature-hero__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Tablets & small desktops (768px and below) */
@media (max-width: 768px) {
  /* make major sections full-width blocks */
  .homeheadercontainer,
  .aboutcontok,
  .aboutcontok2,
  .feature-hero__inner {
    display: block;
    width: 100%;
    padding: 1em 0;
  }
  .logo2__care{
      background: linear-gradient(180deg, transparent  0%, color-mix(in oklab, transparent 80%, #000 20%) 100%) !important;
    -webkit-text-stroke:0.25px var(--logo-color-light) !important; /* Safari/Chromium */
  text-shadow:0 .25px 0 var(--logo-color-light) !important;      /* Firefox fallback */
}
.logo2top{
   color: var(--logo-color-light)  !important;
   padding-bottom:0 !important;
}

  .rewards__copy{
    max-width:none !important;
  }
  .rewards.v2{
    max-width:none !important;
    width:96%;
    margin:auto;
    margin-bottom:1rem;
  }
  .rewards.v2 .feature-hero__inner{
  background: #f0f8ff8f;
    padding: 1rem;
    box-sizing: border-box;
}
.media{margin:1rem 0 !important;}
.button2{
  display:block !important;
  margin:auto !important;
  width:16rem !important;
  margin-top:0.4rem !important;
}
  #topMenu{
    padding:12px 16px 28px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing: border-box;
  }
  :root{
    --nav-sep: rgba(255,255,255,.08);
    --nav-card: rgba(255,255,255,.04);
    --nav-ring: rgba(99,102,241,.35);
    --radius: 14px;
    --ink: #e8ecff;
    --muted:#a9b4dd;
    --accent:#8b7eff;
  }

    /* hide the desktop grid menu */
  .top-menu {
    display: none;
    left:0;
  }
  .topowner{
    left:0;
  }
  /* ensure your mobile nav container can slide in */
  #topnavCont {
    left: -100%;
    transition: left 0.3s ease;
  }
  .feature-hero{
  max-width:100vw !important;    width:80vw;

  }
  /* Right column form card */
.form-card{
width:100% !important;
height:auto !important;
}
.waves{
    right: -0.4rem !important;
    width: 20px !important;
    height: 20PX !important;
}
  blockquote{
    font-size:1rem;
  }
  .fbutt{
    font-size:1rem !important;
  }
  .section-cta{
    font-size:1rem;
  }

.plass{
  font-size:1.3rem !important;
  line-height:1.4rem;
}
.deeb{
  font-size:1.3rem !important;
}
@media (max-width:768px){
  .top-menu.open { display: grid; }
}
@media (hover: hover){
  .dropdown:hover .dropMenu{ max-height:80vh; opacity:1; }
  .dropdown:hover{ background-color:#3022ef20; box-shadow:0 2px 4px rgba(147,147,148,.1); }
}
  /* scale headings for readability */
  h1, .hometitle { font-size: 2rem !important; }
  h2,h3             { font-size: 1.6rem !important;}
  p, .subhead    { font-size: 0.95rem !important; }

  .top-menu {
    text-align: center;
    width: 100vw;
    border-radius: 2em;
    align-items: center;
    font-size: 1.2rem;
    background: white;
    margin-top: 1em;
    grid-template-columns: auto !important;
        grid-template-rows: repeat(7, 4rem);
        gap:0;
    justify-content: center;
    overflow: visible;
    transition: background-color 0.3s ease, box-shadow 0.6s ease;
    top: 0;
    position: fixed !important;
    z-index: 10000;
    margin: 0;
    border-radius: 0;
    height: 100vh;
    
}
.closeNav{
  display:block;
  position:absolute;
  top:0.4em;
  right:0.4em;
}
section h2{
  font-size:2rem !important
}
.features-container{
  width:auto !important;
}
#deebcont{
  margin:0 !important;
}
.enhance{
  padding:0 !important;
  width:auto !important;
  
}
.footer-sub{
      font-size: 1rem;
      grid-template-columns: auto;
}
.bcont{
  font-size:1rem !important;
}
.feature-icon i{
  font-size:1.4rem !important;
}
.testimonials{
  padding:0 !important;
}
.role-card h3 {font-size:1.1rem !important;}
   .dropMenu{ max-height: 80vh;
    height: 80vh;
    z-index: 1000000000;
    top: 0;
    left: 0;
    max-height:100vh !important;
    position: fixed;
    box-sizing: border-box;
    padding:0.8em;
    width: 100vw;
    border-radius:0;
    gap:0;
    height: 100vh !important;
    overflow: auto;
      pointer-events: none;              /* no clicks through */
  transition:    max-height .3s ease, opacity .3s ease;
  transition-delay: 0s;         
    margin: 0;}
/* 2) Open state: animate in, but delay pointer-events until after */
.dropdown.open .dropMenu {
  opacity:        1;
  max-height:     80vh;
  transition-delay: 0s, 0s;         /* animate immediately */
}
.mobile-logo-container{
  display:block;
}

/* 3) And only once it’s fully open, enable clicks */
.dropdown.open .dropMenu {
  /* add a second transition on pointer-events */
  transition:    opacity .3s ease, pointer-events 0s;
  transition-delay: 0s, 0s, .3s;     /* pointer-events kicks in after 0.3s */
  pointer-events: auto;
}

    .dropMenu > div{
          display: grid;
    color: aliceblue;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    margin-top: 1em;
    margin-bottom: 1em;
    grid-template-columns:auto !important;
    text-align: left;
    padding: 0 1.4em;
    align-items: center;
    margin-left:0;
    width:100%;
    }
    .dropMenu .menu-label{
      margin-left:1.6rem !important;
    }

  }
/* Phones (576px and below) */
@media (max-width: 576px) {
  /* collapse any 2-column grids to 1 */
  .featureContHold,
  .imgcon,
  .timeline-content {
    grid-template-columns: 1fr !important;
  }





  /* tighten padding */
  .container { padding: 0 0.5rem; }
}
.menu-toggle {
  display: none;
  font-size: 0.8rem;
  padding: 0.6em;
  cursor: pointer;
  color: #333;
  
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
}
#scheduleCall{
  margin-bottom: 0.4rem !important;
}
/* When menu is open, slide it in */
body.bodyNoScroll + #topnavCont,
#topnavCont.open {
  left: 0 !important;
}
body{
  overflow:hidden;
}


:root{
  --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#fff;
  --brand:#122867; --brand-2:#3f6ebf; --brand-3:#140567;
  --radius:14px; --gap:1.6rem;
}

/* Modal backdrop + motion */
.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(10,15,25,.55); backdrop-filter: blur(6px);
  z-index:2000000;
}
.modal.modal--visible-on{ display:grid; animation:fadeIn .18s ease-out both; }
.modal.modal--visible-off{ display:none; }
@media (prefers-reduced-motion:no-preference){
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
  @keyframes popIn{ from{transform:translateY(8px) scale(.98); opacity:0}
                    to{transform:none; opacity:1}}
}

/* Card */
.form-card{
  width:min(720px, 92vw); background:var(--bg); color:var(--ink);
  border-radius:var(--radius); box-shadow:0 20px 60px rgba(16,24,40,.18);
  padding:clamp(16px, 2.5vw, 28px); position:relative; animation:popIn .22s ease-out both;
}
.form-card--narrow{ width:min(520px, 92vw); }

/* Close button */
.modal-close{
  position:absolute; top:10px; right:12px; border:0; background:transparent;
  padding:.4rem; line-height:0; color:var(--muted); cursor:pointer;
}
.modal-close:hover{ color:var(--ink); }

/* Header */
.form-header{ text-align:center; margin-bottom:1rem; }
.form-title{ font:600 1.4rem/1.2 'Raleway', system-ui; color:var(--ink); letter-spacing:.1px; }
.form-title i{ color:var(--brand); font-size:.9em; }
.form-subtitle{ margin:.1rem 0 0; margin-bottom:2rem;color:var(--muted); }

.form-title-sm{ font:600 1.1rem/1.2 'Raleway'; color:var(--ink); margin:.25rem 0 0; }
.brandline{ display:flex; justify-content:center; align-items:center; gap:.5rem; color:var(--brand); }
.brandline .brand{ font-family:'Merriweather', serif; font-weight:400; color:var(--ink);font-size:1.3rem; }

/* Grid */
.form-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin:1rem 0;
}
@media (max-width:768px){ .form-grid{ grid-template-columns:1fr; } }

/* Fields */
.field{ position:relative; }
.field input{
  width:100%; background:transparent; border:1px solid var(--line);
  border-radius:12px; padding:1rem .9rem .9rem; font:500 1rem/1.2 'Montserrat', system-ui;
  color:var(--ink); caret-color:var(--brand); transition: border .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{ color:transparent; } /* for floating labels */
.field input:focus{
  outline:none; border-color:#a1b6ff;
  box-shadow:0 0 0 4px rgba(60,110,191,.15);
  background:#fff;
}
.field.with-addon input{ padding-right:2.6rem; }

.field > label{
  position:absolute; left:.8rem; top:.95rem; padding:0 .3rem;
  background:var(--bg); color:#64748b; pointer-events:none;
  transform-origin:left top; transition: transform .18s ease, color .18s ease, font-weight .18s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-1.25rem) scale(.88);
  background:transparent;
  color:var(--brand); font-weight:700; /* bold when floated */
}

.field-addon:hover{ background:#f3f6ff; color:var(--brand); }

/* Hints / errors */
.form-hint{ margin:2rem 0; width:min(640px, 100%); color:var(--muted); font-size:.9rem; }
.form-error{ color:#b91c1c; min-height:1.25rem; }

/* Strength meter */
.strength{ display:flex; gap:.35rem; margin-top:.5rem; }
.strength .bar{
  height:.35rem; flex:1; background:#e2e8f0; border-radius:999px;
  transition:background .2s ease, opacity .2s ease;
}

/* Buttons */
.btn{
  appearance:none; border:0; border-radius:12px; padding:.9rem 1.1rem;
  font:600 1rem/1 'Montserrat', system-ui; cursor:pointer; width:100%;
  transition: transform .06s ease, box-shadow .2s ease, background-position .4s ease;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  background-size:200% 100%;
  box-shadow:0 8px 20px rgba(63,110,191,.25);
}
.btn-primary:hover{ background-position: 100% 0; }
.btn:active{ transform:translateY(1px); }

/* Footer links */
.form-footer{
  display:grid;
  margin-top:2rem !important;
  gap:0.4rem !important;
  justify-content: center;
}
.link{ background:none; border:0; color:var(--brand); cursor:pointer; text-decoration:underline; padding:0; }

/* Terms */
.tos{ font-size:.8rem; color:var(--muted); text-align:center; margin: .6rem 0 1rem; }
.tos a{ color:var(--ink); text-decoration:underline; }

/* Responsive full screen for registration on small screens */
@media (max-width:768px){
  .form-card{ border-radius:0; width:100vw; height:100dvh; overflow:auto; }

/* Put this late in your CSS */
.dropdown a,
.dropdown button {
  -webkit-tap-highlight-color: transparent;   /* iOS Safari tap highlight */
}

.dropdown a:focus,
.dropdown a:active,
.dropdown a:focus-visible {
  background: transparent !important;         /* nuke any bg rule */
  box-shadow: none !important;
  outline: none;                               /* or replace with your own ring */
}

/* If it's text selection */
.dropdown ::selection { background: transparent; color: inherit; }
.dropdown ::-moz-selection { background: transparent; color: inherit; }


}

/* ===========================
   Habit Of Care — Auth (scoped)
   =========================== */
.hoc-auth{
  /* design tokens (scoped, not global) */
  --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#fff;
  --brand:#122867; --brand-2:#3f6ebf; --brand-3:#140567;
  --radius:16px; --gap:1.6rem;
}
.hoc-auth, .hoc-auth *{ box-sizing:border-box; }
.hoc-auth input,
.hoc-auth button,
.hoc-auth label{ font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* kill global .container / input rules inside auth */
.hoc-auth .container{ width:100%; margin:0; padding:0; }
.hoc-auth input{
  width:100%;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1rem .9rem .9rem;
  text-align:left;
  outline:none;
  overflow:hidden; text-overflow:ellipsis;
}
.hoc-auth input:focus{
  border-color:#a1b6ff;
  box-shadow:0 0 0 4px rgba(60,110,191,.15);
}

/* autofill fix */
.hoc-auth input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--brand);
  transition:background-color 9999s ease-out 0s;
}

/* field + floating label */
.hoc-auth .field{ position:relative; }
.hoc-auth .field.with-addon input{ padding-right:2.6rem; }
.hoc-auth .field input{ position:relative; z-index:1; }
.hoc-auth .field > label{
  position:absolute; left:.8rem; top:.95rem;
  padding:0 .3rem; background:var(--bg);
  color:#64748b; line-height:1.2; font-size:.95rem;
  pointer-events:none; transform-origin:left top;
  transition:transform .18s ease, color .18s ease, font-weight .18s ease;
  z-index:2;
}
/* float label on value, focus, or autofill */
.hoc-auth .field input[data-has-value="true"] + label,
.hoc-auth .field input:-webkit-autofill + label,
.hoc-auth .field input:focus + label,
.hoc-auth .field input:not(:placeholder-shown) + label{
  transform:translateY(-2rem) scale(.88);
  color:var(--brand); font-weight:700;
}
  .menu-divider2{ height:1px; background: rgba(104, 104, 104, 0.113); margin:1rem;margin-top:0.1rem;padding:0 !important; display: block;}

/* field addon (eye icon) */
.hoc-auth .field-addon{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  width:2.1rem; height:2.1rem; border:0; border-radius:8px;
  display:grid; place-items:center; background:transparent; color:#6b7280;
  cursor:pointer;z-index:100;margin:0;padding:0;
}
.hoc-auth .field-addon:hover{ background:#f3f6ff; color:var(--brand); }

/* modal (centered) */
.hoc-auth .modal{
  position:fixed; inset:0; display:none; place-items:center;
  min-height:100dvh; padding:0;       /* neutralize any global padding */
  background:rgba(10,15,25,.55); backdrop-filter:blur(6px);
  z-index:2000000;
}
.hoc-auth .modal.modal--visible-on{ display:grid; }

/* card */
.hoc-auth .form-card{
  width:min(720px,92vw);
  background:var(--bg); color:var(--ink);
  border:1px solid rgba(2,6,23,.06);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(2,6,23,.10), 0 6px 18px rgba(2,6,23,.08);
  padding:20px 20px 16px;
  animation:popIn .22s ease-out both;
}
.hoc-auth .form-card--narrow{ width:min(440px,92vw); }

/* header + close button */
.hoc-auth .form-header{ padding-top:4px; margin-bottom:12px; text-align:center; }
.hoc-auth .modal-close{
  position:absolute; top:10px; right:12px; z-index:3;
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:#fff; border:1px solid rgba(2,6,23,.08); color:#475569;
  transition:transform .08s ease, box-shadow .15s ease;
}
.hoc-auth .modal-close:hover{ transform:scale(1.04); box-shadow:0 6px 14px rgba(15,23,42,.12); }

/* layout */
.hoc-auth .form-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin:12px 0;
}
.hoc-auth .form-grid > *{ min-width:0; } /* prevent overflow */
@media (max-width:768px){
  .hoc-auth .form-card{ border-radius:0; width:100vw; height:100dvh; overflow:auto; box-sizing: border-box; padding:1rem !important;}
  .hoc-auth .form-grid{ grid-template-columns:1fr; }
}

/* strength & helper text */
.hoc-auth .form-hint{ margin:2rem; width:min(640px,100%); color:var(--muted); font-size:.9rem; }
.hoc-auth .strength{ display:flex; gap:.35rem; margin-top:.5rem; }
.hoc-auth .strength .bar{ height:.35rem; flex:1; background:#e2e8f0; border-radius:999px; }

/* buttons */
.hoc-auth .btn{
  width:60%; display:block;margin:auto;appearance:none; border:0; border-radius:12px;
  padding:.9rem 1.1rem; font:600 1rem/1 'Montserrat'; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, background-position .4s ease;
}
.hoc-auth .btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 50%, var(--brand-3) 100%);
  background-size:200% 100%;
  box-shadow:0 8px 20px rgba(63,110,191,.25);
}
.hoc-auth .btn-primary:hover{ background-position:100% 0; }
.hoc-auth #id01 .field{ margin-bottom:1.6rem; }
.hoc-auth #id01 .btn-primary{ margin-top:6px; }

/* footer */
.hoc-auth .link{ color:var(--brand); text-decoration:underline; background:none; border:0; padding:0; cursor:pointer; }

/* typography fix inside auth (prevents huge headings from globals) */
.hoc-auth .form-header,
.hoc-auth .form-footer,
.hoc-auth p,
.hoc-auth a{ font-size:.95rem; }
.hoc-auth .form-title{ font:600 1.35rem/1.2 'Raleway', system-ui; }
.hoc-auth .form-title-sm{ font:600 1.1rem/1.2 'Raleway', system-ui; }

/* tiny entrance motion (optional) */
@keyframes popIn{ from{ transform:translateY(8px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
/* ===== For Clients – dark cards to match navy bg ===== */
:root{
  --navy-900:#0b1120;
  --navy-800:#0f1730;
  --ink-700:#1b2240;
  --text-50:#f3f6ff;
  --text-200:#ccd6ff;
  --text-300:#b8c4ff;
  --accent-500:#5755b9;
  --accent-400:#7e7bff;
  --logo-color:rgb(28, 23, 123)  ;
      --logo-color-light:#C7D2FE;
  --brand-1:#1f1860; /* deep indigo/navy */
  --brand-2:#4252c9; /* primary blue */
  --brand-3:#7b8ce6; /* periwinkle accent */
  --slate:#5b6270;
}


.dropMenu{
    background:white;
}

.clients-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
/* --- LIGHT CARD --- */
.client-card{
  color: var(--ink, #111827);
  background:
    /* brand tint that makes the card pop a bit */
    radial-gradient(800px 260px at -10% -20%, color-mix(in oklab, var(--accent-400, #7e7bff) 10%, transparent) 0%, transparent 60%),
    /* soft top highlight */
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 55%),
    /* base panel */
    linear-gradient(180deg, #ffffff, #f7f9ff);
  border: 1px solid color-mix(in oklab, var(--accent-400, #7e7bff) 16%, rgba(17,24,39,.10));
  border-radius: 16px;
  margin-bottom: 0 !important;
  padding:1rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,            /* crisp inner top highlight */
    0 10px 28px rgba(2,6,23,.10);                  /* ambient lift */
  transition:
    transform .12s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.client-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(2,6,23,.14);
  border-color: color-mix(in oklab, var(--accent-400, #7e7bff) 22%, rgba(17,24,39,.16));
}

/* Hide mobile-only bits if you had them */
.menu-label, .menu-divider{ display:none; }

/* Accent tint for the "Recommended" card on LIGHT */
.client-card--primary{
  background:
    radial-gradient(900px 300px at -20% -30%, color-mix(in oklab, var(--accent-400, #7e7bff) 22%, #241f67) 0%, transparent 65%), linear-gradient(180deg, #170d6b, #2e41b3) !important;
    color:white !important;
  border-color: color-mix(in oklab, var(--accent-400, #7e7bff) 32%, rgba(17,24,39,.14));
}
.client-card--primary .card-title, .client-card--primary .card-copy, .client-card--primary .btn-store{
  color:white !important;
}

.client-card--primary .btn-store:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border-color: rgba(126,123,255,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  color:white !important;
}

/* text on light */
.card-title{
  font: 700 1.02rem/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink, #111827) !important;
  margin: 4px 0 6px;
}

.card-copy{
  color: #333;                 /* stronger readability on light */
  margin: 0 0 12px;
  line-height: 1.5;
  font-size: .95rem;
}

/* badges (light) */
.card-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700;
  padding:4px 8px; border-radius:999px; margin-bottom:8px;

  color: color-mix(in oklab, var(--accent, #6f85ff) 65%, #1f2937);
  background: linear-gradient(180deg,
              color-mix(in oklab, var(--accent, #6f85ff) 14%, #ffffff) 0%,
              color-mix(in oklab, var(--accent, #6f85ff) 8%, #ffffff) 100%);
  border: 1px solid color-mix(in oklab, var(--accent, #6f85ff) 28%, rgba(17,24,39,.10));
}

.card-badge--subtle{
  color: #374151; /* gray-700 */
  background: linear-gradient(180deg, rgba(17,24,39,.04), rgba(17,24,39,.02));
  border: 1px solid rgba(17,24,39,.10);
}

/* actions row (unchanged) */
.card-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* Optional: focus ring for accessibility */
.client-card:focus-within,
.client-card:focus-visible{
  outline: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 3px color-mix(in oklab, var(--accent, #6f85ff) 20%, transparent),
    0 10px 28px rgba(2,6,23,.12);
}


.btn-store,.btn-secondary{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:10px;text-decoration:none;
  font-weight:700;font-size:.92rem;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  color: var(--text-50);
  border:1px solid rgba(160,170,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.client-card--primary .btn-store{border-color: rgba(126,123,255,.45);}
.btn-store:hover,.btn-secondary:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border-color: rgba(126,123,255,.55);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* disabled placeholder links still dim */
.btn-store[href="#"], .btn-secondary[href="#"]{
  opacity:.45; pointer-events:none; filter:grayscale(.2);
}

/* focus */
.btn-store:focus-visible, .btn-secondary:focus-visible, .client-card:focus-within{
  outline:none;
  box-shadow: 0 0 0 3px rgba(126,123,255,.38);
}
/* === Dropdowns (desktop): hover intent + click fallback === */
/* Make sure ancestors don't clip the panel */
.topowner,
.top-menu,
.top-menu .dropdown {
  overflow: visible !important;
}

/* Base panel (desktop) */
.top-menu .dropdown > .dropMenu{
  position: absolute;
  top: calc(100% - 20px);
  z-index: 1000;

  /* size */
  width: 64vw;        /* good default width */
  max-height: 80vh;
  overflow: auto;

  /* neutralize legacy full-screen behaviors */
  height: auto !important;
  margin: 0 !important;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* default placement = centered under trigger */
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* Open states: hover (desktop) or JS .open (touch) */
.top-menu .dropdown.hover-open > .dropMenu,
.top-menu .dropdown.open > .dropMenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(var(--x-translate, -50%)) translateY(0);
  transition-delay: 0s;
}

/* Alignment variants set by JS */
.top-menu .dropdown[data-align="center"] > .dropMenu{
  left: 50%;
  right: auto;
  --x-translate: -50%;
}
.top-menu .dropdown[data-align="left"] > .dropMenu{
  left: 0;
  right: auto;
  --x-translate: 0;
}
.top-menu .dropdown[data-align="right"] > .dropMenu{
  right: 0;
  left: auto;
  --x-translate: 0;
}

.dropdown a{
  padding:0.4rem;
}
/* Prevent any older :hover rule from forcing full-viewport panels */
.top-menu .dropdown:hover > .dropMenu{ /* intentional no-op */ }

/* Mobile: keep your full-screen pattern */
@media (max-width: 768px){
  .top-menu{
    background:white !important;
  }
  .top-menu .dropdown > .dropMenu{
    position: fixed;
    inset: 0 auto auto 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    transform: none;
    background:white !important;
    border-radius: 0;
  }
.top-menu .dropdown.hover-open > .dropMenu, .top-menu .dropdown.open > .dropMenu {  
          transform: none !important;
        height: 100vh !important;
        overflow: auto !important;
        padding:1rem;
        padding-bottom: 30vh !important;
  }
}


/* Home: Therapists spotlight (minimal, matches site) */
.spotlight-therapists { background:#fff; padding:1.25rem 0; }
.spotlight-row {
  display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:center;
}
.spotlight-visual { margin:0; }
.spotlight-visual img {
  width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid #e7ecff;
}
.spotlight-list { list-style:none; margin:.6rem 0 1rem; padding:0; display:grid; gap:.4rem; }
.spotlight-list li { display:flex; gap:.5rem; align-items:flex-start; }
.spotlight-list i { color:#3f6ebf; min-width:1.25em; text-align:center; margin-top:.1rem; }

/* Stack on smaller screens */
@media (max-width:1024px){
  .spotlight-row { grid-template-columns:1fr; }
}
.alink{
  cursor:pointer !important;
}
@media (max-width:768px){
  /* Full-screen sheet look */
  .hoc-auth .form-card{
    margin-top:0;
  }
  .hoc-auth .form-hint{
    margin:0 !important;
  }

  .top-menu{
    position: fixed !important;
    inset: 0;
    display: none;             /* shown when .open */
    padding: 1rem 1rem 4.5rem; /* room for CTA at bottom */
    gap: .5rem;
    box-shadow: 0 8px 32px rgba(2,8,23,.18);
  }
  .top-menu.open{ display: grid; } /* pairs with fix (B) */

  /* Header row: logo + close */
  .top-menu .logotop{
    margin: .25rem 0 1rem;
    padding-bottom:0 !important;
    max-width:66%;
  }
  .top-menu .closeNav{
    position:absolute; right:.75rem; top:.75rem; font-size:1.4rem;
  }

  /* Each top-level item as a comfy tap row */
  .top-menu > .dropdown > .topmenu,
  .top-menu > a.topmenu{
    display:flex; align-items:center; justify-content:space-between;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #f8fafc;
    color:#0f172a !important;
    font-weight: 600;
    letter-spacing:.01em;
        border-radius: 0;

  }
  .top-menu > .dropdown > .topmenu:active{ transform: translateY(1px); }

  /* The full-screen dropdown panel you already have – add subtle edge + safe area */
  .top-menu .dropdown > .dropMenu{
    border-radius: 0;
    border-top: 1px solid #e5e7eb;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* Optional: fixed CTA at bottom of the menu */
  .top-menu::after{
    content:"";
    position:fixed; left:0; right:0; bottom:0; height:84px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 60%);
    pointer-events:none;   /* visual fade */
  }
  .top-menu .fbutt{
    position: fixed; left: 16px; right: 16px; bottom: 16px;
    display: inline-flex; align-items:center; justify-content:center;
    padding: .9rem 1.2rem !important; border-radius: 999px !important;
    font-weight:700; background: linear-gradient(90deg,#1e3a8a,#253fad);
  }
  .clients-grid section{
    margin-bottom:1rem !important;
  }
}
/* ===== Mobile main menu polish (does NOT affect desktop) ===== */
@media (max-width: 768px){

  .top-menu.open{ display: block; }
.topmenu{
  margin-top:0.7rem;
}
  /* Header: logo left, close right */
  .menu-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 6px 0 12px;
  }
  .dropdown .menu-logo{ letter-spacing:.2px;color:white !important; font-family:'Merriweather' !important;font-size:1.2rem !important;}
  .menu-logo i{
    color:var(--text-300) !important;
  }
  .top-menu .closeNav, .cm1 .closeNav, .cm2 .closeNav{
    appearance:none; background:none; border:0; color:#fff; font-size:26px; line-height:1;
  }

  /* Subtle divider line */
  .menu-divider{ height:1px; background: rgb(168 168 168 / 25%); margin: 10px 0 14px;padding:0 !important; display: block;}
#login2, #starttrial{
  display:none !important;
}
#getstartedmob{
  display:flex !important;
}
  /* Section label */
  .menu-label{
    font-weight: 400;
    color: rgb(157 157 161);
    margin:0 0.6rem !important;
    text-align: left;
    margin-bottom:1rem !important;
    display:block;
  }
  .menu-divider2{
    display:none !important;
  }
  .topmenu > i{
    color:transparent !important;
  }
.dropdown{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
  /* Top-level rows (both links and dropdown triggers) */
  .top-menu > .dropdown > .topmenu,
  .top-menu > a.topmenu{
    display:flex; align-items:center; justify-content:space-between;
    gap: 12px;
    padding: 14px 4px;
    font-size: 18px; line-height:1.2;
    background:transparent;
    font-weight:400;
text-decoration:none;
  }
  .dropMenu{
    background:#0a0f1c !important;
  }
  /* last row in a section can drop the border if you wrap sections */
  .top-menu > .dropdown:last-child > .topmenu,
  .top-menu > a.topmenu:last-child{ border-bottom-color: transparent; }

  /* Optional left icon spacing (if you include <i> or <svg> inside) */
  .top-menu > .dropdown > .topmenu i,
  .top-menu > a.topmenu i{ font-size:18px; opacity:.9; margin-right:10px; }

  /* Right chevron */
  .top-menu > .dropdown > .topmenu::after,
  .top-menu > a.topmenu::after{
    content:"";
    width: 8px; height: 14px; margin-left:auto; flex: 0 0 8px;
    background: no-repeat center / contain
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'><path d='M1.5 1.5L6.5 7L1.5 12.5' stroke='darkslateblue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    opacity:.95;
  }

  /* Tap feedback */
  .top-menu > .dropdown > .topmenu:active,
  .top-menu > a.topmenu:active{
    background: rgba(255,255,255,.06);
    border-radius: 12px;
  }

  /* Keep your dropdown panels hidden until opened; this only styles the main list */
  .top-menu .dropdown > .dropMenu{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  /* Optional: stop background page from scrolling while menu is open */
  body.menu-open{ overflow:hidden; }
  .gradient-text1, .gradient-text2{
    margin-left:1rem !important;
    font-size:1.3rem !important;
  }

  .dropMenu{
    margin-left:2em !important;
  }

}

  .dropMenu .gradient-text1, .dropMenu .gradient-text2{
    margin-bottom:0.4rem !important;
  }/* Link block */

  :root{
  --ink:#111827;
  --muted:#6b7280;
  --accent:#34258a;
}

/* ===== Base (works with your existing .feature-link grid) ===== */
.feature-link{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 6px 12px;
  align-items: center;
  padding: 14px 0 18px;
  color: var(--ink);
  text-decoration: none;
  transition: transform .22s ease, filter .22s ease;
}

/* Title / sub */
.feature-link .feature-title{
  grid-column:1; grid-row:1;
  font-weight:700;
}
.feature-link .feature-sub{
  grid-column:1; grid-row:2;
  margin:0;
  color:#333;                 /* ← requested subtext color */
  line-height:normal;
  font-size:1rem;
}

/* Icon badge (right) */
.feature-link .feature-icon{
  grid-column:2; grid-row:1 / span 2;
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  color:var(--accent);
  outline:1px solid rgba(17,24,39,.14);

  /* ensure pseudo-elements sit behind the glyph */
  position:relative;
  z-index:0;             /* create stacking context */
  isolation:isolate;     /* keep negative z-index behind only this element */
  line-height:1;
  transition: transform .22s ease, outline-color .22s ease;
}

/* Divider line (animated) */
.feature-link::after{
  content:"";
  grid-column:1 / -1;
  height:1px;
  margin-top:14px;
  background:linear-gradient(90deg, rgba(17,24,39,.14), rgba(17,24,39,0));
  transform-origin:left center;
  transform:scaleX(.35);
  opacity:.55;
  transition:transform .35s ease, opacity .35s ease;
}

/* ===== Hover / focus micro-interactions ===== */
.feature-link:hover,
.feature-link:focus-visible{
  transform:translateY(-2px);
}
.feature-link:hover::after,
.feature-link:focus-visible::after{
  transform:scaleX(1);
  opacity:1;
}

/* Soft aura behind the icon */
.feature-link .feature-icon::before{
  position:absolute; border-radius:inherit;
  opacity:0.8;
  transition:opacity .25s ease, transform .25s ease;
  z-index:-1;                 /* ← behind icon */
  pointer-events:none;
}

/* Animated conic ring on the icon */
.feature-link .feature-icon::after{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit;
  background: conic-gradient(from 0turn,
              var(--accent) 0 14deg, transparent 14deg 360deg);
  /* thin ring */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity:0; transition:opacity .25s ease;
  z-index:-1;             /* ← behind icon */
  pointer-events:none;
}

@keyframes spin{ to{ transform:rotate(1turn); } }

.feature-link:hover .feature-icon,
.feature-link:focus-visible .feature-icon{
  outline-color: rgba(17,24,39,.26);
}
.feature-link:hover .feature-icon::before,
.feature-link:focus-visible .feature-icon::before{
  transform:scale(1.1);
  color:#241e96 !important;
}
.feature-link:hover .feature-icon::after,
.feature-link:focus-visible .feature-icon::after{
  opacity:.7; animation: spin 1.6s linear infinite;
}

/* Fallback if CSS masks aren’t supported: remove ring, add inset stroke */
@supports not ((-webkit-mask: radial-gradient(black, transparent)) or (mask: radial-gradient(black, transparent))){
  .feature-link .feature-icon::after{ content:none; }
  .feature-link .feature-icon{ box-shadow: inset 0 0 0 2px currentColor; }
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .feature-link,
  .feature-link .feature-icon,
  .feature-link::after{ transition:none; }
  .feature-link .feature-icon::after{ animation:none; }
}




  @media screen and (min-width: 992px) {
  .top-menu .dropdown:hover > .dropMenu{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(var(--x-translate, -50%)) translateY(0) !important;
    transition-delay: 0s !important;
    pointer-events: auto !important;
  }
}