button:is(.cta-p, .cta-s, .cta-t){
  --width:auto;
  --height:48px;
  user-select:none;
  cursor:pointer;
  width:var(--width);
  height:var(--height);
  padding:0 calc(var(--height)/4);
  border-radius:0;
  box-sizing:border-box;
}

button:is(.cta-p, .cta-s, .cta-t):disabled{
  filter:grayscale(1);
}

button:is(.cta-p){
  border:0;
}

button:is(.cta-s){
  border-width:1px;
  background-color:transparent;
}

button:is(.cta-t){
  border:0;
  background-color:transparent;
}




div.input-box-1{
  --height:48px;
  --height-2:20px;
  --border-width:1px;
  --border-color:gray;
  --error-color:red;
  --transition:all 350ms ease-in-out;
  width:256px;
  position:relative;
}

div.input-box-1 > input{
  height:var(--height);
  width:100%;
  padding:0 calc(var(--height)/4);
  font-size:16px;
  background-color:transparent;
  border:var(--border-width) solid var(--border-color);
  box-sizing:border-box;
  transition:var(--transition);
}

div.input-box-1 > input::placeholder{
  opacity:0;
}

div.input-box-1 > input + label{
  user-select:none;
  cursor:text;
  line-height:calc(var(--height) - var(--border-width));
  opacity:0.6;
  position:absolute;
  top:0;
  left:calc(var(--height)/4);
  transition:var(--transition);
}

div.input-box-1 > input:focus{
  border-color:black;
  background-color:white;
}

div.input-box-1 > input:not(:placeholder-shown) + label{
  line-height:var(--height-2);
  opacity:1;
  font-size:12px;
  left:0;
  top:calc(-1 * var(--height-2));
}

div.input-box-1 > span{
  display:block;
  height:0;
  font-size:12px;
  line-height:var(--height-2);
  color:var(--error-color);
  overflow:hidden;
  transition:var(--transition);
}

div.input-box-1.error > input{
  border-color:var(--error-color);
}

div.input-box-1.error > span{
  display:block;
  height:var(--height-2);
}