/* K-129: kylix.in design and motion pass. Linked from app/layout.tsx ONLY when MarketConfig.site.showcase is true, so the US site never loads it.
   Plain CSS (no build step). Brand tokens come from globals.css (--k-*); WhatsApp's own colours are scoped to .kx-* (--wa-*).
   Motion rules: every animation plays once (the short typing-dot loop only runs while the indicator is visible), is gated by `.is-on`/`.is-playing`
   state set from JS after the section is in view, and is switched off under prefers-reduced-motion (finished state shown instead). */

.kx-phone, .kx-lsw, .kx-nudge, .kx-pills, .kx-chips, .kx-track, .kx-count, .kx-trust__chips {
  --wa-teal: #008069; --wa-green: #25d366; --wa-out: #d9fdd3; --wa-in: #ffffff; --wa-wall: #efeae2; --wa-ink: #111b21; --wa-meta: #667781; --wa-read: #53bdeb; --wa-btn: #00a884;
  font-family: var(--font-inter), system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
}

@keyframes kx-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kx-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes kx-swap { from { opacity: 0; } to { opacity: 1; } }
@keyframes kx-tap { from { background: #fff; transform: none; } 40% { transform: scale(.95); } to { background: var(--wa-out); transform: none; } }
@keyframes kx-prog { from { width: 0; } to { width: 100%; } }

/* ---------- phone frame ---------- */
.kx-phone { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 360px; border-radius: 28px; overflow: hidden; background: var(--wa-wall); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5), 0 0 0 1px rgba(17,27,33,.12); color: var(--wa-ink); text-align: left; }
.kx-phone__bar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px; background: var(--wa-teal); color: #fff; }
.kx-phone__avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--wa-teal); font-weight: 700; font-size: 15px; }
.kx-phone__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.kx-phone__who b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kx-phone__who small { font-size: 12px; opacity: .85; }
.kx-phone__body { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; height: var(--kx-body-h, 300px); padding: 10px 10px 8px; overflow: hidden; }
.kx-phone__foot { display: flex; justify-content: center; align-items: center; min-height: 52px; padding: 6px 10px; background: #f0f2f5; }
.kx-phone__input { flex: 1; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--wa-meta); font-size: 14px; }

/* ---------- bubbles ---------- */
.kx-b { position: relative; max-width: 88%; padding: 6px 9px 5px; border-radius: 10px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 0 rgba(11,20,26,.13); overflow-wrap: anywhere; }
.kx-b--in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 2px; }
.kx-b--out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 2px; }
.kx-b__txt { display: block; }
.kx-b__meta { display: inline-flex; align-items: center; gap: 3px; float: right; margin: 3px 0 -3px 10px; font-size: 11px; line-height: 1; color: var(--wa-meta); }
.kx-ticks { color: #8696a0; transition: color .4s ease; }
.kx-ticks.is-read { color: var(--wa-read); }
.kx-step { display: none; }
.kx-step.is-on { display: flex; flex-direction: column; animation: kx-in .4s ease both; animation-delay: var(--ad, 0ms); }
.kx-typing { display: none; align-self: flex-start; gap: 4px; padding: 10px 12px; border-radius: 10px; border-top-left-radius: 2px; background: #fff; box-shadow: 0 1px 0 rgba(11,20,26,.13); }
.kx-typing.is-on { display: inline-flex; animation: kx-in .25s ease both; }
.kx-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: kx-dot 1s ease-in-out infinite; }
.kx-typing i:nth-child(2) { animation-delay: .15s; } .kx-typing i:nth-child(3) { animation-delay: .3s; }
.kx-swap { display: block; animation: kx-swap .4s ease both; }
.kx-pop { animation: kx-in .35s ease both; }

/* bubble extras: product cards, pincode check, quick replies, payment card */
.kx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; clear: both; }
.kx-cards.is-closed { display: none; }
.kx-card { display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: 8px; background: #f0f2f5; font-size: 12.5px; line-height: 1.25; }
.kx-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; margin-bottom: 5px; }
.kx-card b { font-weight: 600; } .kx-card small { color: var(--wa-meta); font-size: 11.5px; } .kx-card i { font-style: normal; font-weight: 600; margin-top: 2px; }
.kx-card__btn, .kx-quick__btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; margin-top: 6px; padding: 0 10px; border-radius: 8px; background: #fff; color: var(--wa-btn); font-size: 13px; font-weight: 600; box-shadow: 0 1px 0 rgba(11,20,26,.13); transition: background .2s, transform .2s; }
.kx-card__btn.is-tap, .kx-quick__btn.is-tap { background: var(--wa-out); transform: scale(.96); }
.kx-ok { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 8px; border-radius: 8px; background: #e7f8ee; color: #0a6b3a; font-size: 13px; font-weight: 600; }
.kx-quick { display: flex; gap: 6px; margin-top: 6px; }
.kx-quick__btn { flex: 1; min-width: 64px; white-space: nowrap; margin-top: 0; background: #f0f2f5; box-shadow: none; }
.kx-pay { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; min-width: 190px; }
.kx-pay b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.kx-pay__st { flex-basis: auto; }
.kx-pay__st { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 5px 12px; border-radius: 8px; background: var(--wa-btn); color: #fff; font-size: 13px; font-weight: 600; transition: background .3s; }
.kx-pay__st.is-paid { background: #e7f8ee; color: #0a6b3a; }
.kx-tpl { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--wa-meta); }

.kx-replay { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--wa-teal); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kx-replay:hover { background: #006b58; }
.kx-replay--ink { background: transparent; color: var(--k-ink); border: 1px solid var(--k-line-strong); min-height: 36px; }
.kx-replay--ink:hover { background: #f4f4f1; }
:where(.kx-replay, .kx-chip, .kx-ctl, .kx-lsw__btn, .kx-lsw__item, .kx-nudge button, .kx-pills button, .kx-slot__btn, .kx-tipbtn):focus-visible { outline: 2px solid #15803d; outline-offset: 2px; }

/* ---------- hero (#1, #6) ---------- */
.k-hero2.kx-hero { --kx-body-h: 608px; }
.kx-hero__chat { display: flex; flex-direction: column; width: 100%; max-width: 380px; }
@media (min-width: 900px) {
  .kx-hero__chat { justify-self: end; align-self: center; } .k-hero2.kx-hero { --kx-body-h: 500px; }
  /* desktop: a real chat, the newest message sits at the bottom and older ones scroll up and out */
  .kx-phone--hero .kx-phone__body { justify-content: flex-end; }
}
.kx-phone--hero { max-width: 380px; }
@media (max-width: 899px) {
  /* the phone is tall on mobile so the whole exchange is visible: the hero grows past one screen instead of clipping it */
  .k-hero2.kx-hero { height: auto; max-height: none; min-height: 0; }
  .k-hero2.kx-hero .k-hero2__inner { height: auto; gap: 24px; padding-bottom: 28px; }
  .k-hero2.kx-hero .k-hero2__sub { -webkit-line-clamp: 4; }
  .kx-hero__chat { margin-inline: auto; }
}
.kx-hero__chips { width: 100%; max-width: 380px; margin-inline: auto; }
@media (min-width: 900px) {
  /* language story beside the headline, not under the phone: copy and chips in the left column, phone spans both rows on the right */
  .k-hero2.kx-hero .kx-hero__inner { grid-template-rows: auto 1fr; }
  .kx-hero__inner .k-hero2__copy { grid-column: 1; grid-row: 1; }
  .kx-hero__inner .kx-hero__chat { grid-column: 2; grid-row: 1 / span 2; }
  .kx-hero__inner .kx-hero__chips { grid-column: 1; grid-row: 2; align-self: start; margin: 18px 0 0; max-width: 520px; }
}
.kx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (min-width: 900px) { .kx-hero__chips .kx-chips { margin-top: 0; } }
.kx-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(14,16,15,.5); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .25s, color .25s; backdrop-filter: blur(6px); }
.kx-chip.is-on { background: #fff; color: #111318; border-color: #fff; }
.kx-chips__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* ---------- trust strip (#7) ---------- */
.kx-trust__lead { margin: 0 0 12px; text-align: center; font-size: 14px; color: var(--k-muted); }
.kx-trust__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kx-trust__chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--k-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: var(--k-ink); }
.kx-trust__chips svg { color: var(--k-green); }

/* ---------- "Apni bhasha mein" (addendum #2) ---------- */
.kx-lang { --kx-body-h: 230px; }
.kx-lang__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .kx-lang__grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 380px); gap: 64px; } .kx-lang__stage { justify-self: end; width: 100%; } }
.kx-lang__more { margin: 12px 0 0; color: var(--k-body); font-size: 15px; line-height: 1.5; max-width: 52ch; }
.kx-lang__stage .kx-phone { margin-inline: auto; background: var(--wa-wall); }
.kx-lang__turn { display: flex; flex-direction: column; gap: 6px; }
.kx-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.kx-pill { display: inline-flex; align-items: center; border: 1px solid var(--k-line-strong); border-radius: 999px; background: #fff; color: var(--k-muted); font-size: 15px; line-height: 1; }
.kx-pill > span, .kx-pill > button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; background: none; color: inherit; font: inherit; border-radius: 999px; }
.kx-pill > button { cursor: pointer; }
.kx-pill i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #b8b6ad; }
.kx-pill i.is-live { background: var(--wa-green, #25d366); border-color: var(--wa-green, #25d366); }
.kx-pill.is-live { color: var(--k-ink); }
.kx-pill.is-cur { border-color: var(--k-ink); box-shadow: 0 0 0 1px var(--k-ink); }
.kx-lang__note { margin: 12px 0 0; font-size: 13.5px; color: var(--k-muted); }

/* ---------- "Sab kuch WhatsApp pe" stage strip (#2) ---------- */
.kx-stage { overflow: hidden; }
.kx-stage__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.kx-ctl { flex: none; min-height: 40px; padding: 0 16px; border: 1px solid var(--k-line-strong); border-radius: 999px; background: #fff; color: var(--k-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.kx-track { display: flex; gap: 14px; margin: 0 calc(var(--k-gutter) * -1); padding: 6px var(--k-gutter) 10px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kx-track::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .kx-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 6px 0 10px; overflow: visible; } }
.kx-slot { flex: 0 0 188px; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: center; cursor: pointer; opacity: .55; transition: opacity .35s ease, transform .35s ease; }
@media (min-width: 1100px) { .kx-slot { flex: none; } }
.kx-slot.is-active { opacity: 1; transform: translateY(-4px); }
.kx-slot .kx-phone { --kx-body-h: 232px; border-radius: 22px; box-shadow: 0 18px 36px -22px rgba(17,27,33,.55), 0 0 0 1px rgba(17,27,33,.1); }
.kx-slot .kx-phone__bar { height: 40px; padding: 0 10px; } .kx-slot .kx-phone__avatar { width: 26px; height: 26px; font-size: 12px; } .kx-slot .kx-phone__who b { font-size: 13px; }
.kx-slot .kx-phone__body { padding: 8px 8px 6px; }
.kx-slot .kx-b { font-size: 12px; padding: 5px 7px 4px; }
.kx-slot .kx-b__meta { font-size: 10px; }
.kx-slot .kx-quick__btn { min-height: 28px; font-size: 12px; margin-top: 0; }
.kx-slot .kx-ok { font-size: 12px; }
.kx-slot__btn { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--k-ink); cursor: pointer; }
.kx-slot__name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.kx-slot__line { font-size: 13px; line-height: 1.4; color: var(--k-body); }
.kx-bar { display: block; height: 3px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.kx-bar i { display: block; width: 0; height: 100%; background: #25d366; }
.kx-bar i.is-full { width: 100%; }
.kx-bar i.is-run { animation: kx-prog 4.2s linear forwards; }
.kx-mini { display: flex; flex-direction: column; gap: 6px; }
.kx-mini .kx-m { animation: none; }
.kx-phone--mini.is-playing .kx-m { animation: kx-in .45s ease both; animation-delay: var(--d, 0s); }
.kx-phone--mini.is-playing .kx-tapbtn { animation: kx-in .45s ease both, kx-tap .5s ease both; animation-delay: var(--d, 0s), calc(var(--d, 0s) + .7s); }
.kx-tapbtn { background: var(--wa-out) !important; }
.kx-mp { display: flex; align-items: center; gap: 8px; } .kx-mp img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.kx-mp span { display: flex; flex-direction: column; line-height: 1.25; } .kx-mp i { font-style: normal; font-weight: 600; }
.kx-mc { display: flex; justify-content: space-between; gap: 10px; } .kx-mc b { white-space: nowrap; } .kx-mc--tot { margin-top: 4px; padding-top: 4px; border-top: 1px solid #e9edef; font-weight: 600; }
.kx-steps { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.kx-steps span { display: flex; align-items: center; gap: 5px; color: #0a6b3a; font-weight: 600; }
.kx-join { align-self: center; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 4px 10px; border-radius: 8px; background: #fff5c4; color: #54656f; font-size: 11.5px; }

/* ---------- broadcast scene (#3) ---------- */
.kx-bc { --kx-body-h: 256px; }
.kx-bc__head { max-width: 640px; margin-bottom: 28px; }
.kx-bc__phones { display: flex; gap: 14px; margin: 0 calc(var(--k-gutter) * -1); padding: 6px var(--k-gutter) 14px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.kx-bc__phones::-webkit-scrollbar { display: none; }
.kx-bc__phones > li { flex: 0 0 min(78vw, 280px); scroll-snap-align: center; }
@media (min-width: 900px) {
  .kx-bc__phones { justify-content: center; align-items: flex-end; gap: 28px; margin: 0 0 20px; padding: 14px 0 22px; overflow: visible; }
  .kx-bc__phones > li { flex: 0 0 280px; }
  .kx-bc__phones > li:nth-child(1) { transform: rotate(-3deg) translateY(10px); }
  .kx-bc__phones > li:nth-child(3) { transform: rotate(3deg) translateY(10px); }
  .kx-bc { --kx-body-h: 256px; }
}
.kx-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .kx-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kx-count { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--k-line); border-radius: 14px; background: #fff; opacity: .5; transition: opacity .4s ease, border-color .4s ease; }
.kx-count.is-on { opacity: 1; border-color: #25d366; }
@media (max-width: 639px) { .kx-count.is-last:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.kx-count__n { font-size: clamp(1.3rem, 5vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--k-ink); min-height: 1.25em; }
.kx-count__l { font-size: 13px; color: var(--k-muted); }
.kx-bc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; min-height: 40px; }
.kx-bc__foot small { font-size: 13px; color: var(--k-muted); }

/* ---------- rupee counters (#4) ---------- */
.kx-rupee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 4px; min-height: 2.6rem; font-variant-numeric: tabular-nums; }
.kx-rupee b { font-size: clamp(1.9rem, 7vw, 2.4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.kx-rupee > span { font-size: 14px; opacity: .85; }
.kx-rupee__n { display: inline-grid; white-space: nowrap; } .kx-rupee__n > span { grid-area: 1 / 1; } .kx-rupee__ghost { visibility: hidden; }

/* ---------- header language switcher + nudge ---------- */
.kx-lsw { position: relative; }
.kx-lsw__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--k-line-strong); border-radius: 999px; background: transparent; color: var(--k-ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.kx-lsw__btn:hover { background: rgba(17,24,39,.04); }
.kx-lsw__chev { transition: transform .15s; }
.kx-lsw__menu { position: absolute; z-index: 80; right: 0; top: calc(100% + 8px); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 340px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--k-line); border-radius: 16px; background: #fff; box-shadow: 0 24px 48px -20px rgba(17,24,39,.35); }
.kx-lsw__item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--k-ink); font: inherit; text-align: left; cursor: pointer; }
.kx-lsw__item:hover { background: #f4f4f1; }
.kx-lsw__item.is-cur { background: var(--k-green-soft); box-shadow: inset 0 0 0 1px var(--k-green-line); }
.kx-lsw__native { font-size: 16px; font-weight: 600; line-height: 1.3; }
.kx-lsw__item small { font-size: 12px; color: var(--k-muted); line-height: 1.2; }
.kx-lsw--sheet { margin: 4px 0 8px; }
.kx-lsw--compact .kx-lsw__btn { width: 40px; min-height: 40px; padding: 0; justify-content: center; background: var(--surface, #fff); }
.kx-lsw--compact .kx-lsw__menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
@media (max-width: 400px) { .nav-mobile .btn-sm { padding-inline: 12px; } .nav-mobile { gap: 6px; } }
.kx-lsw--sheet .kx-lsw__btn { width: 100%; justify-content: flex-start; min-height: 48px; padding: 0 16px; font-size: 16px; }
.kx-lsw--sheet .kx-lsw__chev { margin-left: auto; }
.kx-lsw--sheet .kx-lsw__menu { position: static; width: 100%; margin-top: 8px; box-shadow: none; background: #fff; }
.kx-nudge { border-bottom: 1px solid var(--k-green-line); background: #ecfdf3; font-family: var(--font-inter), system-ui, "Noto Sans", sans-serif; }
.kx-nudge__in { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.kx-nudge__q { font-size: 15px; font-weight: 600; color: var(--k-ink); margin-right: auto; }
.kx-nudge button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.kx-nudge__yes { background: var(--k-ink); color: #fff; }
.kx-nudge__no { background: transparent; color: var(--k-body); }

/* ---------- pricing cards (#5) ---------- */
.kx-gst { margin: 8px 0 0; font-size: 14px; color: var(--k-body); }
.kx-perday { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--k-green); }
.kx-trialline { margin: 10px 0 18px; font-size: 13px; font-weight: 500; color: var(--k-ink); }
.pc__list .kx-conv { position: relative; flex-wrap: nowrap; align-items: center; }
.pc__list .kx-conv > span { flex: 1; }
.kx-tipbtn { margin-left: auto; width: 24px; height: 24px; border: 1px solid var(--k-line-strong); border-radius: 50%; background: #fff; color: var(--k-muted); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; }
.kx-tip { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% - 4px); padding: 10px 12px; border-radius: 10px; background: var(--k-ink); color: #fff; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 28px -12px rgba(0,0,0,.5); }
.pc__list .kx-langline { color: var(--k-body); font-size: 13.5px; }

/* ---------- small page extras ---------- */
.kx-demo-intro { margin: 0 0 22px; }
.kx-demo-intro p { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.5; color: var(--k-body); }
.kx-phone--mini-chat { --kx-body-h: auto; max-width: 340px; }
.kx-phone--mini-chat .kx-phone__body { height: auto; padding-bottom: 12px; }
.kx-phone--mini-chat.is-flush { box-shadow: 0 0 0 1px rgba(17,27,33,.12); margin-top: 14px; }
.k-feature .kx-phone--mini-chat { margin-top: 16px; }
.kx-about-line { font-size: 1.15rem; font-weight: 500; color: var(--k-ink); }

/* ---------- reduced motion: show every finished state, animate nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  .kx-step.is-on, .kx-typing.is-on, .kx-pop, .kx-swap, .kx-phone--mini.is-playing .kx-m, .kx-phone--mini.is-playing .kx-tapbtn { animation: none !important; }
  .kx-typing i { animation: none; }
  .kx-bar i.is-run { animation: none; width: 100%; }
  .kx-slot, .kx-count, .kx-ticks, .kx-chip, .kx-card__btn, .kx-quick__btn, .kx-pay__st { transition: none; }
  .kx-slot { opacity: 1; transform: none; }
  .kx-count { opacity: 1; }
}

/* /features Languages card: copy left, phone right on wide screens (it is the only card in its row) */
@media (min-width: 900px) {
  .kx-feature-lang > .k-feature { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto; column-gap: 56px; align-content: center; align-items: start; }
  .kx-feature-lang > .k-feature > h3, .kx-feature-lang > .k-feature > p { grid-column: 1; }
  .kx-feature-lang > .k-feature > .kx-phone { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
.k-grid--2:has(.kx-phone--mini-chat) { align-items: start; }