/* Signed-out landing cartoon. Illustrative only: no account data. 12s loop, transform + opacity.
   Pauses offscreen (JS adds .is-paused). prefers-reduced-motion shows the three still panels. */
.tldemo{min-width:0;width:100%}
.tldemo-live .stage{display:flex;flex-direction:column;height:clamp(360px,86vw,480px);border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--surface)) 0%,var(--surface) 46%,color-mix(in srgb,var(--accent) 14%,var(--surface)) 100%);
  border:1px solid var(--border);box-shadow:var(--sh-2)}
.scene{position:relative;flex:1;min-height:0}
.tldemo-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tldemo-live .bg-pin{transform-box:fill-box;transform-origin:center bottom;animation:tdBob 3.2s ease-in-out infinite alternate}
.beat{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2vw,22px);padding:8px 10px 6px;opacity:0}
.tldemo-live{--loop:12s}
.tldemo-live .b1{animation:tdB1 var(--loop) linear infinite}
.tldemo-live .b2{animation:tdB2 var(--loop) linear infinite}
.tldemo-live .b3{animation:tdB3 var(--loop) linear infinite}
.tldemo-live .bob{animation:tdBob 2.8s ease-in-out infinite alternate;transform-origin:50% 100%}
.beat.show{opacity:1}
.actor{flex:none;display:flex;align-items:flex-end}
.who{width:clamp(100px,28vw,160px);height:auto;display:block}
[dir=rtl] .who{transform:scaleX(-1)}
.b3 .who{width:clamp(68px,16vw,108px)}

.phone{position:relative;flex:none;width:clamp(108px,30vw,168px);height:clamp(188px,50vw,276px);margin-bottom:4px;
  background:var(--surface);border:3px solid var(--border-strong);border-radius:26px;box-shadow:var(--sh-2);
  display:flex;flex-direction:column;padding:8px 8px 10px}
.notch{width:38%;height:7px;border-radius:6px;background:var(--border-strong);margin:2px auto 8px;flex:none}
.screen{flex:1;min-height:0;background:var(--surface-inset);border-radius:14px;display:flex;flex-direction:column;gap:7px;padding:8px}
.shead{display:flex;align-items:center;gap:6px}
.mpin{width:16px;height:16px;flex:none;display:block}
.ylines{display:flex;flex-direction:column;gap:5px;flex:1}
.ylines i{display:block;height:7px;border-radius:5px;background:var(--border-strong);opacity:.85}
.ylines i:nth-child(2){width:78%}.ylines i:nth-child(3){width:52%}
.miniphoto{height:46px;border-radius:10px;overflow:hidden;border:2px solid var(--surface);box-shadow:var(--sh-1);flex:none}
.miniphoto svg{width:100%;height:100%;display:block}
.go{margin-top:auto;height:34px;border-radius:12px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;position:relative;font-weight:800;font-size:14px;letter-spacing:-.01em}
.go .ico,.go .acc-word{grid-area:1/1;display:grid;place-items:center}
.go svg{width:18px;height:18px;display:block}
.go .ok{opacity:0}
.hand{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid color-mix(in srgb,#c9845a 55%,#fff);z-index:2;opacity:0;pointer-events:none;
  inset-inline-end:14%;bottom:16%;box-shadow:0 2px 0 color-mix(in srgb,#000 12%,transparent)}
.b1 .hand{background:#F6C7A1}
.b2 .hand{background:#D4925A}
.jobchip{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:7px}
.jobchip .gic{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.jobchip .gic svg{width:18px;height:18px;display:block}

.thread{width:min(230px,46%);max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-2);
  padding:8px;display:flex;flex-direction:column;gap:7px;margin-bottom:8px;align-self:center}
.thread-top{display:flex;align-items:center;gap:0;height:22px}
.av{width:18px;height:18px;border-radius:50%;border:2px solid var(--surface);display:block}
.av.a2{margin-inline-start:-6px}
.av.ho{background:#F6C7A1}.av.pro{background:#D4925A}
.thread-top .bar{margin-inline-start:8px;height:6px;width:42%;border-radius:5px;background:var(--border)}
.msg{max-width:92%;opacity:0}
.msg.ho{align-self:flex-start}
.msg.pro{align-self:flex-end}
.shot{width:86px;height:62px;border-radius:12px;overflow:hidden;border:3px solid var(--surface);box-shadow:var(--sh-1);background:#d7eee4}
.shot svg{width:100%;height:100%;display:block}
.quote{background:var(--warm-soft);color:var(--warm-ink);border:2px solid var(--warm);border-radius:16px;padding:4px 12px 5px;font-weight:800;font-size:20px;letter-spacing:-.03em;line-height:1.2;position:relative}
.quote::after{content:"";position:absolute;width:8px;height:8px;background:var(--warm-soft);border-inline-end:2px solid var(--warm);border-bottom:2px solid var(--warm);bottom:-6px;inset-inline-end:14px;transform:rotate(45deg)}
.bye{background:var(--accent);color:var(--on-accent);border-radius:16px;padding:7px 11px;font-weight:750;font-size:13px;line-height:1.25}

.dots{display:flex;gap:6px;justify-content:center;height:14px;align-items:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--border-strong);display:block;position:relative}
.dots i b{position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:0;transform:scale(.6)}
.caps{position:relative;height:34px;margin:0 8px 8px}
.caps span{position:absolute;inset:0;display:grid;place-items:center;font-weight:780;font-size:clamp(18px,2.5vw,26px);letter-spacing:-.03em;line-height:1;opacity:0}

.tldemo-live .c1{animation:tdB1 var(--loop) linear infinite}
.tldemo-live .c2{animation:tdB2 var(--loop) linear infinite}
.tldemo-live .c3{animation:tdB3 var(--loop) linear infinite}
.tldemo-live .dots i:nth-child(1) b{animation:tdB1 var(--loop) linear infinite}
.tldemo-live .dots i:nth-child(2) b{animation:tdB2 var(--loop) linear infinite}
.tldemo-live .dots i:nth-child(3) b{animation:tdB3 var(--loop) linear infinite}
.tldemo-live .b1 .hand{animation:tdTap1 var(--loop) linear infinite}
.tldemo-live .b2 .hand{animation:tdTap2 var(--loop) linear infinite}
.tldemo-live .b1 .go{animation:tdPress1 var(--loop) linear infinite}
.tldemo-live .b2 .go{animation:tdPress2 var(--loop) linear infinite}
.tldemo-live .b1 .plane{animation:tdPlane var(--loop) linear infinite}
.tldemo-live .b1 .ok{animation:tdOk1 var(--loop) linear infinite}
.tldemo-live .b2 .acc-word{animation:tdWord2 var(--loop) linear infinite}
.tldemo-live .b2 .ok{animation:tdOk2 var(--loop) linear infinite}
.tldemo-live .m1{animation:tdM1 var(--loop) linear infinite}
.tldemo-live .m2{animation:tdM2 var(--loop) linear infinite}
.tldemo-live .m3{animation:tdM3 var(--loop) linear infinite}

.tldemo.is-paused .tldemo-live,.tldemo.is-paused .tldemo-live *{animation-play-state:paused!important}

.tldemo-still{display:none}
.tldemo-still .stage{height:200px;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-1)}
.tldemo-still .who{width:78px}
.tldemo-still .b3 .who{width:58px}
.tldemo-still .phone{width:102px;height:168px;border-width:2px;border-radius:18px}
.tldemo-still .thread{width:min(148px,42%);padding:6px;gap:5px;border-radius:14px}
.tldemo-still .shot{width:64px;height:46px}
.tldemo-still .quote{font-size:16px;padding:3px 8px}
.tldemo-still .bye{font-size:11px;padding:5px 7px}
.tldemo-still .hand{display:none}
.tldemo-still .msg{opacity:1;transform:none}
.tldemo-still .go .plane,.tldemo-still .acc-word{opacity:0}
.tldemo-still .go .ok{opacity:1}
.panel-cap{margin:6px 0 0;text-align:center;font-weight:780;font-size:15px;letter-spacing:-.02em}

@media (max-width:520px){
  .b3{flex-wrap:wrap;align-content:center;align-items:center;padding-top:4px}
  .b3 .thread{flex:1 0 100%;width:auto;max-width:280px;order:-1;margin-bottom:0}
  .tldemo-still .b3{flex-wrap:nowrap}
  .tldemo-still .b3 .thread{flex:none;width:min(120px,40%);order:0}
}
.hero-kicker h1{margin-top:12px}
@media (max-width:819px){
  .hero:has(.tldemo){display:flex;flex-direction:column}
  .hero:has(.tldemo) .hero-kicker{order:1}
  .hero:has(.tldemo) .tldemo{order:2}
  .hero:has(.tldemo) .hero-copy{order:3}
}
@media (min-width:820px){
  .hero:has(.tldemo){grid-template-columns:minmax(0,.92fr) minmax(300px,1.15fr);align-items:center}
  .hero:has(.tldemo) .hero-kicker{grid-column:1;grid-row:1}
  .hero:has(.tldemo) .hero-copy{grid-column:1;grid-row:2}
  .hero:has(.tldemo) .tldemo{grid-column:2;grid-row:1 / span 2}
  .tldemo-live .stage{height:clamp(400px,42vw,480px)}
}
@media (prefers-reduced-motion:reduce){
  .tldemo-live{display:none!important}
  .tldemo-still{display:grid!important;gap:12px;grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) and (min-width:800px){
  .hero:has(.tldemo){display:grid;grid-template-columns:1fr}
  .hero:has(.tldemo) .hero-kicker,.hero:has(.tldemo) .hero-copy,.hero:has(.tldemo) .tldemo{grid-column:1;grid-row:auto}
  .tldemo-still{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
}

@keyframes tdBob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes tdB1{0%,28%{opacity:1}34%,92%{opacity:0}100%{opacity:1}}
@keyframes tdB2{0%,28%{opacity:0}34%,60%{opacity:1}66%,100%{opacity:0}}
@keyframes tdB3{0%,60%{opacity:0}66%,92%{opacity:1}99%,100%{opacity:0}}
@keyframes tdTap1{0%,12%{opacity:0;transform:translate(14px,16px)}17%{opacity:1;transform:none}19%{opacity:1;transform:translateY(4px) scale(.92)}23%{opacity:1;transform:none}30%,100%{opacity:0;transform:none}}
@keyframes tdTap2{0%,46%{opacity:0;transform:translate(14px,16px)}50%{opacity:1;transform:none}52%{opacity:1;transform:translateY(4px) scale(.92)}56%{opacity:1;transform:none}62%,100%{opacity:0;transform:none}}
@keyframes tdPress1{0%,17%{transform:none}19%,22%{transform:scale(.94)}26%,100%{transform:none}}
@keyframes tdPress2{0%,50%{transform:none}52%,56%{transform:scale(.94)}60%,100%{transform:none}}
@keyframes tdPlane{0%,20%{opacity:1;transform:none}24%,100%{opacity:0;transform:translateY(-4px) scale(.8)}}
@keyframes tdOk1{0%,20%{opacity:0;transform:scale(.5)}24%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:none}}
@keyframes tdWord2{0%,50%{opacity:1}54%,62%{opacity:0}66%,100%{opacity:0}}
@keyframes tdOk2{0%,50%{opacity:0;transform:scale(.5)}54%,62%{opacity:1;transform:none}66%,100%{opacity:0;transform:none}}
@keyframes tdM1{0%,68%{opacity:0;transform:translateY(8px)}73%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
@keyframes tdM2{0%,76%{opacity:0;transform:translateY(8px)}81%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
@keyframes tdM3{0%,82%{opacity:0;transform:translateY(8px)}87%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}