.wa-hero-demo .phone{position:relative;width:328px;background:#101216;border-radius:46px;padding:12px;z-index:2;
  box-shadow:0 40px 90px rgba(14,15,51,.30),0 12px 30px rgba(14,15,51,.18)}
.wa-hero-demo .phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);
  width:102px;height:24px;background:#101216;border-radius:14px;z-index:12}
.wa-hero-demo .screen{background:#EFEAE2;border-radius:36px;overflow:hidden;height:596px;display:flex;flex-direction:column;position:relative}
.wa-hero-demo .sbar{display:flex;justify-content:space-between;align-items:flex-end;padding:14px 24px 6px;color:#fff;
  font:600 12px/1 inherit;background:#008069}
.wa-hero-demo .sbar .sic{display:flex;gap:5px;align-items:center}
.wa-hero-demo .whead{display:flex;align-items:center;gap:10px;background:#008069;color:#fff;padding:8px 12px 10px}
.wa-hero-demo .whead .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#4888f8,#315feb);
  display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.wa-hero-demo .whead .nm{font-weight:700;font-size:14px;line-height:1.25}
.wa-hero-demo .whead .st{font-size:10.5px;opacity:.85}
.wa-hero-demo .whead .acts{margin-left:auto;display:flex;gap:16px;opacity:.95}
.wa-hero-demo .chat{flex:1;overflow-y:auto;padding:12px 10px 14px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.wa-hero-demo .chat::-webkit-scrollbar{display:none}
.wa-hero-demo .chip-day{align-self:center;background:#fff;color:#54656F;font-size:10.5px;font-weight:600;
  padding:4px 10px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-hero-demo .chip-enc{align-self:center;background:#FFF3C7;color:#5C5C17;font-size:10px;padding:4px 10px;border-radius:8px;
  text-align:center;max-width:90%;line-height:1.45;box-shadow:0 1px .5px rgba(11,20,26,.08)}
.wa-hero-demo .msg{max-width:82%;padding:6px 9px 16px;border-radius:9px;font-size:13px;line-height:1.5;position:relative;
  box-shadow:0 1px .5px rgba(11,20,26,.13);animation:wa-chat-enter .44s cubic-bezier(.16,1,.3,1) both;overflow-wrap:anywhere}
/* Messages settle along the screen's own axes without rotating or scaling the text. */
@keyframes wa-chat-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wa-hero-demo .msg.in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.wa-hero-demo .msg.out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:2px}
.wa-hero-demo .msg .meta{position:absolute;right:9px;bottom:4px;font-size:9.5px;color:#667781;display:flex;gap:3px;align-items:center}
.wa-hero-demo .msg.out .meta{color:#667781}
.wa-hero-demo .typing{background:#fff;border-radius:9px;border-top-left-radius:2px;align-self:flex-start;padding:11px 13px;
  display:flex;gap:4px;box-shadow:0 1px .5px rgba(11,20,26,.13);animation:wa-chat-enter .28s cubic-bezier(.16,1,.3,1) both}
.wa-hero-demo .typing i{width:7px;height:7px;border-radius:50%;background:#8696A0;animation:tp 1s infinite ease-in-out}
.wa-hero-demo .typing i:nth-child(2){animation-delay:.15s}.wa-hero-demo .typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}

.wa-hero-demo .msg.tpl{background:#fff;padding:0;overflow:hidden}
.wa-hero-demo .tpl-hd{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid #F0F0F0}
.wa-hero-demo .tpl-hd .ic{width:26px;height:26px;border-radius:7px;background:#315feb;color:#fff;display:grid;place-items:center;flex:none}
.wa-hero-demo .tpl-hd .bnm{font-size:12px;font-weight:700;color:#111;line-height:1.3}
.wa-hero-demo .tpl-hd .bnm small{display:block;font-weight:400;color:#8696A0;font-size:9.5px}
.wa-hero-demo .tpl-bd{padding:9px 10px 20px;font-size:13px;color:#111;position:relative;line-height:1.55}
.wa-hero-demo .tpl-btns{border-top:1px solid #F0F0F0}
.wa-hero-demo .tpl-btn{display:block;width:100%;text-align:center;padding:10px 0;color:#008069;font-weight:700;font-size:12.5px;
  background:none;border:none;border-bottom:1px solid #F0F0F0;cursor:pointer;transition:background .14s ease}
.wa-hero-demo .tpl-btn:last-child{border-bottom:none}
.wa-hero-demo .tpl-btn:hover{background:#F5F6F6}

.wa-hero-demo .winput{display:flex;align-items:center;gap:8px;padding:8px 10px 14px;background:#EFEAE2}
.wa-hero-demo .winput .box{flex:1;background:#fff;border-radius:20px;padding:9px 14px;font-size:12.5px;color:#8696A0;
  display:flex;justify-content:space-between;align-items:center;min-height:38px}
.wa-hero-demo .winput .box .in-ic{display:flex;gap:10px;color:#54656F}
.wa-hero-demo .winput .mic{width:38px;height:38px;border-radius:50%;background:#008069;color:#fff;display:grid;place-items:center;flex:none}

.wa-hero-demo .flow-layer{position:absolute;inset:0;background:#fff;z-index:11;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.wa-hero-demo .flow-layer.open{transform:none}
.wa-hero-demo .flow-bar{background:#008069;color:#fff;padding:40px 14px 14px;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:10px}
.wa-hero-demo .flow-body{flex:1;overflow-y:auto;padding:20px 16px}
.wa-hero-demo .flow-body .q{font-weight:800;font-size:15px;margin-bottom:4px;color:#111}
.wa-hero-demo .flow-body .h{color:#667781;font-size:12px;margin-bottom:14px}
.wa-hero-demo .fopt{width:100%;text-align:left;border:1.5px solid #E9EDEF;border-radius:12px;padding:13px 14px;margin-bottom:9px;
  display:flex;gap:10px;align-items:center;cursor:pointer;transition:border-color .15s ease,background .15s ease;
  font-size:13.5px;color:#111;background:#fff;font-family:inherit;min-height:50px}
.wa-hero-demo .fopt:hover{border-color:#00A5F4}
.wa-hero-demo .fopt.sel{border-color:#008069;background:rgba(0,128,105,.05)}
.wa-hero-demo .fopt i{width:20px;height:20px;border:1.5px solid #CBD5DC;border-radius:50%;flex:none}
.wa-hero-demo .fopt.sel i{border-color:#008069;background:radial-gradient(circle,#008069 48%,transparent 53%)}
.wa-hero-demo .fnext{margin:12px 16px 18px;background:#008069;color:#fff;text-align:center;border-radius:12px;padding:14px;
  font-weight:700;font-size:14.5px;cursor:pointer;border:none;font-family:inherit;transition:background .15s ease}
.wa-hero-demo .fnext:hover{background:#067A61}
.wa-hero-demo .fdone{text-align:center;padding:44px 20px;color:#008069}
.wa-hero-demo .fdone .ck{width:64px;height:64px;border-radius:50%;background:#D9FDD3;margin:0 auto 16px;display:grid;place-items:center}
.wa-hero-demo .fdone b{display:block;font-size:16px;color:#111}
.wa-hero-demo .fdone p{color:#667781;font-size:12.5px;margin-top:6px}

/* A layered product scene, contained entirely within the shared hero column. */
.wa-hero-demo {
  --wa-accent: var(--blue-text);
  --wa-muted: var(--muted);
  position: relative;
  isolation: isolate;
  width: min(100%, 630px);
  height: 636px;
  justify-self: center;
  align-self: center;
  color: var(--ink-deep);
  font-family: inherit;
}

.wa-hero-demo__backdrop {
  position: absolute;
  inset: 64px 0 auto auto;
  width: min(85%, 510px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue-soft);
  pointer-events: none;
}

/* One planar rotation keeps the frame, screen, text and controls on the same axes. */
.wa-hero-demo .phone {
  position: absolute;
  top: 24px;
  right: 52px;
  width: 300px;
  padding: 9px;
  border: 2px solid #53575e;
  border-radius: 42px;
  background: #15171b;
  transform: rotate(6deg);
  box-shadow: 16px 30px 40px rgb(20 33 61 / 20%), 2px 6px 12px rgb(20 33 61 / 12%);
}

.wa-hero-demo .phone::before {
  width: 84px;
  height: 21px;
  top: 18px;
}

.wa-hero-demo .screen { height: 550px; border-radius: 31px; color: #111b21; }
.wa-hero-demo .sbar { height: 36px; min-height: 36px; align-items: center; padding: 10px 17px 5px; font-family: inherit; font-weight: 600; font-size: 11px; line-height: 1.2; }
.wa-hero-demo .sbar .sic { gap: 3px; }
.wa-hero-demo .sbar .sic svg { max-width: 15px; height: 9px; }
.wa-hero-demo .whead { gap: 7px; padding: 8px 10px 11px; min-height: 59px; }
.wa-hero-demo .whead > .av { width: 28px; height: 28px; font-size: 13px; background: #fff; color: var(--blue-text); }
.wa-hero-demo .whead > .av + div { min-width: 0; flex: 1; }
.wa-hero-demo .whead .nm { font-size: 12px; line-height: 1.4; white-space: nowrap; }
.wa-hero-demo .whead .st { font-size: 10px; line-height: 1.3; }
.wa-hero-demo .whead .acts { flex: none; gap: 6px; margin-left: 0; }
.wa-hero-demo .whead .acts svg { width: 14px; height: 14px; }
.wa-hero-demo .whead .acts svg:first-child { display: none; }
.wa-hero-demo .msg { max-width: 88%; flex-shrink: 0; font-size: 14px; }
.wa-hero-demo .tpl-bd { font-size: 14px; }
.wa-hero-demo .chat { scroll-behavior: smooth; }
.wa-hero-demo .chip-day { flex-shrink: 0; }

.wa-hero-demo__controls {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 128px;
  display: flex;
  flex-direction: column;
  width: 192px;
  gap: 24px;
}

.wa-hero-demo .demo-tabs {
  display: grid;
  width: 100%;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.wa-hero-demo .demo-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  grid-template-rows: 40px 34px;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 122px;
  padding: 20px 16px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--ink-deep);
  box-shadow: 0 12px 28px rgb(20 33 61 / 10%);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, translate .25s ease;
}

.wa-hero-demo .demo-tabs button:nth-child(2) { margin-left: -12px; }
.wa-hero-demo .demo-tabs button:nth-child(3) { margin-left: 12px; }
.wa-hero-demo .demo-tabs__icon { width: 24px; height: 24px; color: var(--wa-accent); }
.wa-hero-demo .demo-tabs__title { font-size: 14px; line-height: 1.4; font-weight: 650; }
.wa-hero-demo .demo-tabs__description { grid-column: 1 / -1; align-self: start; font-size: 11px; line-height: 1.5; color: var(--wa-muted); }
.wa-hero-demo .demo-tabs__arrow { grid-column: 3; grid-row: 1; width: 16px; height: 16px; color: var(--wa-accent); }
.wa-hero-demo .demo-tabs button[aria-selected="true"] { background: var(--wa-accent); color: #fff; }
.wa-hero-demo .demo-tabs button[aria-selected="true"] :is(.demo-tabs__icon, .demo-tabs__arrow, .demo-tabs__description) { color: #fff; }
.wa-hero-demo .demo-tabs button:hover { translate: 0 -3px; }
.wa-hero-demo .demo-tabs button:not([aria-selected="true"]):hover { background: #edf3ff; }
.wa-hero-demo__hint { position: absolute; bottom: calc(100% + 12px); left: 0; width: 100%; margin: 0; color: var(--wa-muted); font-size: 11px; line-height: 1.5; }
.wa-hero-demo__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wa-hero-demo__autoplay { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--wa-accent); font: inherit; font-size: 12px; cursor: pointer; }
.wa-hero-demo__autoplay:hover { background: #edf3ff; }
.wa-hero-demo[data-autoplay="true"] .wa-hero-demo__play-icon,
.wa-hero-demo[data-autoplay="false"] .wa-hero-demo__pause-icon { display: none; }
.wa-hero-demo.is-paused :is(.msg, .typing, .typing i) { animation-play-state: paused; }
.wa-hero-demo button:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 4px; }

.wa-hero-demo .replay {
  display: flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wa-accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wa-hero-demo .replay:hover { background: #edf3ff; color: var(--wa-accent); }

@media (min-width: 1121px) and (max-width: 1320px) {
  .wa-hero-demo .phone { right: 40px; width: 280px; }
  .wa-hero-demo__controls { width: 178px; left: 0; }
  .wa-hero-demo .demo-tabs button { column-gap: 8px; padding-inline: 12px; }
}

@media (min-width: 1121px) and (max-width: 1200px) {
  .wa-hero-demo .phone { right: 16px; }
  .wa-hero-demo__controls { width: 164px; left: -8px; }
  .wa-hero-demo .demo-tabs__title { font-size: 13px; }
}

@media (min-width: 1121px) and (max-height: 800px) {
  .wa-hero-demo { height: 592px; }
  .wa-hero-demo .screen { height: 506px; }
  .wa-hero-demo__backdrop { width: min(85%, 470px); }
  .wa-hero-demo__controls { top: 104px; }
}

@media (max-width: 1120px) {
  .wa-hero-demo { margin-inline: auto; }
}

@media (max-width: 620px) {
  .wa-hero-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    height: auto;
    padding-top: 20px;
  }
  .wa-hero-demo__backdrop { top: 60px; right: 0; width: 100%; }
  .wa-hero-demo .phone { position: relative; top: auto; right: auto; width: min(280px, calc(100% - 48px)); transform: rotate(3deg); }
  .wa-hero-demo .screen { height: 526px; }
  .wa-hero-demo__controls { position: relative; top: auto; left: auto; width: 100%; }
  .wa-hero-demo__hint { position: static; width: 100%; text-align: center; }
  .wa-hero-demo__toolbar { justify-content: center; }
  .wa-hero-demo .demo-tabs { position: relative; top: auto; left: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .wa-hero-demo .demo-tabs button { grid-template-columns: minmax(0, 1fr); grid-template-rows: 24px 36px minmax(32px, auto); justify-items: center; gap: 8px; padding: 16px 8px; min-height: 140px; margin-left: 0; text-align: center; }
  .wa-hero-demo .demo-tabs button:nth-child(n) { margin-left: 0; translate: none; }
  .wa-hero-demo .demo-tabs__title { align-self: center; font-size: 12px; }
  .wa-hero-demo .demo-tabs__description { grid-column: 1; font-size: 10px; }
  .wa-hero-demo .demo-tabs__arrow { display: none; }
  .wa-hero-demo .replay { align-self: center; }
}

@media (max-width: 370px) {
  .wa-hero-demo .whead .nm { font-size: 11px; }
  .wa-hero-demo .whead .acts { gap: 3px; }
  .wa-hero-demo .whead .acts svg:nth-child(2) { display: none; }
  .wa-hero-demo .demo-tabs { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-hero-demo .chat { scroll-behavior: auto; }
  .wa-hero-demo :is(.msg, .typing, .typing i) { animation: none; }
  .wa-hero-demo .flow-layer,
  .wa-hero-demo .demo-tabs button { transition: none; }
}