.hero-typewriter { position: relative; display: inline-flex; align-items: center; min-height: 56px; padding: 12px 16px; border-radius: 12px; background: #f5f7fb; box-shadow: 0 2px 10px rgba(0,0,0,.06) inset, 0 1px 0 rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.06); }
.hero-typewriter::after { content: var(--cursor, '|'); margin-left: 2px; animation: blink 1s steps(2, start) infinite; opacity: .9; }
.hero-typewriter .hero-typewriter__text { font: 500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; white-space: pre; }
.hero-typewriter.is-fading .hero-typewriter__text { opacity: 0; transition: opacity .24s linear; }
.hero-typewriter:not(.is-fading) .hero-typewriter__text { opacity: 1; transition: opacity .24s linear; }
@keyframes blink { 50% { opacity: 0; } }

/* Board preset visuals */
.hero-typewriter-wrap.preset-board { width: 100%; }
.hero-board{
  background: #0e2435; border-radius: 16px; padding: clamp(20px, 4vw, 48px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35) inset, 0 8px 40px rgba(0,0,0,.25);
}
.hero-card{
  position: relative; max-width: 720px; margin: 0 auto; padding: 18px; border-radius: 14px;
  background: linear-gradient(#e8f1fb, #d9e8f8);
  box-shadow: none; /* match staging */
  border: 1px solid rgba(0,0,0,.08);
}
.hero-card .hero-typewriter{
  display: block; width: 100%; min-height: 72px; padding: 12px 14px; border-radius: 10px;
  background: #D2E8F9; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.hero-btn{
  margin-top: 8px; padding: 10px 18px; font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  border-radius: 999px; border: 0; background: #051344; color: #fff; box-shadow: 0 6px 12px rgba(0,0,0,.25); cursor: pointer;
}
.hero-btn:focus{ outline: 2px solid #7fb4ff; outline-offset: 2px; }
.hero-btn:hover{ filter: brightness(1.05); }

/* Mobile drift keyframes (used by hero-gradient.js) */
@keyframes gradientFloat { 0%{ transform:translate3d(0,0,0) scale(1);} 100%{ transform:translate3d(14px,10px,0) scale(1.02);} }

/* Height preservation + wrapping (audited) – scoped to new layouts only */
.ht-layout-light .hero-typewriter,
.ht-layout-advanced .hero-typewriter{
  position: relative;
  display: block;
  padding: 16px 20px;
  min-height: auto;
}
.ht-layout-light .hero-typewriter::after,
.ht-layout-advanced .hero-typewriter::after{ display:none; }

.ht-layout-light .hero-typewriter .hero-typewriter__text,
.ht-layout-advanced .hero-typewriter .hero-typewriter__text{
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: absolute; top:0; left:0; right:56px; /* leave room for arrow */
}
.ht-layout-light .hero-typewriter .hero-typewriter__text::after,
.ht-layout-advanced .hero-typewriter .hero-typewriter__text::after{
  content: var(--cursor, '|');
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
  opacity: .9;
}
.ht-layout-light .hero-typewriter .ht-ghost,
.ht-layout-advanced .hero-typewriter .ht-ghost{
  visibility: hidden;
  display: block;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0;
}

/* New: Layout + Theme scaffolding */
.hero-typewriter-wrap{ width:100%; max-width:100%; }
.ht-layout-advanced, .ht-layout-light, .ht-layout-simple{ width:100%; }
.ht-theme-light .ht-input, .ht-theme-light .hero-typewriter{ background:#fff; }

/* Light/Advanced question box */
.ht-advanced .ht-input, .ht-layout-light .ht-input{
  width:100%;
  display:flex; align-items:flex-start;
  padding:16px; gap:16px;
  min-height: 80px;
  border-radius:8px; border:1px solid #299FB1; background:#fff; box-sizing:border-box;
  position: relative; /* anchor inner send icon */
  padding-right: 56px; /* reserve space for arrow */
  box-shadow: 29px 37px 13px 0 rgba(153, 193, 92, 0.00), 19px 24px 12px 0 rgba(153, 193, 92, 0.01), 10px 13px 10px 0 rgba(153, 193, 92, 0.03), 5px 6px 8px 0 rgba(153, 193, 92, 0.06), 1px 1px 4px 0 rgba(153, 193, 92, 0.07);
}
.ht-advanced .hero-typewriter, .ht-layout-light .hero-typewriter{ display:block; padding:0; min-height:auto; border:none; box-shadow:none; background:transparent; position:relative; }
/* keep typed text at top inside the box */
.ht-advanced .hero-typewriter .hero-typewriter__text, .ht-layout-light .hero-typewriter .hero-typewriter__text{ color:#051344; font: 400 14px/20px Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* CTA arrow placeholder (can be turned into a link by theme code if desired) */
.ht-advanced .ht-input::after,
.ht-layout-light .ht-input::after{
  content:''; width:24px; height:24px; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3.24862 2.25C2.42319 1.85572 1.51634 2.61 1.75205 3.49372L3.48005 9.95058C3.52336 10.1129 3.61338 10.2588 3.73895 10.3704C3.86452 10.4819 4.02009 10.5541 4.18634 10.578L12.6583 11.7883C12.9035 11.8226 12.9035 12.1774 12.6583 12.2126L4.18719 13.422C4.02094 13.4459 3.86537 13.5181 3.73981 13.6296C3.61424 13.7412 3.52421 13.8872 3.48091 14.0494L1.75205 20.5097C1.51634 21.3926 2.42319 22.1469 3.24862 21.7534L21.6755 12.9686C22.4889 12.5811 22.4889 11.4223 21.6755 11.034L3.24862 2.25Z' fill='url(%23paint0_linear_0_3444)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_0_3444' x1='1.71411' y1='12.0015' x2='22.2856' y2='12.0015' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233AB8CB'/%3E%3Cstop offset='0.66' stop-color='%234FC08B'/%3E%3Cstop offset='1' stop-color='%23B7D325'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat center/contain;
  pointer-events: none; /* let clicks hit .ht-send */
}

/* Cosmetic send arrow (non-interactive, matches ::after visual) */
.ht-advanced .ht-input .ht-send,
.ht-layout-light .ht-input .ht-send{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; display:inline-block; border:0; padding:0; background:transparent; pointer-events:none; z-index:2;
}

/* Suggestions row */
.ht-advanced .ht-suggestions,
.ht-layout-light .ht-suggestions{ width:100%; display:flex; gap:0px; align-items:center; margin-top:16px; }
.ht-advanced .ht-pill,
.ht-layout-light .ht-pill{ height:32px; padding:8px; gap:4px; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; box-sizing:border-box; text-decoration:none; transition:background-color 0.2s ease; }
.ht-advanced .ht-pill:hover,
.ht-layout-light .ht-pill:hover{ background:#E1FFFE; }
.ht-advanced .ht-pill:active,
.ht-layout-light .ht-pill:active{ background:#ACF3F4; }
.ht-advanced .ht-pill span,
.ht-layout-light .ht-pill span{ font: 400 12px/18px Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#505862; white-space:nowrap; }
.ht-advanced .ht-icon,
.ht-layout-light .ht-icon{ width:20px; height:20px; display:inline-block; margin-right:4px; background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.58916 4.54002C8.0875 3.08169 10.1025 3.03752 10.6933 4.40752L10.7433 4.54085L11.4158 6.50752C11.5699 6.95855 11.819 7.37128 12.1462 7.71787C12.4734 8.06447 12.8711 8.33686 13.3125 8.51669L13.4933 8.58419L15.46 9.25585C16.9183 9.75419 16.9625 11.7692 15.5933 12.36L15.46 12.41L13.4933 13.0825C13.0421 13.2365 12.6293 13.4855 12.2825 13.8127C11.9358 14.1399 11.6632 14.5377 11.4833 14.9792L11.4158 15.1592L10.7442 17.1267C10.2458 18.585 8.23083 18.6292 7.64083 17.26L7.58916 17.1267L6.9175 15.16C6.76348 14.7088 6.51447 14.2959 6.18728 13.9492C5.86009 13.6025 5.46232 13.3299 5.02083 13.15L4.84083 13.0825L2.87416 12.4109C1.415 11.9125 1.37083 9.89752 2.74083 9.30752L2.87416 9.25585L4.84083 8.58419C5.29186 8.43007 5.70459 8.18102 6.05118 7.85383C6.39778 7.52664 6.67017 7.12893 6.85 6.68752L6.9175 6.50752L7.58916 4.54002ZM15.8333 1.66669C15.9892 1.66669 16.142 1.71042 16.2743 1.79291C16.4066 1.87541 16.5131 1.99336 16.5817 2.13335L16.6217 2.23085L16.9133 3.08585L17.7692 3.37752C17.9254 3.4306 18.0624 3.52887 18.1627 3.65987C18.263 3.79087 18.3222 3.9487 18.3327 4.11337C18.3433 4.27804 18.3047 4.44213 18.2218 4.58484C18.139 4.72756 18.0157 4.84247 17.8675 4.91502L17.7692 4.95502L16.9142 5.24669L16.6225 6.10252C16.5693 6.25871 16.471 6.3956 16.3399 6.49585C16.2089 6.59609 16.051 6.65518 15.8864 6.66562C15.7217 6.67606 15.5576 6.63739 15.415 6.5545C15.2723 6.47161 15.1575 6.34824 15.085 6.20002L15.045 6.10252L14.7533 5.24752L13.8975 4.95585C13.7413 4.90277 13.6043 4.80451 13.504 4.67351C13.4036 4.54251 13.3445 4.38467 13.3339 4.22C13.3234 4.05533 13.362 3.89124 13.4448 3.74853C13.5276 3.60582 13.651 3.4909 13.7992 3.41835L13.8975 3.37835L14.7525 3.08669L15.0442 2.23085C15.1004 2.06621 15.2067 1.92328 15.3482 1.8221C15.4897 1.72093 15.6594 1.66658 15.8333 1.66669Z' fill='url(%23paint0_linear_1_279)' fill-opacity='0.5'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1_279' x1='0.991472' y1='5.1386' x2='20.1356' y2='18.6098' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23299FB1'/%3E%3Cstop offset='0.55' stop-color='%234FC08B'/%3E%3Cstop offset='1' stop-color='%23B7D325'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat center/contain; }
.ht-advanced .ht-divider,
.ht-layout-light .ht-divider{ width:24px; height:1px; background:#EEEFF1; transform:rotate(270deg); flex:0 0 24px; }

/* Theme: dark (existing visuals remain) */
.ht-theme-dark .hero-typewriter-wrap{}

/* Board preset typography to match staging */
.preset-board .hero-typewriter{
  position: relative;
  /* ensure text and ghost share the same metrics */
  font: 500 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #505965;
}
.preset-board .hero-typewriter .hero-typewriter__text{
  display:block;
  white-space: normal;
  position: absolute;
  top: 16px; left: 14px; right: 14px;
}

/* Board preset height reservation */
.preset-board .hero-typewriter .ht-ghost{
  visibility:hidden;
  display:block; /* reserve height */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.preset-board .hero-typewriter .ht-ghost-extra{
  visibility:hidden;
  display:block; /* adds one extra line of height */
  white-space: normal;
}

/* Cursor should follow the text content */
.preset-board .hero-typewriter::after{ display:none; }
.preset-board .hero-typewriter .hero-typewriter__text::after{
  content: var(--cursor, '|');
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
  opacity: .9;
}

/* Simple layout typography and flow (legacy visual target) */
.ht-layout-simple .hero-typewriter{ display:block; min-height:auto; }
.ht-layout-simple .hero-typewriter .hero-typewriter__text{
  display:block;
  white-space: normal; /* collapse spaces for multi-line flow */
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px; /* 1.6 */
  color: #505965; /* text body */
}