@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./fonts/inter-variable.woff2") format("woff2");
}
:root { font-family: "Inter", Arial, sans-serif; }

.hero {
  display: block;
  min-height: 0;
  padding: 0;
  background: #fafbf9;
}

.hero-experience { position: relative; width: 100%; margin-inline: auto; }
.hero-experience[data-hero-scrub] { height: 235svh; }
.hero-desktop-stage {
  --build-chrome: var(--hero-chrome, 1);
  --build-sidebar: var(--hero-sidebar, 1);
  --build-main: var(--hero-main, 1);
  --build-composer: var(--hero-composer, 1);
  position: relative;
  isolation: isolate;
  padding: 46px 24px 60px;
}
[data-hero-scrub] .hero-desktop-stage {
  position: sticky;
  top: var(--site-header-height);
  height: calc(100svh - var(--site-header-height));
  padding: 0;
  overflow: clip;
}
.hero .hero-layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-inline: 24px;
  gap: 26px;
}
.hero h1 {
  font-size: clamp(52px, 5.2vw, 88px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 550;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.hero h1 em { color: #078367; }

.hero .hero-layout > * { animation: none; }
.hero-title-line { display: block; animation: flow-title-enter .95s cubic-bezier(.16, 1, .3, 1) .10s both; }
.hero-title-line:nth-child(2) { animation-delay: .23s; }
.hero-availability { animation: flow-detail-enter .7s cubic-bezier(.16, 1, .3, 1) .34s both; }
.hero-platform:nth-child(2) { animation: flow-detail-enter .7s cubic-bezier(.16, 1, .3, 1) .43s both; }
.hero-platform:nth-child(3) { animation: flow-detail-enter .7s cubic-bezier(.16, 1, .3, 1) .52s both; }

@keyframes flow-title-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flow-detail-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes flow-window-enter {
  from { opacity: 0; translate: 0 32px; }
  to { opacity: 1; translate: 0 0; }
}
.hero-platforms { animation: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.hero-availability { font-size: 16px; font-weight: 450; color: #43564a; margin-right: 3px; }
.hero-platform { display: inline-flex; align-items: center; gap: 10px; color: #203d2e; font-size: 18px; font-weight: 550; padding: 11px 17px; border: 1px solid #b9cbc0; border-radius: 9px; background: #fff; }
.hero-platform svg { width: 21px; height: 21px; fill: #087456; }
[data-hero-scrub] .hero-layout {
  position: relative;
  padding-top: clamp(32px, 5svh, 56px);
  opacity: var(--hero-intro-opacity, 1);
  transform: translateY(calc((1 - var(--hero-intro-opacity, 1)) * -24px));
  pointer-events: auto;
}
.hero-stage-scene { position: relative; width: 100%; margin: 38px auto 0; perspective: 2200px; }
.hero-desktop-shell {
  position: relative;
  width: min(100%, 1520px);
  margin-inline: auto;
  border: 1px solid #bbc8bf;
  border-radius: 13px;
  background: #181818;
  box-shadow: 0 26px 70px -30px #233d3038, 0 3px 8px #1c312710;
  transform-origin: 50% 0;
  animation: flow-window-enter 1.1s cubic-bezier(.16, 1, .3, 1) .62s both;
}
[data-hero-scrub] .hero-stage-scene { position: absolute; inset: 0; width: 100%; margin: 0; }
[data-hero-scrub] .hero-desktop-shell {
  position: absolute;
  top: 25px;
  left: 50%;
  width: min(calc(100% - 64px), 1520px);
  transform: translate3d(-50%, calc((var(--hero-intro-height, 280px) + 15px) * (1 - var(--hero-focus, 0))), 0) rotateX(calc((1 - var(--hero-focus, 0)) * 9deg)) scale(calc(.95 + var(--hero-focus, 0) * .05));
  transform-style: preserve-3d;
}
.hero-desktop-frame { position: relative; height: clamp(460px, calc(100svh - 122px), 850px); overflow: hidden; border-radius: 12px; background: #181818; container-type: inline-size; }
.hero-interface-chrome { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; clip-path: inset(0 80.4% 0 0); pointer-events: none; }
.hero-demo-modes {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 19.6%;
  right: 0;
  display: flex;
  justify-content: center;
  color: #c9cec9;
  font-size: clamp(11px, 1vw, 14px);
}
.hero-demo-modes > * { min-width: clamp(66px, 7.1vw, 113px); padding: 8px 10px; background: #242424; text-align: center; }
.hero-demo-modes > :first-child { border-radius: 999px 0 0 999px; }
.hero-demo-modes > :last-child { border-radius: 0 999px 999px 0; color: #cceadd; text-decoration: none; }
.hero-demo-modes > [aria-current] { background: #353535; color: white; }
.hero-demo-modes a:hover { background: #2b473b; }
.hero-playground {
  position: absolute;
  inset: 14% 0 0 24.4%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #181818;
  color: #e8eae7;
  font-size: clamp(12px, 1.1vw, 15px);
  text-align: left;
  opacity: calc(.86 + var(--build-main) * .14);
  transform: translateY(calc((1 - var(--build-main)) * 5px));
}

.hero-playground[data-step="2"] { grid-template-columns: minmax(0, 1fr) minmax(140px, .65fr); }
.hero-task-space { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 4% 7% 6%; }
.hero-task-content { min-height: 0; overflow: auto; scrollbar-width: thin; display: grid; gap: 12px; }
.hero-task-greeting { text-align: center; font-size: clamp(16px, 1.9vw, 26px); letter-spacing: -.03em; font-weight: 550; margin-bottom: 5px; }
.hero-demo-message { justify-self: end; max-width: 88%; padding: 8px 11px; border-radius: 10px 10px 3px 10px; background: #30332f; font-size: .95em; line-height: 1.5; overflow-wrap: anywhere; }
.hero-playground[data-step="0"] .hero-demo-message { display: none; }
.hero-playground:not([data-step="0"]) .hero-task-greeting { display: none; }
.hero-demo-answer { line-height: 1.6; }
.hero-demo-answer > strong { font-size: 1em; font-weight: 560; }
.hero-demo-answer ol { margin: 8px 0 0; padding-left: 18px; color: #b7c3b9; font-size: .92em; }
.hero-demo-answer li { padding-block: 2px; }
.hero-agent-label { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-size: .8em; color: #c4d4c8; }
.hero-demo-form { flex-shrink: 0; border: 1px solid #373e35; border-radius: 12px; padding: 11px 12px 8px; background: #222520; opacity: calc(.84 + var(--build-composer) * .16); transform: translateY(calc((1 - var(--build-composer)) * 4px)); }
.hero-input-label { display: block; color: #a1bea9; font-size: 10px; margin-bottom: 5px; }
.hero-demo-form textarea { display: block; resize: none; width: 100%; min-height: 38px; border: 0; outline: 0; padding: 0; background: transparent; font: inherit; font-size: .95em; line-height: 1.5; color: #ecf0e9; }
.hero-demo-form:focus-within { border-color: #73ac88; box-shadow: 0 0 0 1px #73ac8838; }
.hero-composer-tools { display: flex; align-items: center; gap: 12px; font-size: .8em; color: #b4c2b6; padding-top: 7px; }
.hero-composer-tools small { font-size: 1em; margin-left: 6px; color: #a5b7a8; }
.hero-composer-tools button { display: grid; place-items: center; margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #c9e5d3; color: #173b24; font-size: 18px; }

.hero-demo-browser { border-left: 1px solid #394338; min-width: 0; background: #20271f; overflow: auto; }
.hero-demo-browser > div:first-child { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid #394338; font-size: 11px; color: #c3d3c4; }
.hero-demo-browser button { padding: 0 3px; border: 0; background: transparent; color: inherit; font-size: 19px; }
.hero-browser-address { font-size: 9px; color: #a9c0ad; padding: 8px 11px; background: #293227; }
.hero-reference-page { margin: 9px; padding: 14px 11px; background: #edf2e8; color: #283c2a; min-height: 65%; }
.hero-reference-tag { font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.hero-reference-page h3 { font-weight: 550; letter-spacing: -.04em; font-size: clamp(15px, 1.5vw, 21px); line-height: 1.2; margin: 12px 0; }
.hero-reference-image { display: flex; align-items: center; justify-content: center; gap: 7px; height: 60px; background: #d5e4cc; overflow: hidden; }
.hero-reference-image span { width: 25px; height: 80px; background: #a4c89b; border: 1px solid #93ba8a; border-radius: 50%; transform: rotate(35deg); }
.hero-reference-image span:nth-child(2) { background: #e5eedb; transform: rotate(-25deg); }
.hero-reference-page ul { padding-left: 13px; font-size: 9px; line-height: 1.8; margin-top: 11px; }


.hero-playground { inset: 61px 0 0 19.6%; font-size: clamp(13px, 1.1vw, 16px); opacity: 1; }
.hero-task-space { padding: 3% 8% 5%; gap: 22px; }
.hero-task-greeting { font-size: clamp(24px, 2.6vw, 38px); font-weight: 520; }
.hero-demo-form { border-radius: 17px; padding: 17px 18px 12px; background: #222321; border-color: #343632; }
.hero-demo-form textarea { min-height: 49px; font-size: 1em; }
.hero-input-wrap { position: relative; }
.hero-input-mirror { min-height: 49px; font-size: 1em; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: transparent; pointer-events: none; }
.hero-typing-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 2px; background: #c9e5d3; vertical-align: -.14em; animation: hero-caret-blink 1.1s step-end infinite; }
.hero-demo-form .hero-input-wrap textarea { position: absolute; inset: 0; height: 100%; min-height: 0; overflow: hidden; caret-color: #c9e5d3; overflow-wrap: anywhere; }
.hero-input-wrap[data-typing="editing"] .hero-typing-caret { visibility: hidden; animation: none; }
@keyframes hero-caret-blink { 0%, 48%, 100% { opacity: 1; } 49%, 99% { opacity: 0; } }
.hero-input-label { font-size: 11px; }
.hero-composer-tools { padding-top: 12px; gap: 13px; }
.hero-composer-tools .hero-reference-toggle { margin-left: auto; width: 26px; background: transparent; color: #b4c2b6; }
.hero-reference-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hero-composer-tools button[type=submit] { width: 33px; height: 33px; margin-left: 0; }
.hero-floating-note { position: absolute; z-index: 3; width: 208px; padding: 16px 18px; border: 1px solid #dae5dd; border-radius: 13px; background: #f9fcfa; box-shadow: 0 14px 35px -18px #214d382e; text-align: left; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .55s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.hero-floating-note[data-visible] { opacity: 1; transform: translateY(0); }
.hero-note-agent { display: flex; align-items: center; gap: 8px; color: #207448; font-size: 12px; font-weight: 580; }
.hero-note-copy { color: #5b7061; font-size: 13px; line-height: 1.55; margin-top: 11px; }
[data-hero-balloon="1"], [data-hero-balloon="2"] { right: clamp(32px, 4vw, 64px); bottom: 46px; }

.hero-demo-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 1600px) { [data-hero-scrub] .hero-desktop-shell { width: calc(100% - 112px); max-width: 1720px; } }
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(48px, 6.2vw, 64px); }
  [data-hero-scrub] .hero-desktop-shell { width: calc(100% - 32px); }
  .hero-task-space { padding: 4% 5%; }
  .hero-floating-note { width: 178px; padding: 13px; }
}
@media (max-width: 660px) {
  .hero-desktop-stage { padding: 39px 16px 34px; }
  .hero .hero-layout { padding: 0; gap: 20px; }
  .hero h1 { font-size: clamp(37px, 10.4vw, 55px); line-height: 1.1; letter-spacing: -.035em; }
  .hero-platforms { gap: 12px; }
  .hero-availability { flex-basis: 100%; font-size: 14px; margin-right: 0; }
  .hero-platform { padding: 10px 14px; font-size: 16px; }
  .hero-platform svg { width: 18px; height: 18px; }
  .hero-stage-scene { margin-top: 32px; }
  .hero-desktop-frame { height: 395px; }
  .hero-interface-chrome { width: 740px; max-width: none; clip-path: inset(0 calc(740px - 25px) 0 0); }
  .hero-demo-modes { top: 9px; left: 25px; }
  .hero-demo-modes > * { min-width: 0; padding: 8px 6px; }
  .hero-playground { inset: 54px 0 0 25px; font-size: 12px; }
  .hero-task-space { padding: 15px 11px; gap: 15px; }
  .hero-task-greeting { font-size: 19px; }
  .hero-demo-form { padding: 11px; border-radius: 12px; }
  .hero-demo-form textarea { min-height: 56px; }
  .hero-input-mirror { min-height: 56px; }
  .hero-input-label { font-size: 10px; }
  .hero-composer-tools { gap: 7px; font-size: 9px; }
  .hero-composer-tools small { margin-left: 3px; }
  .hero-composer-tools button[type=submit] { width: 25px; height: 25px; }
  .hero-demo-message { padding: 7px 9px; }
  .hero-demo-answer { line-height: 1.45; }
  .hero-agent-label { font-size: 10px; }
  .hero-floating-note { display: none; }
  .hero-playground[data-step="2"] { grid-template-columns: minmax(0, 1fr); }
  .hero-playground[data-step="2"] .hero-task-space { display: none; }
  .hero-demo-browser { border-left: 0; }
  .hero-reference-page { min-height: 0; }
}
@media (prefers-reduced-motion: reduce), (max-height: 619px) {
  .hero-floating-note { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-typing-caret { animation: none; }
  .hero-title-line, .hero-availability, .hero-platform:nth-child(2), .hero-platform:nth-child(3), .hero-desktop-shell { animation: none; }
}

/* The opening conversation replaces the visible headline. */
.hero .hero-semantic-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero .hero-layout { gap: 25px; }
.hero .hero-layout > .hero-conversation { animation: flow-detail-enter .95s cubic-bezier(.16,1,.3,1) .12s both; }
.hero-conversation { width: min(100%, 980px); padding: 28px 30px 20px; margin: 0; border: 1px solid #3a3f39; border-radius: 24px; background: #222321; box-shadow: 0 18px 45px -30px #142d2533; color: #edf0eb; text-align: left; transition: border-color .4s ease, box-shadow .4s ease; }
.hero-conversation:focus-within { border-color: #69917d; box-shadow: 0 0 0 3px #0b835818, 0 18px 45px -30px #142d2533; }
.hero-composer-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero-conversation .hero-input-wrap { font-size: clamp(27px, 3.1vw, 43px); line-height: 1.28; letter-spacing: -.035em; font-weight: 450; }
.hero-conversation .hero-input-mirror { min-height: 112px; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.hero-conversation textarea { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; min-height: 0; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; overflow-wrap: anywhere; caret-color: #bfe2cd; }
.hero-conversation-tools { display: flex; align-items: center; gap: 18px; margin-top: 20px; color: #d9e1da; }
.hero-conversation-add { font-size: 25px; color: #929c94; }
.hero-conversation-agent { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; }
.hero-conversation-agent img { width: 19px; height: 19px; }
.hero-conversation-agent small { margin-left: 6px; color: #aab5ad; font-size: 13px; font-weight: 450; }
.hero-conversation-tools button { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; padding: 9px; border: 1px solid #6c8475; border-radius: 50%; background: #c9e5d3; color: #254331; transition: background .3s ease, transform .3s ease; }
.hero-conversation-tools button:hover { background: #e4f3e8; transform: translateY(-2px); }
.hero-conversation-tools button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 660px) {
  .hero-conversation { padding: 23px 20px 17px; border-radius: 20px; }
  .hero-conversation .hero-input-wrap { font-size: clamp(23px, 6.1vw, 32px); line-height: 1.32; }
  .hero-conversation .hero-input-mirror { min-height: 128px; }
  .hero-conversation-tools { gap: 12px; margin-top: 17px; }
  .hero-conversation-agent { font-size: 12px; gap: 6px; }
  .hero-conversation-agent small { margin-left: 2px; font-size: 11px; }
  .hero-conversation-agent img { width: 16px; height: 16px; }
  .hero-conversation-tools button { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-layout > .hero-conversation { animation: none; }
  .hero-conversation, .hero-conversation-tools button { transition: none; }
}