/* Responsive sizing for the AI employee interview / profile entry screen */
:root{--doctor-panel-max:1240px}
.childJoin{padding:clamp(16px,2.2vw,34px)!important;align-items:center!important;justify-items:center!important;place-items:center!important}
.childJoin .joinPanel{
  width:min(92vw,var(--doctor-panel-max))!important;
  max-width:var(--doctor-panel-max)!important;
  min-width:0!important;
  padding:clamp(26px,2.8vw,44px)!important;
  border-radius:clamp(24px,2.2vw,38px)!important;
  box-shadow:0 24px 70px rgba(19,73,124,.14)!important;
  transform:none!important;
  zoom:1!important;
}
.childJoin .heroBrand{margin-bottom:clamp(6px,1vw,12px)}
.childJoin .brandLogo{width:clamp(110px,10vw,160px)!important;height:auto!important}
.childJoin .joinMascot{height:clamp(300px,36vh,470px)!important;overflow:hidden!important;display:flex!important;align-items:flex-end!important;justify-content:center!important}
.childJoin .joinMascot .agenMascot{height:100%!important;width:clamp(240px,26vw,390px)!important;max-width:100%!important;object-fit:cover!important;object-position:right center!important;display:block!important;margin:0 auto!important;transform:none!important}
.childJoin .joinPanel h1{font-size:clamp(34px,3.1vw,50px)!important;line-height:1.16!important;margin-bottom:12px!important}
.childJoin .joinPanel p{font-size:clamp(16px,1.35vw,20px)!important;line-height:1.65!important}
.childJoin .joinPanel>div[style*="grid-template-columns:1fr 1fr"]{max-width:900px!important;width:88%!important;gap:20px!important}
.childJoin #profileName,.childJoin #profileGrade{height:66px!important;font-size:clamp(19px,1.5vw,23px)!important}
.childJoin #profileStart{min-height:66px!important;font-size:clamp(19px,1.6vw,23px)!important;padding:15px 34px!important;min-width:min(80%,520px)!important}

/* Standard desktop and large notebook */
@media (min-width:1100px){
  :root{--doctor-panel-max:1240px}
  .childJoin .joinPanel{width:min(84vw,1240px)!important;max-width:1240px!important}
  .childJoin .joinMascot{height:min(38vh,470px)!important}
}

/* Very wide / presentation displays */
@media (min-width:1500px){
  :root{--doctor-panel-max:1320px}
  .childJoin .joinPanel{width:min(82vw,1320px)!important;max-width:1320px!important;padding:46px 58px!important}
  .childJoin .joinMascot{height:min(40vh,500px)!important}
  .childJoin .joinMascot .agenMascot{width:390px!important}
  .childJoin .joinPanel h1{font-size:52px!important}
  .childJoin .joinPanel p{font-size:20px!important}
}

/* iPad landscape / smaller notebooks */
@media (min-width:768px) and (max-width:1099px){
  :root{--doctor-panel-max:940px}
  .childJoin .joinPanel{width:92vw!important;max-width:940px!important;padding:30px!important}
  .childJoin .joinMascot{height:clamp(270px,30vh,360px)!important}
  .childJoin .joinMascot .agenMascot{width:300px!important}
  .childJoin .joinPanel h1{font-size:36px!important}
}

/* iPad portrait / large phones */
@media (min-width:560px) and (max-width:767px){
  .childJoin .joinPanel{width:94vw!important;max-width:720px!important;padding:24px!important}
  .childJoin .joinMascot{height:270px!important}
  .childJoin .joinMascot .agenMascot{height:100%!important;width:230px!important}
  .childJoin .joinPanel>div[style*="grid-template-columns:1fr 1fr"]{width:100%!important}
}

/* iPhone / narrow mobile */
@media (max-width:559px){
  .childJoin{padding:10px!important;place-items:start center!important}
  .childJoin .joinPanel{width:calc(100vw - 20px)!important;max-width:none!important;padding:18px 14px 20px!important;border-radius:24px!important;margin:8px auto!important}
  .childJoin .brandLogo{width:92px!important}
  .childJoin .joinMascot{height:210px!important}
  .childJoin .joinMascot .agenMascot{height:100%!important;width:180px!important}
  .childJoin .joinPanel h1{font-size:27px!important;line-height:1.2!important}
  .childJoin .joinPanel p{font-size:13px!important}
  .childJoin .joinPanel>div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:12px!important;margin:14px auto!important;width:100%!important}
  .childJoin #profileName,.childJoin #profileGrade{height:54px!important;font-size:17px!important}
  .childJoin #profileStart{width:100%!important;min-width:0!important;min-height:56px!important;font-size:17px!important}
}