/* Live email handoff. Timeline is supplied by the existing showcase panel. */
.handoff-scene{--handoff-line:#94aaa7;--handoff-ease:cubic-bezier(.22,1,.36,1);display:grid;place-items:center;width:100%;height:100%;min-width:0;padding:32px;font-family:Inter,Arial,sans-serif;color:#23302f;background:radial-gradient(ellipse at 11% 24%,#dfeae8b3 0,transparent 55%),radial-gradient(ellipse at 86% 13%,#f5e7dcbd 0,transparent 54%),radial-gradient(ellipse at 70% 91%,#e3e8dca1 0,transparent 58%),#f5f2eb;container-type:inline-size}
.handoff-scene *{box-sizing:border-box}
.handoff-composition{width:100%;max-width:750px;min-width:0}
.handoff-email,.handoff-team{background:#ffffffed;border:1px solid #ffffff;border-radius:14px;box-shadow:0 1px 2px #25352f0a,0 5px 12px #25352f06,0 0 0 1px #25352f0a}
.handoff-email{width:100%;max-width:460px;margin:0 auto;padding:24px}
.handoff-email-heading{display:flex;align-items:center;gap:13px}
.handoff-email-heading>img{flex:none;width:36px;height:36px;object-fit:contain}
.handoff-email-heading>div{min-width:0}
.handoff-email-heading h3{margin:0;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.035em}
.handoff-email-heading span{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:#6a7370}
.handoff-email>p{margin:20px 0;font-size:17px;line-height:1.5;max-width:370px}
.handoff-attachment{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 12px;border:1px solid #e8ebe7;border-radius:7px;background:#f7f8f5;font-size:15px;line-height:1.4}
.handoff-attachment>.handoff-icon{color:#9b6656;width:22px;height:22px}
.handoff-attachment>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.handoff-attachment>span:last-child{margin-left:auto;font-size:14px;color:#707970}
.handoff-icon{display:block;width:24px;height:24px;flex:none}
.handoff-flow{position:relative}
.handoff-branches{display:block;overflow:visible;fill:none;stroke:var(--handoff-line);stroke-width:1.5;stroke-linecap:round}
.handoff-branches-mobile{display:none}
.handoff-line{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--handoff-ease),opacity .2s var(--handoff-ease)}
.handoff-line-1,.handoff-line-2{transition-delay:.12s}
.handoff-line-3,.handoff-line-4{transition-delay:.22s}
.handoff-teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.handoff-team{position:relative;min-width:0;min-height:166px;padding:23px;transition:opacity .28s var(--handoff-ease),transform .28s var(--handoff-ease)}
.handoff-team-production{transition-delay:.06s}
.handoff-team-heading{display:flex;align-items:center;gap:11px;min-width:0}
.handoff-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#e7edf7;color:#58718f}
.handoff-avatar>.handoff-icon{width:23px;height:23px}
.handoff-team-production .handoff-avatar{background:#e8eee1;color:#667c51}
.handoff-team h4{margin:0;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.025em}
.handoff-team>p{margin:17px 0 0;font-size:17px;line-height:1.45;color:#586460}
.handoff-check{display:grid;place-items:center;flex:none;width:24px;height:24px;margin-left:auto;color:#4e7b60;background:#edf4ed;border-radius:50%;transition:opacity .18s var(--handoff-ease),transform .18s var(--handoff-ease)}
.handoff-check>.handoff-icon{width:16px;height:16px}
@keyframes handoff-email-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.showcase-panel[data-beat="0"] .handoff-email{animation:handoff-email-in .3s var(--handoff-ease) both}
.showcase-panel[data-beat="0"] .handoff-line{stroke-dashoffset:1;opacity:0;transition-delay:0s}
.showcase-panel[data-beat="0"] .handoff-team,.showcase-panel[data-beat="1"] .handoff-team{opacity:0;transform:translateY(7px);transition-delay:0s}
.showcase-panel[data-beat="0"] .handoff-check,.showcase-panel[data-beat="1"] .handoff-check,.showcase-panel[data-beat="2"] .handoff-check{opacity:0;transform:scale(.9)}
@container(max-width:570px){.handoff-team{padding:20px;min-height:160px}.handoff-team-heading{gap:9px}.handoff-team h4{font-size:19px}.handoff-avatar{width:32px;height:32px}.handoff-avatar>.handoff-icon{width:21px;height:21px}.handoff-team>p{font-size:16px}.handoff-check{width:22px;height:22px}}
@container(max-width:430px){.handoff-email{padding:20px}.handoff-email-heading h3{font-size:20px}.handoff-email>p{font-size:16px;margin:17px 0}.handoff-email-heading>img{width:32px;height:32px}.handoff-branches-desktop{display:none}.handoff-branches-mobile{display:block}.handoff-teams{grid-template-columns:minmax(0,1fr);gap:18px;padding-left:24px}.handoff-teams:before{content:"";position:absolute;left:6px;top:44px;bottom:64px;border-left:1.5px solid var(--handoff-line);transition:opacity .25s var(--handoff-ease)}.handoff-team{min-height:128px;padding:18px}.handoff-team:before{content:"";position:absolute;left:-19px;top:50%;width:18px;border-top:1.5px solid var(--handoff-line)}.handoff-team-heading{gap:10px}.handoff-team h4{font-size:20px}.handoff-team>p{margin-top:13px}.handoff-team-production{transition-delay:.04s}.showcase-panel[data-beat="0"] .handoff-teams:before{opacity:0}.handoff-check{position:absolute;right:16px;bottom:16px;width:22px;height:22px}.handoff-team>p{padding-right:24px}}
@media(max-width:900px){.handoff-scene{padding:28px}}
@media(max-width:500px){.handoff-scene{padding:18px}}
@media(max-width:350px){.handoff-scene{padding:14px}.handoff-email{padding:17px}.handoff-email-heading{gap:10px}.handoff-email-heading h3{font-size:19px}.handoff-attachment{padding:9px;font-size:14px}.handoff-team{padding:16px}.handoff-team-heading{gap:8px}.handoff-team h4{font-size:19px}.handoff-check{right:13px;bottom:13px}}
@media(prefers-reduced-motion:reduce){.handoff-scene *,.handoff-scene *:before{transition:none!important;animation:none!important}.handoff-scene .handoff-team,.handoff-scene .handoff-check,.handoff-scene .handoff-line,.handoff-scene .handoff-teams:before{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}