/* Lexi's product illustration. All colors inherit the Varyan design tokens. */
.lx-hero { isolation: isolate; }
.lx-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 45%,var(--accent-glow),transparent 58%); }
.lx-hero-inner { padding-top: clamp(48px,6vw,80px); padding-bottom: clamp(48px,6vw,80px); }
.lx-hero-grid { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); grid-template-areas: "heading signal" "copy signal"; column-gap: 24px; align-items: start; }
.lx-hero-grid .h-page { grid-area: heading; font-size: clamp(52px,7.2vw,100px); max-width: 11ch; }
.lx-hero-grid .serif { letter-spacing: -.035em; word-spacing: .06em; }
.lx-hero-copy { grid-area: copy; display: block; margin-top: 28px; }
.lx-hero-copy p { max-width: 510px; }
.lx-hero-copy .btn-row { margin-top: 28px; }
.lx-stage { grid-area: signal; position: relative; align-self: center; width: 100%; aspect-ratio: 1; min-height: 340px; max-height: 540px; }
.lx-voicefield, .lx-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.lx-fallback { stroke: var(--accent); stroke-width: 1; opacity: .4; }
.lx-stage[data-ready] .lx-fallback { opacity: 0; }
.lx-channel { position: absolute; display: grid; place-items: center; width: clamp(56px,6.2vw,76px); aspect-ratio: 1; padding: 0; border: 1px solid var(--line-10); border-radius: 24px; background: var(--page-glass); color: var(--accent); box-shadow: 0 18px 44px -20px var(--lexi-shadow),inset 0 1px 0 var(--surface); cursor: pointer; transition: border-color .2s,background .2s,color .2s; }
.lx-channel:hover { border-color: var(--accent-edge); }
.lx-channel:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.lx-phone[aria-pressed="true"] { background: var(--accent); color: var(--white); border-color: var(--accent); }
.lx-greeting { margin: 20px 0 0; max-width: 740px; font-size: 14px; color: var(--muted); }
.lx-phone-control { position: absolute; top: 18%; left: 6%; z-index: 2; width: clamp(56px,6.2vw,76px); transform: translate(calc(var(--lx-x,0px) * -.6),calc(var(--lx-y,0px) * -.6)); }
.lx-caption { position: absolute; bottom: calc(100% + 14px); left: 0; width: 228px; margin: 0; padding: 11px 14px; border: 1px solid var(--line-12); border-radius: 16px 16px 16px 4px; background: var(--surface); color: var(--ink-2); box-shadow: 0 14px 30px -18px var(--lexi-shadow); font-size: 13px; line-height: 1.45; pointer-events: none; }
.lx-caption::after { content: ""; position: absolute; bottom: -6px; left: 23px; width: 10px; height: 10px; border-right: 1px solid var(--line-12); border-bottom: 1px solid var(--line-12); background: var(--surface); transform: rotate(45deg); }
.lx-channel svg { width: 48%; overflow: visible; }
.lx-phone-control .lx-phone { position: relative; width: 100%; transform: rotate(-10deg); }
.lx-chat { right: 2%; bottom: 11%; transform: translate(calc(var(--lx-x,0px) * .7),calc(var(--lx-y,0px) * .7)) rotate(8deg); }
.lx-ring { animation: lx-ring 3.6s ease-in-out infinite; transform-origin: 20px 14px; }
.lx-dot { fill: currentColor; stroke: none; animation: lx-type 2.4s ease-in-out infinite; }
.lx-dot:nth-of-type(2) { animation-delay: .18s; }
.lx-dot:nth-of-type(3) { animation-delay: .36s; }
@keyframes lx-ring { 0%,65%,100% { opacity: .35; transform: scale(.92); } 25%,45% { opacity: 1; transform: scale(1); } }
@keyframes lx-type { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 699.98px) {
  .lx-hero-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "heading" "signal" "copy"; column-gap: 0; }
  .lx-hero-grid .h-page { font-size: clamp(52px,10vw,70px); max-width: 13ch; }
  .lx-stage { width: min(100%,360px); min-height: 0; aspect-ratio: 1.14; justify-self: center; margin: 16px 0 4px; }
  .lx-hero-copy { margin-top: 8px; }
  .lx-channel { width: 58px; border-radius: 20px; }
  .lx-phone-control { top: 26%; left: 4%; width: 58px; }
  .lx-chat { right: 0; bottom: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-phone-control, .lx-phone-control .lx-phone, .lx-channel, .lx-ring, .lx-dot { animation: none; transform: none; }
}