/* Hero video (Jake, Fernhollow Landscaping) + "See it in action" section. */
.hx-vid{margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hx-vbox{position:relative;height:clamp(440px,calc(100svh - var(--hx-top,140px) - 90px),660px);aspect-ratio:9/16;border-radius:34px;overflow:hidden;background:#142E2D;border:10px solid #142E2D;box-shadow:0 24px 60px rgba(20,46,45,.22)}
.hx-vbox video{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px}
.hx-sound{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 16px;background:rgba(255,255,255,.94);color:#142E2D;font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);white-space:nowrap}
.hx-sound svg{width:18px;height:18px}
.hx-sound[hidden]{display:none}
.hx-vid figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--muted);text-align:center;max-width:34ch}
@media (max-width:900px){.hx-vbox{height:auto;width:min(78vw,340px)}}

#see-it-in-action{scroll-margin-top:88px}
.sia-wrap{max-width:1120px;margin:0 auto}
.sia-hint{text-align:center;font-size:13.5px;font-weight:600;color:var(--accent);margin:4px 0 10px}
.sia-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 26px}
.sia-tab{border:1.5px solid var(--border,#d8e3e2);background:#fff;color:var(--text);border-radius:999px;padding:9px 16px;font:600 14px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sia-tab:hover{border-color:var(--accent)}
.sia-tab.on{background:#142E2D;border-color:#142E2D;color:#fff}
.sia-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start;text-align:left}
.sia-step{display:flex;align-items:center;gap:10px;font:700 18px/1.2 Outfit,Inter,sans-serif;color:var(--text);margin-bottom:12px}
.sia-step span{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.sia-call{position:sticky;top:96px}
.sia-phone{background:#142E2D;color:#fff;border-radius:22px;padding:18px 20px 20px;text-align:center}
.sia-top{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:#a9cfcc}
.sia-dot{width:8px;height:8px;border-radius:50%;background:#34C759}
.sia-clock{font-variant-numeric:tabular-nums;color:#fff;font-weight:600}
.sia-biz{margin-top:12px;font:700 19px/1.2 Outfit,Inter,sans-serif}
.sia-sub{font-size:13px;color:#a9cfcc;margin-top:4px}
.sia-wave{display:flex;justify-content:center;align-items:center;gap:5px;height:30px;margin:12px 0 14px}
.sia-wave i{width:5px;height:8px;border-radius:3px;background:#8FD6CE;transition:height .2s}
.sia-wave.on i{animation:siawave 1s ease-in-out infinite}
.sia-wave.on i:nth-child(2){animation-delay:.15s}.sia-wave.on i:nth-child(3){animation-delay:.3s}.sia-wave.on i:nth-child(4){animation-delay:.45s}.sia-wave.on i:nth-child(5){animation-delay:.6s}
@keyframes siawave{0%,100%{height:8px}50%{height:28px}}
.sia-play{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:12px 20px;background:#378C8C;color:#fff;font:600 15px/1 Inter,system-ui,sans-serif;cursor:pointer}
.sia-play:hover{background:#2f7a7a}
.sia-play svg{width:18px;height:18px;fill:#fff}
.sia-play .st{display:none}.sia-play.playing .st{display:block}.sia-play.playing .pl{display:none}
.sia-play span{opacity:.75;font-weight:500}
.sia-tr{margin-top:12px;background:#fff;border:1px solid var(--border,#d8e3e2);border-radius:16px;padding:12px 14px;max-height:340px;overflow-y:auto}
.sia-ln{display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:10px;opacity:.55;transition:opacity .2s,background .2s}
.sia-ln .who{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.sia-ln.ai .who{color:var(--accent)}
.sia-ln .tx{font-size:14.5px;line-height:1.5;color:var(--text)}
.sia-ln.heard{opacity:1}
.sia-ln.on{opacity:1;background:var(--accent-soft,#e8f3f2)}
.sia-crm{margin:0}
.sia-live{text-align:center;margin-top:26px;font-size:15px;color:var(--muted)}
.sia-live a{color:var(--accent);font-weight:700}
@media (max-width:900px){.sia-grid{grid-template-columns:1fr}.sia-call{position:static}.sia-tr{max-height:none}}
.hx-vbox video{cursor:pointer}
.hx-vbox video:fullscreen{object-fit:contain;border-radius:0;background:#000}
.hx-vbox video:-webkit-full-screen{object-fit:contain;border-radius:0;background:#000}
.sia-dot--miss{background:#FF3B30}
.sia-play--txt{margin-top:14px}
.sia-sms{margin-top:12px;background:#fff;border:1px solid var(--border,#d8e3e2);border-radius:16px;overflow:hidden}
.sia-sms-hd{font-size:12px;font-weight:600;color:var(--muted);text-align:center;padding:10px;border-bottom:1px solid var(--border,#e5e7eb)}
.sia-sms-body{display:flex;flex-direction:column;gap:8px;padding:14px;max-height:400px;overflow-y:auto;min-height:200px}
.sia-bub{max-width:82%;padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.4}
.sia-bub.them{align-self:flex-start;background:#E9E9EB;color:#111;border-bottom-left-radius:5px}
.sia-bub.us{align-self:flex-end;background:#142E2D;color:#fff;border-bottom-right-radius:5px}
.sia-bub .lbl{display:block;font-size:11px;font-weight:600;color:#8FD6CE;margin-bottom:2px}
.sia-bub.in{animation:siain .25s ease}
@keyframes siain{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sia-bub.typing{display:inline-flex;gap:4px;padding:11px 14px}
.sia-bub.typing i{width:6px;height:6px;border-radius:50%;background:#9aa0a6;animation:siadot 1.2s infinite}
.sia-bub.us.typing i{background:#8FD6CE}
.sia-bub.typing i:nth-child(2){animation-delay:.2s}.sia-bub.typing i:nth-child(3){animation-delay:.4s}
@keyframes siadot{0%,80%,100%{opacity:.3}40%{opacity:1}}
.sia-step em{font-style:normal}
/* mobile-first: bigger tabs, readable CRM text */
.sia-tab{padding:12px 18px;min-height:44px}
@media (max-width:640px){
  .sia-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 16px 8px;margin:0 -16px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sia-tabs::-webkit-scrollbar{display:none}
  .sia-tab{flex:none}
  .sia-ln .who{font-size:12px}
  .sia-crm .src,.sia-crm .when,.sia-crm .crm-tag,.sia-crm h4,.sia-crm .crm-pipe .st,.sia-crm .crm-fields span,.sia-crm .meta,.sia-crm .crm-note,.sia-crm .crm-toast .tt span{font-size:12px !important}
  .sia-crm .crm-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Reserve the demo's space before see-it-in-action.js fills #sia, so the
   content below doesn't jump (layout shift). Heights measured 2026-10-12,
   set just under the rendered size at each width. */
#sia:empty{min-height:3280px}
@media (min-width:381px){#sia:empty{min-height:3060px}}
@media (min-width:413px){#sia:empty{min-height:2540px}}
@media (min-width:641px){#sia:empty{min-height:2440px}}
@media (min-width:901px){#sia:empty{min-height:1360px}}