@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Cormorant+Garamond:ital,wght@1,300&display=swap');

.circa-hero{
  background:#ececf0;
  min-height:100vh;
}

.circa-hero__inner{
  max-width:1100px;
  margin:0 auto;
  padding:120px 20px;
  text-align:left;
}

.circa-hero__line{
  font-family:'Lato', sans-serif;
  font-size:clamp(40px,5vw,80px);
  line-height:1.14;
  color:#3a3a44;
  margin-bottom:24px;
}

.circa-chat__msg--assistant{
  font-family:'Lato', sans-serif;
  color:#3a3a44;
}

.circa-chat__msg--user{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:300;
  color:#446879;
}

.circa-chat__input{
  border:none;
  outline:none;
  background:transparent;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(40px,5vw,80px);
  line-height:1.14;
  color:#446879;
  width:100%;
  resize:none;
}
/* Prevent intro "pop" — only when JS is active */
html.circa-js .circa-hero__line {
  opacity: 0;
  transform: translateY(12px);
}

/* Your existing .is-anim animation should bring it in.
   If you DON'T already have this, keep this block too. */
.circa-hero__line.is-anim {
  animation: circaInSoft 450ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.circa-caret {
  pointer-events: none;
}
/* Put the caret INSIDE the input row, and align the textarea text start */
.circa-input-row {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.circa-caret {
  width: 12px;            /* tweak if needed */
  margin-right: 0;
  pointer-events: none;
  user-select: none;
}

.circa-chat__input {
  padding-left: 0;        /* important: don't double-indent */
  margin-left: 0;
}