/* The offer sits beside the existing Next action; details stay in dialogs. */
.story-actions{display:flex;align-items:center;gap:22px;margin-top:21px}
.story-actions .next-button{margin-top:0;flex-shrink:0}
.price-summary{text-align:left;padding:2px 0;line-height:1.4}
.price-line{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.price-line strong{font-size:21px;font-weight:500;letter-spacing:-.03em}
.price-line>span{font-size:11px;color:var(--muted)}
.trial-line{display:block;color:#365d4c;font-size:11px;margin-top:2px}
.price-summary:hover .price-line strong,.free-plan-note:hover{color:var(--accent)}
.free-plan-note{font-size:12px;color:var(--muted);margin-top:13px;padding:0;text-align:left;border-bottom:1px dotted #a5a5a5;line-height:1.6}
.footer-actions{display:flex;gap:23px;align-items:center}
.plan-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:23px}
.plan-option{border-top:3px solid #cce8d6;padding-top:12px}.plan-option+article{border-color:var(--coral)}
.plan-option h3{font-size:16px;font-weight:500;margin:0}
#dialog-body .plan-amount{font-size:31px;color:var(--ink);font-weight:500;line-height:1.3;margin-top:9px;letter-spacing:-.04em}
.plan-amount span{font-size:12px;font-weight:400;margin-left:5px;letter-spacing:0}
#dialog-body .plan-option>p:last-child{margin-top:9px;font-size:13px;line-height:1.6}
.plan-calculator{display:grid;grid-template-columns:1fr 72px;gap:9px 18px;align-items:center;padding:17px 0;margin-top:20px;border-block:1px solid #e5e7e8}
.plan-calculator label{font-size:13px;font-weight:500}
#chat-count{font:inherit;width:72px;border:1px solid #b0b6bd;border-radius:6px;padding:8px;color:var(--ink);background:#fff}
#dialog-body #price-estimate{grid-column:1/-1;font-size:13px;margin:0;color:#365d4c;line-height:1.6}
#price-estimate[data-plan=invalid]{color:#9f412f!important}
#dialog-body .release-note{font-size:12px;line-height:1.65;background:#f1f3f4;padding:13px 15px;border-radius:8px;color:#53575c}
.setup-steps{list-style:none;padding:0;margin:24px 0 0;counter-reset:setup;display:grid;gap:20px}
.setup-steps li{counter-increment:setup;position:relative;padding-left:40px}
.setup-steps li::before{content:counter(setup);position:absolute;left:0;top:0;background:#ffedb7;color:#655021;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:12px;font-weight:500}
.setup-steps strong{display:block;font-size:14px;font-weight:500;margin-bottom:4px}
.setup-steps li>span{display:block;font-size:13px;line-height:1.6;color:var(--muted)}
.install-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:17px;font-size:12px}
.copy-site-button{border:1px solid #a24b38;border-radius:22px;padding:9px 16px;color:var(--accent)}
.install-actions a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
#dialog-body .setup-footnote{font-size:11px;line-height:1.7;color:var(--muted)}
.store-link{display:inline-block;background:var(--coral);padding:11px 20px;border-radius:24px;margin-top:20px;font-size:13px;font-weight:500}
#dialog-done{background:#f1f3f4;color:#53575c}
input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Calendar scenarios use the same window, scale and controls as the first demo. */
.scene-symbol{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;line-height:1;width:18px}
.demo-scene[data-layout=calendar]{grid-template-columns:.88fr 1.12fr;background:#fff}
.calendar-chat .chat-body{padding-top:22px;gap:16px}
.calendar-chat .chat-header{min-height:53px}
.chat-derived{display:flex;align-items:center;gap:5px;font-size:8px;line-height:1.5;color:#365d4c;padding-top:6px}
.calendar-surface{position:relative;overflow:hidden;background:#fff}
.calendar-head{display:flex;align-items:center;gap:7px;padding:13px 12px;border-bottom:1px solid #e3e6ea;min-height:47px;font-size:10px;background:#fff;color:#5f6368}
.calendar-head .scene-symbol{color:#3b72cf;font-size:21px}
.calendar-head strong{font-weight:500;color:#2c333f;white-space:nowrap}
.calendar-head>span:last-child{margin-left:auto;font-size:8px;white-space:nowrap}
.calendar-week{display:grid;grid-template-columns:repeat(5,1fr);padding:9px 7px 7px 40px;border-bottom:1px solid #e3e6ea}
.calendar-day{display:grid;justify-items:center;gap:2px;font-size:7px;color:#70757a}
.calendar-day strong{font-size:18px;font-weight:400;height:29px;width:29px;display:grid;place-items:center;color:#3c4043}
.calendar-day.active-day strong{border-radius:50%;background:#3b72cf;color:#fff}
.calendar-grid{display:flex;height:185px}
.calendar-hours{width:40px;flex-shrink:0;display:flex;flex-direction:column;justify-content:space-evenly;font-size:7px;color:#70757a;padding-right:5px;text-align:right}
.calendar-lines{position:relative;flex:1;margin:0 7px 0 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 60px,#e7e9ed 61px,#e7e9ed 62px),repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 1px),#e7e9ed calc(20% - 1px),#e7e9ed 20%)}
.calendar-block{position:absolute;top:62px;left:60%;width:calc(40% - 4px);min-height:63px;padding:7px;border-radius:5px;background:#d3e3fd;color:#184b97;text-align:left;animation:scene-in .35s ease both}
.calendar-block strong{display:block;font-size:9px;line-height:1.45;font-weight:500}.calendar-block span{font-size:8px}
.calendar-empty{position:absolute;inset:62px 7px auto 7px;font-size:10px;line-height:1.6;text-align:center;color:#70757a;background:#fffffff2;padding:16px 12px}
.calendar-legend{display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:8px;color:#5f6368}
.calendar-legend i,.event-eyebrow i{width:7px;height:7px;border-radius:2px;background:#3b72cf;flex-shrink:0}
.event-details{padding:15px;background:#fff;border:1px solid #e0e4e9;border-radius:9px;box-shadow:0 3px 12px #20212410;animation:scene-in .3s ease both}
.calendar-surface>.event-details{position:absolute;inset:59px 10px 28px;overflow:auto;scrollbar-width:thin}
.event-eyebrow{display:flex;gap:5px;align-items:center;color:#70757a;font-size:8px;margin-bottom:7px}
.event-details h3{font-size:15px;font-weight:500;letter-spacing:-.02em;margin:0 0 4px;line-height:1.35}
.event-date{font-size:10px;color:#434b57;margin-bottom:12px}
.event-context{font-size:10px;line-height:1.5;color:#5f6368}
.event-reminder{display:flex;align-items:flex-start;gap:5px;font-size:9px;line-height:1.5;color:#5f6368;margin:12px 0}
.event-reminder .scene-symbol{font-size:13px;width:13px}
.event-links{display:grid;gap:7px;margin-top:12px}
.event-action{min-height:29px;border:1px solid #bcc9dd;border-radius:6px;padding:6px 8px;text-align:left;color:#245eaa;font-size:9px;font-weight:500;line-height:1.4}
.event-action:hover{background:#f1f6ff}.event-primary{background:#d3e3fd;border-color:#d3e3fd;color:#184b97}
.event-back{display:flex;align-items:center;gap:5px;color:#245eaa;font-size:9px;padding:0;margin-bottom:12px;text-align:left}
.prepared-chat{display:flex;flex-direction:column;min-height:0;background:#efeee8;height:100%;animation:scene-in .3s ease both}
.calendar-surface>.prepared-chat{position:absolute;inset:0}
.prepared-chat .chat-header{min-height:47px;background:#fff}
.prepared-body{display:flex;flex-direction:column;min-height:0;flex:1;padding:14px 15px 32px;gap:7px}
.prepared-body .event-back{margin-bottom:2px}
.prepared-context{font-size:9px;color:#5f6368;line-height:1.5;margin-bottom:2px}
.prepared-body label{font-size:10px;font-weight:500}
.prepared-body textarea{font-size:11px;line-height:1.6;padding:10px;width:100%;flex:1;min-height:75px;resize:none;border:1px solid #c0c7c1;border-radius:6px;background:#fffdf9;color:#24243b}
.prepared-note{font-size:8px;color:#5f6368}
.prepared-body>.event-action{flex-shrink:0}
.demo-scene[data-layout=followup]{grid-template-columns:.75fr 1.25fr;background:#e9f0ec}
.phone-side{display:grid;place-items:center;min-width:0;padding:9px 16px 25px}
.phone-device{height:290px;width:164px;max-width:100%;border:5px solid #313a38;border-radius:26px;background:linear-gradient(155deg,#dde9d3,#c2dad5);position:relative;padding:10px 8px;box-shadow:0 5px 15px #313a3820}
.phone-camera{width:44px;height:9px;border-radius:8px;background:#313a38;margin:-6px auto 22px}
.phone-time{font-size:33px;line-height:1.2;text-align:center;color:#3b4b44;font-weight:500;letter-spacing:-.05em}
.phone-date{text-align:center;font-size:8px;color:#3b4b44;margin-top:3px}
.phone-notification{display:flex;flex-direction:column;width:100%;gap:6px;background:#ffffffd9;border:1px solid #fff;border-radius:12px;padding:10px 8px;text-align:left;margin-top:17px;box-shadow:0 2px 5px #313a380c}
.notification-top{display:flex;align-items:center;gap:3px;font-size:6px;color:#5f6368;white-space:nowrap}.notification-top>.scene-symbol{font-size:13px;width:12px;color:#3b72cf}.notification-top>span:last-child{margin-left:auto;font-size:6px}
.phone-notification strong{font-size:10px;font-weight:500;color:#2e3b32}
.phone-notification>span:not(.notification-top){font-size:8px;line-height:1.5;color:#52615c}
.phone-notification>.notification-open{color:#245eaa!important;font-weight:500}
.phone-home{position:absolute;width:45px;height:3px;border-radius:2px;background:#536e6480;bottom:8px;left:50%;transform:translateX(-50%)}
.phone-target{min-width:0;padding:16px 20px 27px 0;overflow:hidden}
.phone-intro{height:100%;display:flex;flex-direction:column;justify-content:center;max-width:250px;padding-bottom:15px}
.flow-label{display:flex;align-items:center;gap:6px;color:#537364;font-size:9px;margin-bottom:12px}
.phone-intro h3{font-size:21px;font-weight:500;line-height:1.4;letter-spacing:-.035em;margin:0 0 13px}
.phone-intro p{font-size:10px;color:#5f6368;line-height:1.6;margin-bottom:15px}
.phone-intro .event-action{align-self:flex-start;padding-inline:13px}
.phone-event{height:100%;overflow:auto;background:#fff;border:1px solid #d6dfd9;border-radius:9px;scrollbar-width:thin}
.phone-event .calendar-head{padding-block:10px;min-height:41px}.phone-event .calendar-head>span:last-child{display:none}
.phone-event .event-details{border:0;border-radius:0;box-shadow:none;padding:12px 15px 18px}
.phone-target>.prepared-chat{border:1px solid #d6dfd9;border-radius:9px;overflow:hidden;background:#fffdf9}
.phone-target .prepared-body{padding-bottom:13px}
.demo-scene[data-layout=payments]{grid-template-columns:.82fr 1.18fr;background:#f6f2ee}
.payment-settings{display:flex;flex-direction:column;background:#fff8ee;border-right:1px solid #e5dfd7;min-width:0;overflow:auto;scrollbar-width:thin}
.payment-settings .panel-brand{min-height:47px}
.payment-settings-body{padding:12px 14px 31px}
.payment-settings h3{font-size:12px;line-height:1.5;font-weight:500;margin:0 0 4px}
.payment-client{color:#746c6c;font-size:8px;line-height:1.5}
.payment-settings dl{margin:14px 0 10px;display:grid;gap:10px}
.payment-settings dl>div{border-bottom:1px solid #e5dfd7;padding-bottom:7px}
.payment-settings dt{color:#746c6c;font-size:8px;margin-bottom:3px}
.payment-settings dd{margin:0;font-size:11px;line-height:1.5}
.payment-rule-note{font-size:8px;line-height:1.6;color:#746c6c;margin:5px 0 11px}
.payment-target{overflow:auto;min-width:0;background:#fff;position:relative;scrollbar-width:thin;padding-bottom:26px}
.payment-target>.event-details{border:0;border-radius:0;box-shadow:none;padding:13px 18px 20px}
.event-payment{display:flex;align-items:baseline;gap:10px;margin-top:9px}.event-payment strong{font-size:17px;font-weight:500}.event-payment span{font-size:8px;color:#70757a}
.payment-toggle{margin-top:10px;color:#365d4c;border-color:#aacbb8}
.payment-status{display:flex;gap:4px;align-items:center;margin:9px 0 0;font-size:8px;color:#365d4c}
.payment-is-paid h3{color:#365d4c}
.payment-waiting{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 15px;text-align:center;color:#70757a;min-height:220px;gap:9px}
.payment-waiting>.scene-symbol,.payment-waiting>span>.scene-symbol{font-size:36px;line-height:1.3;width:auto;color:#adc4e6}
.payment-waiting strong{font-size:12px;font-weight:500}.payment-waiting p{font-size:10px}
.payment-target>.prepared-chat{position:absolute;inset:0}
@media(min-width:901px) and (max-width:1100px){.story-actions{gap:14px}.price-line strong{font-size:19px}.price-line>span{font-size:10px}.trial-line{font-size:10px}.calendar-head{gap:4px;padding-inline:8px}.calendar-head strong{font-size:9px}.calendar-head>span:last-child{display:none}.calendar-surface>.event-details{inset-inline:7px;padding:12px}.event-details h3{font-size:13px}.event-action{font-size:8px}.phone-target{padding-right:12px}.phone-side{padding-inline:10px}.phone-device{width:150px}.prepared-body{padding-inline:10px}.prepared-body textarea{font-size:10px}}
@media(max-width:900px) and (min-width:681px){.phone-target{padding:24px 30px 35px 0}.phone-side{padding-top:20px}.phone-device{width:190px;height:315px}.phone-notification{padding:12px}.notification-top{font-size:7px}.phone-notification strong{font-size:12px}.phone-notification>span:not(.notification-top){font-size:10px}.event-details h3{font-size:17px}.event-date,.event-context{font-size:11px}.event-action{font-size:10px;min-height:33px}.prepared-body textarea{font-size:12px}.payment-settings h3{font-size:14px}.payment-settings dd{font-size:13px}}
@media(max-width:680px){.story-actions{margin-top:20px;gap:24px}.price-line strong{font-size:21px}.free-plan-note{font-size:12px}.footer-actions{gap:15px}.footer{gap:12px;flex-wrap:wrap}.plan-options{gap:13px}.plan-option h3{font-size:14px}#dialog-body .plan-amount{font-size:26px}.plan-amount span{display:block;margin:1px 0 0;font-size:11px}#dialog-body .plan-option>p:last-child{font-size:12px}.plan-calculator{gap:9px 12px}.setup-steps{gap:19px}.setup-steps li{padding-left:36px}.setup-steps li>span{font-size:12px}.install-actions{font-size:12px}
  .demo-scene[data-layout=calendar]{grid-template-columns:1fr;grid-template-rows:168px 1fr}.calendar-chat .chat-header{min-height:34px}.calendar-chat .chat-body{padding:9px 11px;gap:7px}.calendar-chat .message{font-size:10px;max-width:92%;padding:5px 8px 3px}.calendar-chat .chat-derived{display:none}.calendar-chat .chat-body{overflow:auto}.calendar-head{min-height:43px;padding:10px 11px;font-size:10px}.calendar-head>span:last-child{font-size:8px}.calendar-week{padding-block:7px}.calendar-grid{height:190px}.calendar-surface>.event-details{inset:49px 10px 28px;padding:12px 13px}.event-details h3{font-size:16px}.event-date,.event-context{font-size:11px}.event-date{margin-bottom:8px}.event-reminder{font-size:10px;margin-block:9px}.event-links{gap:6px;margin-top:9px}.event-action{font-size:10px;min-height:31px}.event-back{font-size:10px}.calendar-surface>.prepared-chat .chat-header{min-height:34px}.prepared-body{padding:10px 12px 27px;gap:6px}.prepared-body textarea{font-size:12px;padding:8px;min-height:64px}.prepared-body label{font-size:11px}.prepared-note{font-size:9px}.prepared-context{font-size:10px}
  .demo-scene[data-layout=followup]{grid-template-columns:1fr;grid-template-rows:230px 1fr}.phone-side{padding:10px 10px 0;align-items:start}.phone-device{width:174px;height:278px;transform:translateY(0);border-radius:24px 24px 0 0}.phone-camera{margin-bottom:12px}.phone-time{font-size:31px}.phone-notification{margin-top:10px;padding:10px}.phone-notification strong{font-size:11px}.phone-notification>span:not(.notification-top){font-size:9px}.phone-home{display:none}.phone-target{padding:8px 12px 28px;z-index:1;background:#e9f0ec}.phone-intro{max-width:none;padding:2px 7px;justify-content:center}.phone-intro h3{font-size:18px;margin-bottom:10px}.phone-intro p{font-size:11px;margin-bottom:13px}.flow-label{font-size:10px;margin-bottom:9px}.phone-event .event-details{padding:12px}.phone-event .calendar-head{min-height:34px;padding-block:7px}.phone-target .prepared-body{padding:9px 11px 10px}.phone-target .prepared-chat .chat-header{min-height:34px}.phone-target .event-context{font-size:11px}
  .demo-scene[data-layout=payments]{grid-template-columns:1fr;grid-template-rows:180px 1fr}.payment-settings{border-right:0;border-bottom:1px solid #e5dfd7}.payment-settings .panel-brand{min-height:34px;height:34px;padding:7px 12px}.payment-settings-body{padding:7px 12px 10px}.payment-settings h3{font-size:11px;margin-bottom:2px}.payment-client{font-size:8px}.payment-settings dl{grid-template-columns:.65fr .8fr 1.25fr;gap:8px;margin:8px 0}.payment-settings dt{font-size:8px}.payment-settings dd{font-size:10px}.payment-settings .event-action{display:none}.payment-rule-note{font-size:8px;margin:4px 0 0}.payment-target>.event-details{padding:11px 13px 16px}.event-payment{margin-top:8px;gap:10px}.event-payment strong{font-size:18px}.event-payment span{font-size:9px}.payment-toggle{font-size:10px;margin-top:8px}.payment-status{font-size:9px}.payment-target .event-details h3{font-size:15px}.payment-target .event-reminder{margin-block:8px}.payment-target .event-date{margin-bottom:6px}.payment-target .event-context{font-size:10px}.payment-target .event-links{gap:5px}.payment-target .event-action{min-height:29px}.payment-target .prepared-chat .chat-header{min-height:34px}
}
@media(max-width:360px){.early-button{font-size:9px;padding-inline:9px}.header-right{gap:4px}.logo img:last-child{width:47px}.logo img:first-child{width:27px;height:27px}.languages :is(button,a){padding-inline:2px;min-width:20px}.story-actions{gap:17px}.price-line strong{font-size:20px}.price-line>span{font-size:10px}.event-details h3{font-size:14px}.event-action{font-size:9px}.event-context,.event-date{font-size:10px}.phone-target .prepared-body textarea{font-size:11px}.payment-settings dd{font-size:9px}.payment-target .event-details h3{font-size:14px}.payment-target .event-payment span{font-size:8px}}
