/* v24 - phone demo and recognizable brand marks. Scoped to avoid site regressions. */
.demo-v24{background:radial-gradient(ellipse at 17% 53%,rgba(63,132,148,.14),transparent 46%),#0a121b}
.demo-v24 .demo-toolbar{padding:16px 27px;background:rgba(20,33,44,.64);gap:20px}
.demo-v24 .demo-tabs{gap:8px}
.demo-v24 .demo-tab{min-height:46px;padding:12px 17px;font-size:1rem;gap:9px}
.demo-v24 .demo-tab[aria-selected=true]{background:#1b3641;border-color:#376575;color:#d5f5fc}
.demo-v24 .demo-mode{font-size:0.875rem;letter-spacing:.055em;color:#a0bec7}
.demo-v24 .demo-panel{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);align-items:start;gap:48px;padding:34px 42px 33px;min-height:0}
.demo-v24 .micro-label{font-family:var(--mono);font-size:0.875rem;font-weight:400;letter-spacing:.1em;color:#9ab5c2;line-height:1.6}
.phone-stage{width:100%;max-width:400px;justify-self:center;min-width:0}
.phone-perspective{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 9px 19px}
.phone-perspective>span:last-child{display:inline-flex;gap:5px;align-items:center;color:#88a9ba;font-size:0.875rem}
.phone-perspective .icon{width:12px;height:12px}
.demo-phone{width:100%;max-width:378px;height:687px;margin-inline:auto;position:relative;padding:9px;border:1px solid #62717e;border-radius:47px;background:linear-gradient(130deg,#4b5968 0%,#1a2330 13%,#060a12 50%,#364452 98%);box-shadow:0 0 0 2px #0a0e16,0 0 0 3px #2d3a47,0 35px 60px -20px #000b,0 0 75px -25px #57dbea22}
.demo-phone:before,.demo-phone:after{content:"";position:absolute;background:linear-gradient(90deg,#1c2936,#73808b,#1c2936);border-radius:3px;z-index:0}
.demo-phone:before{left:-5px;top:130px;width:3px;height:69px;box-shadow:0 79px #3c4a58}
.demo-phone:after{right:-5px;top:170px;width:3px;height:92px}
.demo-phone .phone-screen{height:100%;width:100%;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;background:#f3f5f9;border-radius:37px;color:#10233c;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.phone-statusbar{position:relative;display:flex;align-items:center;justify-content:space-between;flex:none;height:43px;padding:3px 22px 0;background:#f9fbfd;font-size:1rem;font-weight:650;line-height:1}
.phone-camera{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:102px;height:26px;border-radius:20px;background:#0b0d13;box-shadow:inset 0 0 0 1px #1e242d}
.phone-camera:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:13px;top:9px;background:radial-gradient(circle at 35% 35%,#223954,#080c16 80%)}
.phone-indicators{display:flex;align-items:center;gap:5px;color:#192b42}
.phone-indicators svg{display:block;height:10px;width:14px;fill:currentColor;flex:none}
.phone-indicators svg:last-child{width:23px;height:12px}
.phone-indicators svg:nth-child(2){fill:none}
.phone-contact{display:flex;align-items:center;gap:9px;padding:12px 16px 15px;background:#f9fbfd;border-bottom:1px solid #dbe3ed;flex:none}
.phone-back.icon{width:17px;height:17px;transform:rotate(180deg);color:#3b678d;margin-left:-2px;margin-right:0}
.phone-business-avatar{display:grid;place-items:center;width:37px;height:37px;background:#133752;border:1px solid #244c66;border-radius:50%;color:#9ee2f5;flex:none}
.phone-business-avatar svg{width:27px;height:27px}
.phone-contact>div{min-width:0;flex:1}
.phone-contact strong{font-size:1.125rem;color:#10233c;letter-spacing:-.025em;line-height:1.5;display:block;font-weight:700}
.phone-contact>div>span{font-size:0.875rem;color:#5c7188;display:block;line-height:1.5}
.phone-contact-info{border:1.5px solid #698499;border-radius:50%;font-family:Georgia,serif;font-weight:700;color:#537389;width:17px;height:17px;line-height:14px;text-align:center;font-size:1rem;flex:none}
.phone-webbar{display:flex;align-items:center;gap:7px;flex:none;background:#e5ecf4;border-bottom:1px solid #d8e2ee;padding:9px 15px;font-size:0.875rem;color:#4c6378;line-height:1.2}
.phone-webbar .icon{width:12px;height:12px;color:#66869e}
.phone-webbar>span{margin-left:auto;font-size:0.875rem;letter-spacing:.1em;color:#3a6b8e}
.demo-v24 .demo-thread{display:flex;flex-direction:column;flex:1;gap:10px;min-height:145px;height:auto;max-height:none;padding:18px 14px 17px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-color:#a8b9cb transparent;scrollbar-width:thin;outline-offset:-3px}
.demo-v24 .demo-message{max-width:90%;flex:none;font-size:1.125rem;line-height:1.48;padding:11px 13px;border-radius:16px;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;letter-spacing:0;animation:message-in .22s ease-out;overflow-wrap:anywhere}
.demo-v24 .demo-message.bot{border:1px solid #d8e2ef;background:#fff;color:#1b344e;border-bottom-left-radius:5px;box-shadow:0 1px 1px #09223805}
.demo-v24 .demo-message.customer{background:#143a65;border:1px solid #143a65;color:#fff;border-bottom-right-radius:5px;max-width:87%}
.demo-v24 .demo-message.system{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:0.875rem;color:#697d91;background:none;border:0;max-width:100%;padding:0 2px 4px;line-height:1.5;align-self:center}
.demo-v24 .demo-message.typing{padding:12px 15px;min-height:39px;height:39px;display:flex;gap:5px;align-items:center}
.demo-v24 .typing span{display:block;width:5px;height:5px;background:#859aac;border-radius:50%}
.demo-v24 .reply-area{background:#fff;border-top:1px solid #d7e1ed;margin:0;padding:12px 13px 7px;min-height:0;flex:none;max-height:254px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a8b9cb transparent;overscroll-behavior:contain}
.reply-caption{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:9px}
.demo-v24 .reply-label{font-family:var(--mono);font-size:0.875rem;font-weight:500;color:#496680;letter-spacing:.045em;line-height:1.5;margin:0}
.reply-caption>span:last-child{font-size:0.875rem;color:#73889d;line-height:1.5}
.demo-v24 .demo-replies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.demo-v24 .reply-button{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:1rem;font-weight:550;line-height:1.35;min-height:46px;padding:9px 11px;border:1px solid #adbed1;border-radius:14px;background:#f8fafd;color:#163d61;text-align:left;transition:background .15s,border-color .15s,transform .15s}
.demo-v24 .reply-button:hover{background:#e8f4fc;border-color:#467b9c;transform:translateY(-1px)}
.demo-v24 .reply-button:focus-visible{outline:3px solid #168bb3;outline-offset:2px}
.demo-v24 .reply-button:disabled{opacity:.55;cursor:wait;transform:none}
.demo-v24 .reply-button:only-child,.demo-v24 .reply-reset{grid-column:1/-1;text-align:center}
.demo-v24 .reply-reset{background:#163d61;color:#fff;border-color:#163d61}
.demo-v24 .reply-reset:hover{background:#225078;color:#fff}
.phone-home{height:22px;display:grid;place-items:center;background:#fff;flex:none}
.phone-home span{width:106px;height:4px;border-radius:5px;background:#172539}
.phone-below{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 10px 0;line-height:1.4}
.phone-below>span{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:0.875rem;letter-spacing:.045em;color:#91aebb}
.phone-below .status-dot{width:5px;height:5px;box-shadow:none}
.phone-reset{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 2px;color:#a7becd;font-size:0.875rem}
.phone-reset .icon{width:12px;height:12px}
.demo-business-side{min-width:0;padding-top:2px;display:flex;flex-direction:column}
.demo-context .micro-label{font-size:0.875rem;color:#70cfe4;margin:0 0 15px}
.demo-context h3{font-size:1.75rem;line-height:1.2;letter-spacing:-.04em;max-width:425px;font-weight:600}
.demo-context>p:last-child{font-size:1rem;line-height:1.8;color:#96afbd;max-width:450px;margin-top:15px}
.demo-state-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 22px;padding:14px 0;border-top:1px solid #263b48;border-bottom:1px solid #263b48}
.demo-state{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:500;color:#a6d6e4;line-height:1.5}
.demo-state>span{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.demo-state[data-state=booked]{color:#7ee3b9}
.demo-state[data-state=handoff],.demo-state[data-state=safety]{color:#f1c279}
.demo-state[data-state=paused],.demo-state[data-state=opted-out]{color:#bdc9d5}
.state-annotation{font-family:var(--mono);font-size:0.875rem;color:#71909f;letter-spacing:.05em;white-space:nowrap}
.demo-v24 .automation-side{background:transparent;border:0;padding:0;min-width:0}
.demo-v24 .automation-side>summary{padding:0 0 15px;min-height:38px;gap:9px}
.demo-v24 .automation-heading{font-size:1.125rem;font-weight:550;gap:8px}
.demo-v24 .automation-heading .icon{width:18px;height:18px;color:#66dcb4}
.demo-v24 .action-count{font-size:0.875rem;padding:3px 7px;color:#9fbbc5;border-color:#2c4753;border-radius:5px}
.demo-v24 .automation-content{padding:0}
.demo-v24 .automation-log{margin:0;padding:0 8px 0 0;min-height:0;max-height:328px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#375663 transparent;overscroll-behavior:contain;outline-offset:-2px}
.demo-v24 .automation-log li{gap:13px;padding:1px 0 19px;min-height:62px}
.demo-v24 .automation-log li:last-child{padding-bottom:8px}
.demo-v24 .automation-log li:not(:last-child):before{left:14px;top:30px;height:calc(100% - 30px);background:#2c4a51}
.demo-v24 .action-check{width:29px;height:29px;margin-top:1px;color:#75d7b4;border:1px solid #315e53;background:#102d28;position:relative;z-index:1}
.demo-v24 .action-check .icon{width:13px;height:13px}
.demo-v24 .action-check.action-brand{background:#f8fafc;border:1px solid #e5ecf1;border-radius:8px}
.demo-v24 .action-brand img{display:block;width:19px;height:19px;object-fit:contain;max-width:100%;filter:none}
.demo-v24 .automation-log li.is-amber .action-check:not(.action-brand){color:#efbd73;background:#2e251b;border-color:#6b5130}
.demo-v24 .automation-log strong{font-size:1rem;font-weight:600;line-height:1.5;color:#e1edf3;letter-spacing:-.01em}
.demo-v24 .automation-log p{font-size:1rem;color:#91afbd;line-height:1.7;margin-top:4px}
.demo-v24 .demo-result{border-radius:11px;margin:18px 0 0;padding:16px 18px;background:#14362c44;border:1px solid #315d50}
.demo-v24 .demo-result strong{font-size:1rem;line-height:1.6;font-weight:600;color:#8be5c1}
.demo-v24 .demo-result p{font-size:1rem;line-height:1.8;margin-top:5px;color:#abc7bd}
.demo-v24 .demo-result[data-state=handoff],.demo-v24 .demo-result[data-state=safety]{background:#40301b33;border-color:#6e5835}
.demo-v24 .demo-result[data-state=handoff] strong,.demo-v24 .demo-result[data-state=safety] strong{color:#f0c883}
.demo-v24 .demo-result[data-state=handoff] p,.demo-v24 .demo-result[data-state=safety] p{color:#c4bbab}
.demo-v24 .demo-result[data-state=paused],.demo-v24 .demo-result[data-state=opted-out]{background:#142331;border-color:#334a5d}
.demo-v24 .demo-result[data-state=paused] strong,.demo-v24 .demo-result[data-state=opted-out] strong{color:#d0deeb}
.demo-explore{display:flex;gap:11px;align-items:flex-start;background:#12212c99;border:1px solid #263f4c;border-radius:10px;padding:15px 16px;margin-top:23px}
.demo-explore>.icon{width:16px;height:16px;color:#87b9cc;margin-top:2px}
.demo-explore p{font-size:1rem;line-height:1.8;color:#9bb3c2}
.demo-explore strong{display:block;color:#cbdce6;font-size:1rem;font-weight:500;margin-bottom:2px}
.demo-v24 .demo-next{margin-top:24px;gap:19px;display:flex;flex-wrap:wrap;align-items:center}
.demo-v24 .demo-next .button{font-size:1rem;padding:12px 17px;min-height:46px}
.demo-v24 .demo-next .text-button{font-size:1rem;min-height:44px}
.demo-v24 .demo-disclosure{display:flex;align-items:center;gap:10px;border-top:1px solid #223644;padding:16px 26px;background:#0c192388}
.demo-disclosure>.icon{width:15px;height:15px;color:#80a6b7}
.demo-disclosure>p{font-size:0.875rem;line-height:1.7;color:#91aebb;max-width:750px}
.demo-disclosure>span{font-family:var(--mono);font-size:0.875rem;letter-spacing:.035em;color:#87a5b3;margin-left:auto;white-space:nowrap}
.mobile-action-peek{display:none}
/* Real product marks retain their own colors; only the container is themed. */
.tool-symbol.brand-symbol{background:#f8fafc;border:1px solid #dce6ef;width:40px;height:40px;border-radius:10px;padding:7px;display:grid;place-items:center;box-shadow:0 2px 8px #0001}
.tool-symbol.brand-symbol img{width:100%;height:100%;display:block;object-fit:contain;filter:none!important;opacity:1!important}
.mobile-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mobile-tools>span{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;color:#d9e6ee;font-size:0.875rem}
.mobile-tools img{display:block;width:21px;height:21px;object-fit:contain;background:#fff;border-radius:5px;padding:3px;filter:none!important}
.product-mark-note{font-size:0.875rem;color:#829aaa;line-height:1.8;margin-top:16px}
@media(min-width:861px){.demo-v24 .automation-side>summary>.icon:last-child{display:none}}
@media(max-width:1100px) and (min-width:861px){.demo-v24 .demo-panel{grid-template-columns:minmax(305px,.92fr) minmax(0,1.08fr);padding:31px 26px;gap:35px}.demo-phone{height:695px}.demo-context h3{font-size:1.5625rem}.demo-v24 .demo-next{gap:8px}.demo-v24 .demo-next .button{font-size:1rem;padding-inline:13px}.phone-perspective .micro-label{font-size:0.875rem}.phone-perspective>span:last-child{font-size:0.875rem}.demo-state-bar .state-annotation{font-size:0.875rem}.demo-v24 .reply-button{font-size:1rem}}
@media(max-width:860px){
 .demo-v24 .demo-panel{grid-template-columns:1fr;gap:28px;padding:29px 25px 26px}
 .demo-v24 .demo-toolbar{padding:13px 15px;gap:12px}
 .demo-v24 .demo-tab{font-size:1rem;padding:11px 14px;gap:6px}
 .demo-v24 .demo-mode{font-size:0.875rem}
 .phone-stage{max-width:405px}
 .demo-phone{max-width:378px}
 .demo-business-side{max-width:530px;width:100%;justify-self:center;border-top:1px solid #2b414e;padding-top:24px}
 .demo-context .micro-label{margin-bottom:11px}
 .demo-context h3{font-size:1.625rem;max-width:none}
 .demo-context>p:last-child{font-size:1rem;margin-top:11px;max-width:none}
 .demo-state-bar{margin:18px 0 15px;padding:11px 0}
 .demo-v24 .automation-side{border:1px solid #2b414e;border-radius:9px}
 .demo-v24 .automation-side>summary{padding:14px;min-height:48px}
 .demo-v24 .automation-content{padding:0 14px 13px}
 .demo-v24 .automation-log{max-height:360px}
 .demo-v24 .automation-heading{font-size:1rem}
 .demo-v24 .automation-log strong{font-size:1rem}
 .demo-v24 .automation-log p{font-size:1rem}
 .mobile-action-peek{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid #31505d;background:#142c38;border-radius:9px;padding:12px 14px;margin-bottom:12px;min-height:59px}
 .mobile-action-peek small{display:block;font-family:var(--mono);font-size:0.875rem;letter-spacing:.06em;color:#83b1c0;margin-bottom:4px}
 .mobile-action-peek strong{display:block;font-size:1rem;color:#d3edf5;font-weight:500}
 .mobile-action-peek .icon{width:15px;height:15px;color:#9cc7d2}
 .demo-v24 .demo-disclosure{padding:15px 19px;align-items:flex-start}
 .demo-disclosure>span{display:none}
 .demo-disclosure>p{font-size:0.875rem}
 .demo-disclosure>.icon{margin-top:2px}
 .demo-v24 .demo-next{margin-top:19px}
}
@media(max-width:680px){
 .demo-section>.container{width:calc(100% - 32px)}
 .demo-section .section-heading{margin-bottom:26px}
 .demo-section .split-heading>p{font-size:1rem;line-height:1.8;margin-top:18px;max-width:440px}
 .demo-v24{border-radius:16px}
 .demo-v24 .demo-toolbar{display:block;padding:11px 8px}
 .demo-v24 .demo-tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px}
 .demo-v24 .demo-tab{justify-content:center;padding:10px 5px;font-size:1rem;gap:6px;min-height:44px;border-radius:8px;white-space:nowrap}
 .demo-v24 .demo-tab .icon{width:14px;height:14px}
 .demo-v24 .demo-mode{display:none}
 .demo-v24 .demo-panel{padding:20px 14px 22px;gap:20px}
 .phone-perspective{margin:0 2px 16px}
 .phone-perspective .micro-label{font-size:0.875rem}
 .phone-perspective>span:last-child{font-size:0.875rem}
 .demo-phone{height:668px;border-radius:40px;padding:8px}
 .demo-phone .phone-screen{border-radius:31px}
 .phone-statusbar{padding:2px 20px 0;height:41px;font-size:1rem}
 .phone-camera{width:89px;height:24px;top:9px}
 .phone-camera:after{top:8px}
 .phone-contact{padding:12px 12px;gap:8px}
 .phone-contact strong{font-size:1.125rem}
 .phone-contact>div>span{font-size:0.875rem}
 .phone-business-avatar{width:33px;height:33px}
 .phone-business-avatar svg{width:24px;height:24px}
 .phone-contact-info{width:16px;height:16px;font-size:1rem;line-height:13px}
 .demo-v24 .demo-thread{font-size:1.125rem;padding:16px 12px;gap:10px;min-height:145px}
 .demo-v24 .demo-message{font-size:1.125rem;padding:10px 12px;line-height:1.5;max-width:92%}
 .demo-v24 .demo-message.system{font-size:0.875rem}
 .demo-v24 .reply-area{padding:11px 11px 6px;max-height:257px;min-height:0}
 .demo-v24 .reply-label{font-size:0.875rem}
 .reply-caption>span:last-child{font-size:0.875rem}
 .demo-v24 .demo-replies{gap:6px}
 .demo-v24 .reply-button{font-size:1rem;min-height:46px;padding:9px 9px;line-height:1.32;border-radius:12px}
 .phone-home{height:20px}
 .phone-below{margin:16px 3px 0;gap:8px}
 .phone-below>span{font-size:0.875rem}
 .phone-reset{font-size:0.875rem;gap:4px;min-height:32px}
 .phone-reset .icon{width:12px;height:12px}
 .demo-context h3{font-size:1.5625rem;line-height:1.25}
 .demo-context>p:last-child{font-size:1rem;line-height:1.8}
 .demo-v24 .demo-context .micro-label{font-size:0.875rem}
 .demo-state{font-size:0.875rem}
 .state-annotation{font-size:0.875rem}
 .demo-v24 .demo-result{padding:15px 14px;margin-top:16px}
 .demo-v24 .demo-result strong{font-size:1rem}
 .demo-v24 .demo-result p{font-size:1rem}
 .demo-explore{margin-top:15px;padding:13px}
 .demo-explore p{font-size:1rem}
 .demo-v24 .demo-next{display:grid;grid-template-columns:1fr;gap:6px}
 .demo-v24 .demo-next .button{font-size:1rem;min-height:47px;padding:11px 13px}
 .demo-v24 .demo-next .text-button{font-size:1rem;justify-self:center;min-height:39px}
 .demo-v24 .demo-disclosure{padding:14px 15px;gap:8px}
 .demo-disclosure>p{font-size:0.875rem}
 .demo-disclosure>.icon{width:13px;height:13px}
 .demo-section .section-footnote{font-size:0.875rem;line-height:1.85}
 .mobile-tools{gap:8px}
 .mobile-tools>span{font-size:0.875rem;padding:5px 8px;gap:5px}
 .mobile-tools img{width:21px;height:21px}
 .product-mark-note{font-size:0.875rem;margin-top:12px}
}
@media(max-width:370px){
 .demo-section>.container{width:calc(100% - 24px)}
 .demo-v24 .demo-panel{padding:18px 10px 20px}
 .demo-v24 .demo-tab{font-size:0.875rem;gap:4px}
 .demo-v24 .demo-tab .icon{width:12px;height:12px}
 .demo-phone{height:686px;padding:7px;border-radius:36px}
 .demo-phone .phone-screen{border-radius:28px}
 .phone-contact{padding-inline:10px;gap:6px}
 .phone-contact strong{font-size:1rem}
 .phone-contact-info{display:none}
 .phone-statusbar{padding-inline:15px}
 .phone-camera{width:81px}
 .demo-v24 .demo-message{font-size:1rem;padding:9px 10px}
 .demo-v24 .reply-button{font-size:1rem;padding:9px 8px;min-height:47px}
 .demo-v24 .reply-area{padding-inline:9px}
 .phone-perspective>span:last-child{font-size:0.875rem}
 .state-annotation{display:none}
 .demo-context h3{font-size:1.4375rem}
 .demo-v24 .automation-heading{font-size:1rem}
}
@media(prefers-reduced-motion:reduce){.demo-v24 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.demo-v24 .automation-log li.is-amber .action-check.action-brand{background:#f8fafc;border:1px solid #e5ecf1;border-radius:8px}