@font-face{font-family:PanelGeist;src:url('/assets/brand/dots-20261019/cabinet/geist.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:PanelInter;src:url('/assets/brand/dots-20261019/cabinet/inter-subset.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--ink:#171717;--secondary:#62625D;--warm:#F0F0EC;--focus:#3758D8;font-family:PanelGeist,PanelInter,Inter,Arial,sans-serif;color:var(--ink);background:#FAFAF8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;background:#FAFAF8}
button,textarea{font:inherit}
button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.panel-review{display:grid;place-items:center;min-height:100vh;padding:28px 48px;background:#FAFAF8}
.benefit-layout{display:grid;grid-template-columns:736px 408px;grid-template-rows:560px 44px;column-gap:64px;row-gap:20px;align-items:center;width:min(1208px,100%);margin:0 auto}
.benefit-stage{position:relative;display:grid;place-items:center;width:736px;height:560px;padding:32px;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at 24% 15%,#fff4c0 0,transparent 49%),radial-gradient(ellipse at 92% 88%,#f5bc83 0,transparent 48%),linear-gradient(135deg,#f7ea91 0%,#eaf0a3 55%,#daeb96 100%)}
.chat-window{position:relative;display:flex;flex-direction:column;width:600px;height:496px;overflow:hidden;border:1px solid #e8e8e5;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 16px 40px rgba(35,33,24,.12)}
.chat-head{display:flex;flex:none;align-items:center;gap:12px;height:56px;min-height:56px;padding:0 16px;border-bottom:1px solid #ededea;background:#fff}
.chat-head img{display:block;flex:none;width:38px;height:28px;object-fit:contain}
.chat-brand{display:grid;flex:1;gap:1px;min-width:0}
.chat-head b{font-size:15px;font-weight:620;line-height:19px}
.chat-head small{overflow:hidden;color:var(--secondary);font-size:14px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}
.chat-reset{flex:none;min-height:44px;padding:0 14px;border:1px solid transparent;border-radius:999px;background:#F0F0EC;color:#4f4f4b;font-size:13px;font-weight:520;cursor:pointer}
.chat-reset:hover{background:#e8e8e3}
.chat-messages{display:flex;flex:1;flex-direction:column;gap:12px;min-height:0;padding:16px 20px 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d5d5cf transparent;background:#fff}
.chat-date{align-self:center;margin-bottom:2px;color:var(--secondary);font-size:14px;line-height:20px}
.chat-bubble{display:grid;gap:4px;max-width:84%;padding:11px 15px;border-radius:20px}
.chat-bubble b,.typing-bubble>b{font-size:14px;font-weight:600;line-height:18px}
.chat-bubble p{margin:0;font-size:18px;line-height:26px;overflow-wrap:anywhere}
.chat-bubble time{justify-self:end;color:var(--secondary);font-size:14px;line-height:18px}
.buyer-bubble{align-self:flex-end;border-radius:20px;background:#4265EE;color:#fff}.buyer-bubble time{color:#fff}
.assistant-bubble{align-self:flex-start;padding:11px 15px;border-radius:20px;background:#F0F0EC;color:var(--ink)}
.assistant-bubble b,.typing-bubble>b{color:#5b5b56}
.typing-bubble{display:flex;align-items:center;gap:10px;align-self:flex-start;min-height:36px;padding:8px 14px;border:0;border-radius:20px;background:#F0F0EC;color:var(--ink)}
.typing-bubble[hidden]{display:none}
.typing-dots{display:flex;align-items:center;gap:4px;height:16px}
.typing-dots i{width:5px;height:5px;border-radius:50%;background:#73736d}
.chat-composer{display:flex;flex:none;align-items:center;gap:10px;height:64px;min-height:64px;margin:0 16px 16px;padding:6px 7px 6px 18px;border:1px solid #e6e6e6;border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.chat-composer textarea{display:block;flex:1;min-width:0;height:42px;max-height:42px;resize:none;padding:9px 0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px;line-height:24px;white-space:nowrap;overflow:hidden}
.chat-composer textarea::placeholder{color:#777771;opacity:1}
.chat-composer.is-demo-focused{border-color:#d4d4d4;box-shadow:0 2px 8px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.025)} .chat-composer:not(.is-demo-focused):has(textarea:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.chat-composer button{position:relative;display:grid;place-items:center;flex:none;width:46px;height:46px;min-height:46px;border:0;border-radius:50%;background:#171717;color:#fff;cursor:default;transform:scale(1)}
.chat-composer button.is-pressing{transform:scale(.91)}
.chat-composer button:focus-visible{outline-color:var(--focus)}
.demo-cursor{width:26px;height:30px;position:absolute;z-index:5;left:0;top:0;pointer-events:none;transform:translate3d(0,0,0);opacity:0}
.demo-cursor[hidden]{display:none}
.benefit-copy{align-self:center;max-width:408px;color:var(--ink)}
.eyebrow{margin:0 0 18px;color:var(--secondary);font-size:14px;font-weight:570;line-height:20px}
h1{max-width:408px;margin:0;font-size:40px;font-weight:580;line-height:44px;letter-spacing:-1.1px;text-wrap:balance}
.benefit-copy>p:not(.eyebrow):not(.fiction-note){max-width:390px;margin:18px 0 0;color:#41413d;font-size:20px;line-height:30px}
.fiction-note{max-width:370px;margin:22px 0 0;color:var(--secondary);font-size:13px;line-height:19px}
.demo-controls{grid-column:1;display:flex;align-items:center;gap:10px}
.demo-controls[hidden]{display:none}
.demo-controls button{min-width:116px;min-height:44px;padding:0 17px;border:1px solid #e8e8e4;border-radius:999px;background:#F0F0EC;color:#33332f;font-size:14px;font-weight:520;cursor:pointer}
.demo-controls button:hover{background:#e9e9e4}
[data-benefit-demo].is-enhanced [data-message][hidden]{display:none}
[data-benefit-demo].is-enhanced [data-message]:not([hidden]){will-change:opacity,transform}
[data-benefit-demo].is-paused .chat-messages{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}




/* Soft transcript edge follows the supplied Dots recording; header/composer stay crisp. */
.chat-messages{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 5px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 5px),transparent)}

/* One simulated field click, then keyboard-only input with a clock-controlled caret. */
.chat-composer{position:relative}
.is-enhanced .chat-composer textarea{caret-color:transparent}
.chat-composer.is-demo-focused textarea::placeholder{color:transparent}
.demo-caret{position:absolute;left:0;top:0;width:1px;height:20px;background:#171717;pointer-events:none}
.demo-caret[hidden]{display:none}
.demo-cursor svg{display:block;transform-origin:3px 2px}
.demo-cursor.is-clicking svg{transform:scale(.91)}
.chat-composer:has(textarea:focus-visible){outline:2px solid var(--focus);outline-offset:3px}