/* Company examples reuse the approved homepage typography, colors, and draft UI. */
.example-controls{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
.example-controls[hidden],.example-tabs[hidden]{display:none}
.example-controls .eyebrow{margin:0}
.example-navigation{display:flex;align-items:center;gap:10px;flex-shrink:0}
.example-play{display:flex;align-items:center;gap:7px;border:0;background:none;color:#637087;font-size:11px;min-height:44px;padding:0 9px;margin-right:6px}
.example-play[hidden]{display:none}
.example-play:hover{color:var(--navy)}
.example-play [data-example-play-icon]{font-size:16px}
.example-count{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#77839a;margin-right:8px;min-width:52px}
.example-arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid #d7deeb;border-radius:6px;background:#fff;color:var(--navy);transition:background-color var(--fast) var(--ease),border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.example-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.example-arrow:hover{background:#eef3ff;border-color:#a8bbda}
.example-arrow:active{transform:scale(.96)}
.example-tabs{display:flex;align-items:center;gap:26px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#d6deeb transparent;border-bottom:1px solid #e0e6ef;padding:0 0 1px;margin-bottom:34px}
.example-tabs button{flex-shrink:0;min-height:44px;border:0;border-bottom:2px solid transparent;background:none;padding:0 0 12px;color:#6e7b92;font-size:12px;font-weight:550;transition:color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.example-tabs button:hover{color:var(--navy)}
.example-tabs button[aria-selected=true]{color:var(--navy);border-color:var(--navy);font-weight:700}
.example-tabs button:focus-visible{outline-offset:-3px}
.example-viewport{display:grid;touch-action:pan-y}
.example-slide{grid-area:1/1;min-width:0;align-self:start}
.example-slide[hidden]{display:none}
.example-slide[aria-hidden=true]{visibility:hidden;pointer-events:none}
.example-slide.is-current{animation:exampleEnter var(--slow) var(--ease) both}
.example-company{font-size:12px;font-weight:650;line-height:1.6;color:var(--navy);margin-bottom:15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.example-company>span{color:#8b95a6;font-size:10px;font-weight:450;border-left:1px solid #dce3ee;padding-left:12px}
.example-intro h2{font-size:clamp(36px,4.2vw,58px);max-width:1050px;color:var(--navy);letter-spacing:-.05em;line-height:1.08}
.example-intro .section-lede{max-width:940px;font-size:17px;margin-top:16px}
.example-slide .process-row{margin:30px 0 32px;gap:32px}
.example-slide .process-item h3{font-size:13px}
.example-evidence{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:stretch}
.case-conversation{border:1px solid #dce4f0;border-radius:9px;background:white;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.case-channel{padding:17px 19px;border-bottom:1px solid #e9edf4;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:650;color:#24324d;min-height:53px}
.case-channel-note{font-size:9px;font-weight:450;color:#8993a5;white-space:nowrap}
.case-messages{padding:24px 20px 15px;flex:1}
.case-message{display:grid;grid-template-columns:32px minmax(0,1fr);gap:11px;font-size:12px;line-height:1.65;margin-bottom:23px}
.case-message .avatar{height:32px;width:32px;font-size:12px;flex-shrink:0}
.case-message p{color:#465269}
.case-message .message-person{flex-wrap:wrap;gap:7px}
.case-message:last-child{margin-bottom:0}
.case-ready{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:#258466;margin-top:11px}
.case-ready>span{width:14px;height:14px;display:grid;place-items:center;background:#219c72;border-radius:50%;color:white;font-size:9px}
.case-proactive-note{border-top:1px solid #edf0f5;padding:13px 19px;background:#f8faff;color:#61718c;font-size:10px;line-height:1.6}
.example-evidence .email-preview{margin:0;box-shadow:none;padding:0 18px;min-width:0;display:flex;flex-direction:column}
.example-evidence .email-chrome{min-height:53px;height:auto;gap:12px}
.case-draft-label{font-size:9px;color:#8993a5}
.example-evidence .email-line{gap:14px;min-height:43px;padding:8px 0;align-items:baseline}
.example-evidence .email-line strong{overflow-wrap:anywhere;line-height:1.6}
.example-evidence .recipient{overflow-wrap:anywhere}
.example-evidence .email-body{font-size:12px;line-height:1.8;min-height:0;flex:1;padding:22px 0}
.example-evidence .email-footer{gap:10px;flex-wrap:wrap;min-height:51px}
.example-evidence .draft-attachment{max-width:100%;overflow-wrap:anywhere;font-size:9px}
.example-evidence .draft-attachment svg{flex-shrink:0}
.example-evidence .draft-status{font-size:9px}
.example-section .example-footnote{margin:18px 0 0;font-size:10px;max-width:820px}
.example-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.example-slide.is-current .case-message{animation:exampleMessage 240ms var(--ease) both}
.example-slide.is-current .case-message:nth-child(2){animation-delay:180ms}
.example-slide.is-current .case-message:nth-child(3){animation-delay:420ms}
@keyframes exampleEnter{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes exampleMessage{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.example-tabs{gap:22px}.example-tabs button{font-size:11px}.case-channel{padding-inline:15px}.case-channel-note{font-size:8px}.case-messages{padding:21px 15px 15px}.case-message{font-size:11px}.example-evidence .email-body{font-size:11px}.example-evidence .sample-pill{font-size:9px}}
@media(max-width:800px){.example-controls{gap:16px;margin-bottom:13px}.example-navigation{gap:7px}.example-count{margin-right:2px}.example-play{margin-right:0;padding-inline:4px}.example-tabs{gap:23px;margin-bottom:28px}.example-intro h2{font-size:42px;max-width:720px}.example-intro .section-lede{font-size:15px}.example-slide .process-row{gap:20px;margin:26px 0}.example-slide .process-item h3{font-size:12px}.example-evidence{grid-template-columns:1fr;gap:16px}.case-channel-note{font-size:9px}.case-messages{padding:23px 20px}.case-message{font-size:12px}.example-evidence .email-preview{padding-inline:20px}.example-evidence .email-body{font-size:12px;padding:22px 0}.example-evidence .email-line{font-size:11px}.example-evidence .sample-pill{font-size:10px}}
@media(max-width:520px){.example-controls{align-items:flex-start;gap:12px;flex-wrap:wrap}.example-controls .eyebrow{font-size:9px;align-self:center;max-width:130px;line-height:1.6}.example-navigation{gap:6px}.example-play{font-size:9px;padding:0;gap:4px}.example-count{font-size:9px;min-width:40px;margin-left:2px;letter-spacing:.7px}.example-arrow{height:40px;width:40px}.example-arrow svg{height:18px;width:18px}.example-tabs{gap:22px;margin-bottom:25px}.example-tabs button{font-size:11px;min-height:42px;padding-bottom:10px}.example-company{font-size:11px;gap:10px;margin-bottom:12px}.example-company>span{font-size:9px;padding-left:10px}.example-intro h2{font-size:35px;line-height:1.12;letter-spacing:-1.6px;max-width:400px}.example-intro .section-lede{font-size:14px;line-height:1.65;margin-top:14px}.example-slide .process-row{gap:20px;margin:26px 0}.example-slide .process-item p{font-size:11px}.case-channel{font-size:12px;padding:14px;min-height:48px}.case-channel-note{font-size:8px}.case-messages{padding:20px 14px}.case-message{grid-template-columns:29px minmax(0,1fr);gap:9px;font-size:11px;line-height:1.6;margin-bottom:22px}.case-message .avatar{height:29px;width:29px;font-size:11px}.case-proactive-note{padding:12px 14px;font-size:9px}.example-evidence .email-preview{padding-inline:14px}.example-evidence .email-chrome{min-height:47px}.example-evidence .sample-pill{font-size:8px}.example-evidence .email-line{font-size:10px;gap:12px}.example-evidence .email-body{font-size:11px;line-height:1.75;padding:20px 0}.example-evidence .draft-attachment,.example-evidence .draft-status{font-size:8px}.example-section .example-footnote{font-size:9px}}
@media(max-width:380px){.example-controls .eyebrow{max-width:100px;font-size:8px}.example-play{font-size:8px}.example-arrow{width:36px;height:40px}.example-navigation{gap:5px}.example-intro h2{font-size:32px}.case-channel-note{max-width:90px;white-space:normal;text-align:right}}
@media(prefers-reduced-motion:reduce){.example-slide.is-current,.example-slide.is-current .case-message{animation:none!important}}

/* A single contact sheet provides six fictional photo avatars without extra requests. */
.avatar-photo{background-image:url('/homepage-assets/people-avatars.webp');background-size:300% 200%;background-repeat:no-repeat;background-position:var(--portrait-x,0%) var(--portrait-y,0%);background-color:#e7ebf1}
.avatar-photo[data-portrait="0"]{--portrait-x:0%;--portrait-y:0%}
.avatar-photo[data-portrait="1"]{--portrait-x:50%;--portrait-y:0%}
.avatar-photo[data-portrait="2"]{--portrait-x:100%;--portrait-y:0%}
.avatar-photo[data-portrait="3"]{--portrait-x:0%;--portrait-y:100%}
.avatar-photo[data-portrait="4"]{--portrait-x:50%;--portrait-y:100%}
.avatar-photo[data-portrait="5"]{--portrait-x:100%;--portrait-y:100%}
.person-photo{width:20px;height:20px;display:block;border-radius:4px;flex-shrink:0}
.sidebar-shortcuts svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sidebar-shortcuts span{gap:12px}
.message-reactions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:11px}
.message-reactions>span{display:inline-flex;align-items:center;gap:5px;background:#edf4ff;border:1px solid #c6d8f1;border-radius:99px;padding:3px 8px;font-size:11px;line-height:1.4;color:#315b97}
.message-reactions b{font-size:9px;font-weight:600}
.conversation{min-height:485px}
.example-slide.is-current .case-message:nth-child(4){animation-delay:780ms}

/* The two identical groups make each moving row loop without a jump. */
.integrations-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:15px}
.integrations-heading h2{font-size:13px;margin:0;max-width:none}
.logo-motion-control{border:0;background:transparent;display:flex;align-items:center;gap:7px;color:#6e7b92;font-size:10px;min-height:44px;padding:0 5px}
.logo-motion-control[hidden]{display:none}
.logo-motion-control:hover{color:var(--navy)}
.logo-motion-control [data-logo-icon]{font-size:15px}
.logo-marquee-rows{display:grid;gap:25px;padding:8px 0 16px}
.logo-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.logo-track{width:max-content;display:flex;animation:logoRoll 38s linear infinite;will-change:transform}
.logo-track-1{animation-direction:reverse;animation-duration:44s}
.logo-group{display:flex;align-items:center;gap:54px;padding-right:54px;flex-shrink:0}
.rolling-logo{display:flex;align-items:center;gap:14px;min-width:147px;min-height:43px;font-size:13px;font-weight:550;color:#4e5d75;white-space:nowrap}
.rolling-logo img{width:32px;height:32px;object-fit:contain;flex-shrink:0}
[data-rolling-logos]:hover .logo-track,[data-rolling-logos].logos-focus-paused .logo-track,[data-rolling-logos].logos-paused .logo-track,[data-rolling-logos].logos-outside .logo-track,[data-rolling-logos].logos-hidden .logo-track{animation-play-state:paused}
@keyframes logoRoll{to{transform:translateX(-50%)}}
@media(max-width:800px){.conversation{min-height:485px}.logo-group{gap:40px;padding-right:40px}.rolling-logo{min-width:135px;font-size:12px;gap:12px}.logo-marquee-rows{gap:21px}.rolling-logo img{width:30px;height:30px}}
@media(max-width:520px){.conversation{min-height:570px}.message-reactions>span{font-size:10px;padding:3px 7px}.integrations-heading h2{font-size:11px}.logo-group{gap:32px;padding-right:32px}.rolling-logo{min-width:122px;font-size:11px;gap:11px}.rolling-logo img{height:28px;width:28px}.logo-marquee-rows{gap:20px}.logo-motion-control{font-size:9px}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none!important;transform:none;width:100%;will-change:auto}.logo-duplicate{display:none}.logo-group{width:100%;padding-right:0;flex-wrap:wrap;justify-content:center;gap:24px}.logo-marquee{mask-image:none}.rolling-logo{min-width:130px}.logo-marquee-rows{gap:24px}}

/* The center card stays readable while its two neighbors show the direction of travel. */
.is-card-stack{--card-peek:130px;--card-padding:32px;--card-swap:400ms}
.is-card-stack .example-tabs{margin-bottom:20px}
.is-card-stack .example-viewport{position:relative;isolation:isolate;padding:22px 0 42px;overflow:clip}
.is-card-stack .example-slide{position:relative;width:calc(100% - 220px);margin-inline:auto;align-self:stretch;padding:var(--card-padding);border:1px solid #d9e3f2;border-radius:12px;background:#fff;box-shadow:0 10px 26px #1232640b;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(34px) scale(.92);transform-origin:50% 12%;transition:transform var(--card-swap) cubic-bezier(.22,.68,0,1),opacity var(--card-swap) ease,visibility 0s var(--card-swap);animation:none}
.is-card-stack .example-slide.is-current{z-index:3;opacity:1;visibility:visible;pointer-events:auto;transform:translateX(var(--card-drag,0px)) rotate(var(--card-tilt,0deg));box-shadow:0 16px 38px #12326416;transition:transform var(--card-swap) cubic-bezier(.22,.68,0,1),opacity var(--card-swap) ease,visibility 0s;cursor:grab}
.is-card-stack .example-slide[aria-hidden=true].is-previous,.is-card-stack .example-slide[aria-hidden=true].is-next{z-index:1;opacity:1;visibility:visible;transition:transform var(--card-swap) cubic-bezier(.22,.68,0,1),opacity var(--card-swap) ease,visibility 0s}
.is-card-stack .example-slide.is-previous{transform:translateX(calc(-1 * var(--card-peek))) translateY(32px) rotate(-3deg) scale(.93)}
.is-card-stack .example-slide.is-next{transform:translateX(var(--card-peek)) translateY(32px) rotate(3deg) scale(.93)}
.is-card-stack .example-slide.is-previous::before,.is-card-stack .example-slide.is-next::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:#eef3fbd9;pointer-events:none}
.is-card-stack .example-slide.is-previous::after,.is-card-stack .example-slide.is-next::after{content:attr(data-card-label);position:absolute;top:22px;z-index:2;font-size:11px;font-weight:650;color:#667b9f;writing-mode:vertical-rl;letter-spacing:.5px}
.is-card-stack .example-slide.is-previous::after{left:18px;transform:rotate(180deg)}
.is-card-stack .example-slide.is-next::after{right:18px}
.is-card-stack .example-intro h2{font-size:clamp(34px,3.7vw,49px);line-height:1.1;max-width:900px}
.is-card-stack .example-intro .section-lede{font-size:15px;line-height:1.65;margin-top:14px}
.is-card-stack .example-slide .process-row{gap:22px;margin:25px 0 28px}
.is-card-stack .process-item{gap:12px}
.is-card-stack .process-icon{width:43px;height:43px}
.is-card-stack .process-icon svg{width:22px;height:22px}
.is-card-stack .process-item:not(:last-child)::after{width:13px;right:-16px;top:22px}
.is-card-stack .example-slide .process-item h3{font-size:11px;margin-top:5px}
.is-card-stack .process-item p{font-size:10px}
.is-card-stack .example-evidence{gap:16px}
.is-card-stack .case-channel{padding:14px;font-size:11px;gap:8px}
.is-card-stack .case-channel-note{font-size:8px}
.is-card-stack .case-messages{padding:20px 14px 16px}
.is-card-stack .case-message{font-size:11px;grid-template-columns:29px minmax(0,1fr);gap:9px;margin-bottom:19px;line-height:1.6}
.is-card-stack .case-message .avatar{width:29px;height:29px}
.is-card-stack .case-message .message-person strong{font-size:11px}
.is-card-stack .case-message .message-person time{font-size:8px}
.is-card-stack .case-proactive-note{padding:12px 14px;font-size:9px}
.is-card-stack .example-evidence .email-preview{padding-inline:14px}
.is-card-stack .example-evidence .email-body{font-size:11px;padding-block:20px}
.is-card-stack .example-evidence .email-line{font-size:10px;gap:10px}
.is-card-stack .example-evidence .sample-pill{font-size:8px}
.is-card-stack .example-evidence .draft-attachment,.is-card-stack .example-evidence .draft-status{font-size:8px}
.is-card-stack .example-footnote{margin-top:0;text-align:center;max-width:none}
.is-card-stack .example-slide.is-current .case-message{animation:none}
.is-card-stack .example-viewport.is-dragging{user-select:none}
.is-card-stack .example-viewport.is-dragging .is-current{transition:none;cursor:grabbing}
@media(max-width:1000px){.is-card-stack{--card-peek:95px;--card-padding:25px}.is-card-stack .example-slide{width:calc(100% - 150px)}.is-card-stack .example-intro h2{font-size:41px}.is-card-stack .case-channel-note{max-width:75px;white-space:normal;text-align:right}.is-card-stack .example-slide .process-row{gap:16px}.is-card-stack .process-icon{width:37px;height:37px}.is-card-stack .process-item{gap:9px}.is-card-stack .process-item:not(:last-child)::after{display:none}}
@media(max-width:800px){.is-card-stack{--card-peek:60px;--card-padding:25px}.is-card-stack .example-slide{width:calc(100% - 88px)}.is-card-stack .example-viewport{padding-top:15px;padding-bottom:30px}.is-card-stack .example-slide.is-previous{transform:translateX(calc(-1 * var(--card-peek))) translateY(24px) rotate(-2deg) scale(.94)}.is-card-stack .example-slide.is-next{transform:translateX(var(--card-peek)) translateY(24px) rotate(2deg) scale(.94)}.is-card-stack .example-intro h2{font-size:38px}.is-card-stack .example-evidence{grid-template-columns:1fr}.is-card-stack .case-message{font-size:12px}.is-card-stack .example-evidence .email-body{font-size:12px}.is-card-stack .case-channel-note{max-width:none;white-space:nowrap}.is-card-stack .example-slide.is-previous::after{left:12px}.is-card-stack .example-slide.is-next::after{right:12px}.is-card-stack .process-item{display:block}.is-card-stack .example-slide .process-item h3{margin-top:10px}.is-card-stack .example-intro .section-lede{font-size:14px}}
@media(max-width:520px){.is-card-stack{--card-peek:33px;--card-padding:18px}.is-card-stack .example-slide{width:calc(100% - 46px);border-radius:10px}.is-card-stack .example-viewport{padding-top:12px;padding-bottom:24px}.is-card-stack .example-slide.is-previous{transform:translateX(calc(-1 * var(--card-peek))) translateY(20px) rotate(-1.5deg) scale(.96)}.is-card-stack .example-slide.is-next{transform:translateX(var(--card-peek)) translateY(20px) rotate(1.5deg) scale(.96)}.is-card-stack .example-intro h2{font-size:29px;letter-spacing:-1.3px;line-height:1.12}.is-card-stack .example-company{font-size:10px;gap:6px;margin-bottom:12px}.is-card-stack .example-company>span{font-size:8px;padding-left:6px}.is-card-stack .example-intro .section-lede{font-size:12px}.is-card-stack .example-slide .process-row{grid-template-columns:1fr;gap:15px;margin:21px 0}.is-card-stack .process-item{display:flex;gap:11px}.is-card-stack .example-slide .process-item h3{margin-top:4px}.is-card-stack .case-message{font-size:10px;grid-template-columns:25px minmax(0,1fr);gap:8px}.is-card-stack .case-message .avatar{width:25px;height:25px}.is-card-stack .case-message .message-person strong{font-size:10px}.is-card-stack .case-messages{padding:17px 11px}.is-card-stack .case-channel{padding:12px 11px;font-size:10px}.is-card-stack .case-channel-note{max-width:70px;white-space:normal;font-size:7px}.is-card-stack .example-evidence .email-preview{padding-inline:11px}.is-card-stack .example-evidence .email-line{font-size:9px;gap:7px;flex-wrap:wrap}.is-card-stack .example-evidence .email-body{font-size:10px;padding-block:17px}.is-card-stack .example-slide.is-previous::after,.is-card-stack .example-slide.is-next::after{font-size:9px;top:18px}.is-card-stack .example-slide.is-previous::after{left:7px}.is-card-stack .example-slide.is-next::after{right:7px}}
@media(max-width:380px){.is-card-stack{--card-peek:28px;--card-padding:14px}.is-card-stack .example-slide{width:calc(100% - 40px)}.is-card-stack .example-intro h2{font-size:27px}.is-card-stack .example-evidence .sample-pill{max-width:160px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.is-card-stack .example-slide{transition:none!important}.is-card-stack .example-slide.is-current{transform:none!important}.is-card-stack .example-slide.is-previous{transform:translateX(calc(-1 * var(--card-peek))) translateY(20px) scale(.96)}.is-card-stack .example-slide.is-next{transform:translateX(var(--card-peek)) translateY(20px) scale(.96)}}

/* An elliptical orbit brings the next card forward while the last card returns behind it. */
.is-card-stack .example-viewport{perspective:1500px;padding-top:30px;padding-bottom:60px}
.is-card-stack .example-slide{transform:translate3d(0,80px,-240px) scale(.8);transition:transform 650ms cubic-bezier(.42,0,.2,1),opacity 400ms ease,visibility 0s 650ms}
.is-card-stack .example-slide.is-current{transform:translate3d(var(--card-drag,0px),0,45px) rotate(var(--card-tilt,0deg));transition:transform 650ms cubic-bezier(.42,0,.2,1),opacity 400ms ease,visibility 0s}
.is-card-stack .example-slide.is-previous{transform:translate3d(calc(-1 * var(--card-peek)),34px,-95px) rotateY(9deg) rotate(-3deg) scale(.94)}
.is-card-stack .example-slide.is-next{transform:translate3d(var(--card-peek),34px,-95px) rotateY(-9deg) rotate(3deg) scale(.94)}
.is-card-stack.is-orbiting .example-slide{transition:none}
.is-card-stack .example-card-top{display:grid;grid-template-columns:minmax(0,1fr) 175px;align-items:start;gap:24px;margin-bottom:27px}
.is-card-stack .example-intro h2{font-size:clamp(32px,3.25vw,44px);max-width:700px}
.is-card-stack .example-intro .section-lede{font-size:14px;line-height:1.65;max-width:710px}
.result-stamp{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:116px;padding:15px 9px;border:3px double #419773;border-radius:8px;background:#eef9f2;color:#216e4f;text-align:center;transform:rotate(6deg);box-shadow:3px 5px 0 #d9eddf;margin-top:9px}
.result-stamp>span{font-size:8px;letter-spacing:1.3px;text-transform:uppercase;font-weight:750}
.result-stamp strong{font-size:29px;letter-spacing:-1.1px;line-height:1.1;font-weight:800}
.result-stamp b{font-size:10px;font-weight:650;line-height:1.4}
.is-card-stack .case-chat-stage{position:relative;padding-bottom:43px}
.is-card-stack .case-conversation{min-height:438px;box-shadow:0 4px 14px #16356805}
.is-card-stack .case-channel{font-size:14px;padding:17px 23px;min-height:55px}
.is-card-stack .case-channel-note{font-size:9px;max-width:none;white-space:nowrap}
.is-card-stack .case-messages{padding:27px 25px 25px}
.is-card-stack .case-message{grid-template-columns:34px minmax(0,1fr);gap:13px;font-size:13px;line-height:1.6;margin-bottom:24px}
.is-card-stack .case-message:last-child{margin-bottom:0}
.is-card-stack .case-message .avatar{width:34px;height:34px}
.is-card-stack .case-message .message-person strong{font-size:12px}
.is-card-stack .case-message .message-person time{font-size:9px}
.is-card-stack .case-message p{max-width:780px}
.is-card-stack .case-jared>div{position:relative}
.is-card-stack .case-ready{font-size:10px;margin-top:10px}
.is-card-stack .case-proactive-note{font-size:10px;padding:13px 23px}
.case-typing{position:absolute;top:25px;left:0;display:flex;align-items:center;gap:10px;font-size:11px;color:#8793a7;line-height:1.5}
.case-typing[hidden]{display:none}
.typing-dots{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.typing-dots i{width:4px;height:4px;border-radius:50%;background:#8398bb;animation:caseTyping 900ms ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:120ms}.typing-dots i:nth-child(3){animation-delay:240ms}
@keyframes caseTyping{50%{transform:translateY(-3px);opacity:.4}}
.mail-notification{position:absolute;right:18px;bottom:0;z-index:2;display:flex;align-items:center;gap:13px;width:400px;max-width:calc(100% - 36px);padding:16px 18px;background:white;border:1px solid #d8e2f0;border-radius:11px;box-shadow:0 10px 28px #1635681b;transition:opacity 320ms ease,transform 400ms cubic-bezier(.22,.68,0,1)}
.mail-app-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#f4f6fb;flex-shrink:0}
.mail-app-icon img{object-fit:contain}
.mail-notification-copy{min-width:0;flex:1}
.mail-notification-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.mail-notification-title strong{font-size:11px;color:#233858}
.mail-notification-title>span{font-size:8px;color:#98a2b3;white-space:nowrap}
.mail-notification-copy p{font-size:10px;color:#4b5d79;line-height:1.5;overflow-wrap:anywhere}
.mail-notification-copy small{display:block;color:#91a0b5;font-size:8px;line-height:1.5;margin-top:3px;overflow-wrap:anywhere}
.mail-sent-check{width:18px;height:18px;background:#e2f5eb;color:#279769;border-radius:50%;display:grid;place-items:center;font-size:11px;flex-shrink:0}
.scene-ready.is-current [data-scene-step]{transition:opacity 320ms ease,transform 400ms cubic-bezier(.22,.68,0,1)}
.scene-ready.is-current [data-scene-step]:not(.scene-shown){opacity:0;transform:translateY(8px);pointer-events:none}
.scene-ready.is-current .mail-notification:not(.scene-shown){transform:translateX(24px) translateY(8px) scale(.96)}
.scenes-paused .typing-dots i{animation-play-state:paused}
@media(max-width:1000px){.is-card-stack .example-card-top{grid-template-columns:minmax(0,1fr) 150px;gap:18px}.result-stamp{min-height:106px}.result-stamp strong{font-size:25px}.result-stamp b{font-size:9px}.is-card-stack .example-intro h2{font-size:35px}.is-card-stack .case-message{font-size:12px}.is-card-stack .case-messages{padding:25px 20px}.is-card-stack .case-channel{padding-inline:20px}}
@media(max-width:800px){.is-card-stack .example-card-top{grid-template-columns:minmax(0,1fr) 135px;gap:17px}.result-stamp{min-height:100px;padding:13px 7px}.result-stamp strong{font-size:23px}.result-stamp>span{font-size:7px}.is-card-stack .example-intro h2{font-size:32px}.is-card-stack .example-intro .section-lede{font-size:12px}.is-card-stack .case-conversation{min-height:450px}.is-card-stack .case-message{font-size:11px}.is-card-stack .case-channel{font-size:12px}.is-card-stack .case-channel-note{font-size:8px}.case-typing{font-size:10px}.is-card-stack .case-message .message-person strong{font-size:11px}.is-card-stack .case-proactive-note{font-size:9px}}
@media(max-width:520px){.is-card-stack .example-viewport{padding-top:17px;padding-bottom:40px}.is-card-stack .example-card-top{grid-template-columns:1fr;gap:18px;margin-bottom:22px}.result-stamp{grid-row:1;justify-self:end;width:133px;min-height:83px;gap:4px;margin-top:2px;padding:11px 7px}.result-stamp strong{font-size:23px}.result-stamp b{font-size:8px}.is-card-stack .example-intro h2{font-size:28px}.is-card-stack .example-intro .section-lede{font-size:12px}.is-card-stack .case-conversation{min-height:500px}.is-card-stack .case-chat-stage{padding-bottom:0}.is-card-stack .case-channel{font-size:10px;gap:8px;padding:13px 11px}.is-card-stack .case-channel-note{max-width:70px;font-size:7px;white-space:normal}.is-card-stack .case-messages{padding:20px 11px}.is-card-stack .case-message{grid-template-columns:25px minmax(0,1fr);gap:8px;font-size:10px;margin-bottom:21px}.is-card-stack .case-message .avatar{width:25px;height:25px}.is-card-stack .case-message .message-person strong{font-size:10px}.is-card-stack .case-message .message-person time{font-size:8px}.is-card-stack .case-ready{font-size:8px}.is-card-stack .case-proactive-note{font-size:8px;padding:12px 11px}.case-typing{font-size:9px;gap:7px;top:22px}.mail-notification{position:relative;right:auto;bottom:auto;width:100%;max-width:none;margin-top:13px;padding:13px 11px;gap:9px}.mail-app-icon{width:31px;height:31px;border-radius:7px}.mail-app-icon img{width:22px;height:22px}.mail-notification-title strong{font-size:10px}.mail-notification-title>span{font-size:7px}.mail-notification-copy p{font-size:9px}.mail-notification-copy small{font-size:7px}.mail-sent-check{width:15px;height:15px;font-size:9px}}
@media(max-width:1000px){.is-card-stack .case-chat-stage{padding-bottom:0}.mail-notification{position:relative;right:auto;bottom:auto;max-width:100%;margin:13px 0 0 auto}}
@media(prefers-reduced-motion:reduce){.typing-dots i{animation:none}.scene-ready.is-current [data-scene-step]{opacity:1!important;transform:none!important;transition:none!important}.is-card-stack .example-slide{transition:none!important}}