/* Authored feature demonstrations. White space belongs to the human action. */
.motion-controls{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.motion-controls button{color:var(--blue);background:transparent;font-size:12px;font-weight:650;min-height:44px;padding:8px 0}
.motion-controls button:first-child{min-width:64px;text-align:left}
.motion-controls button:disabled{color:var(--soft);opacity:1}
.motion-track{display:block;flex:1;max-width:110px;height:2px;background:#dce4ef;overflow:hidden}
[data-motion-progress]{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(var(--clip-progress,1));transform-origin:left}
.motion-step-label{color:var(--soft);font-size:12px;min-height:2.8em;margin-top:4px}
.booking-motion{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;padding-block:64px 28px;position:relative;isolation:isolate}
.booking-motion-copy{padding-block:28px;z-index:2}
.booking-motion-copy h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;line-height:1.1}
.booking-motion-copy>p:not(.motion-step-label){font-size:15px;line-height:1.8;margin-top:24px;max-width:39ch;color:var(--soft)}
.booking-story-steps{padding:0;margin:30px 0;list-style:none;display:grid;gap:12px;font-size:13px;font-weight:600}
.booking-story-steps li{display:flex;gap:12px;align-items:center}
.booking-story-steps li>span{width:23px;height:23px;background:#edf2fd;color:#2655b9;border-radius:50%;display:grid;place-items:center;font-size:10px}
.booking-motion-copy p.booking-payoff{font-size:23px;letter-spacing:-.03em;line-height:1.45;color:var(--soft);margin-top:30px}
.booking-payoff strong{color:var(--blue);font-weight:650}
.booking-motion-copy p.booking-setting{font-size:11px;line-height:1.7;max-width:46ch;margin-top:24px}
.booking-theatre{height:710px;position:relative;overflow:hidden;isolation:isolate}
.booking-artwork{position:absolute;width:780px;height:1035.27px;top:-28px;left:50%;transform:translateX(-50%)}
.booking-artwork>img{width:100%;height:100%;max-width:none;object-fit:contain}
.booking-screen{position:absolute;left:32.8409%;top:9.3322%;width:32.7273%;height:53.7671%;border-radius:10.42% / 4.78%;overflow:hidden;background:#fff;color:#152335;font-family:Jakarta,system-ui,sans-serif;isolation:isolate}
.phone-status{position:absolute;inset:0 0 auto;height:36px;display:flex;align-items:center;justify-content:space-between;padding:8px 19px;font-size:11px;z-index:4}
.phone-status>span{display:flex;align-items:center;gap:1px}
.phone-status svg{width:17px;height:12px;stroke-width:1.7}
.phone-lock{position:absolute;inset:0;background:#f1f4fa;padding:60px 12px 20px;text-align:center;z-index:3;opacity:0;pointer-events:none;transition:opacity 380ms ease,transform 500ms var(--ease-out);transform:translateY(-14px)}
.phone-lock>span{font-size:11px;font-weight:600}
.phone-lock>strong{font-size:55px;line-height:1.2;font-weight:500;display:block;letter-spacing:-.04em;margin-top:8px}
.phone-notification{margin-top:48px;padding:13px;background:white;text-align:left;border-radius:14px;box-shadow:0 8px 22px -15px #29487540;transition:transform 700ms var(--ease-out),opacity 500ms ease}
.phone-notification>div{display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.03em;margin-bottom:8px}
.phone-notification small{margin-left:auto;font-size:8px;color:var(--soft)}
.message-app{width:18px;height:18px;background:#318661;border-radius:5px;display:grid;place-items:center;color:#fff}
.message-app svg{width:12px;height:12px}
.phone-notification>strong{font-size:11px;display:block;margin-bottom:4px}
.phone-notification p{font-size:11px;line-height:1.55}
.phone-conversation{position:absolute;inset:0;transition:opacity 300ms ease;opacity:1}
.phone-contact{position:absolute;top:36px;left:0;right:0;text-align:center;height:76px;border-bottom:1px solid #e8ecf1;background:#fff;z-index:2;padding-top:4px}
.phone-contact-logo{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#edf2fc;margin:auto auto 3px}
.phone-contact-logo img{width:16px;height:16px}
.phone-contact strong{display:block;font-size:11px;font-weight:700;line-height:1.4}
.phone-contact small{font-size:8px;color:var(--soft);display:block}
.phone-back{position:absolute;left:15px;top:16px;font-size:28px;color:var(--blue);line-height:1}
.phone-chat-window{position:absolute;inset:112px 0 45px;overflow:hidden;padding:10px 12px}
.phone-chat-track{display:flex;flex-direction:column;align-items:flex-start;gap:10px;transform:translateY(-244px);transition:transform 700ms var(--ease-out)}
.phone-time{align-self:center;font-size:8px;color:var(--soft);padding-bottom:4px}
.phone-bubble{font-size:11px;line-height:1.6;padding:10px 12px;border-radius:14px;max-width:96%;transition:opacity 380ms ease,transform 520ms var(--ease-out)}
.phone-incoming{background:#edf0f5;border-bottom-left-radius:4px}
.phone-outgoing{align-self:flex-end;background:#2655db;color:white;min-width:34px;text-align:center;border-bottom-right-radius:4px;font-size:13px;padding:7px 13px}
.phone-offer ol{list-style:none;padding:0;margin:10px 0}
.phone-offer li{display:flex;gap:8px;align-items:center;white-space:nowrap;margin-top:7px;font-size:10px}
.phone-offer li b{width:17px;height:17px;border-radius:4px;display:grid;place-items:center;background:white;color:#2850b5;font-size:9px}
.phone-confirmed{width:100%;color:#24573f;background:#edf7f1}
.phone-confirmed strong,.phone-confirmed>span:not(.phone-confirm-icon){display:block}
.phone-confirmed strong{font-size:11px;margin:4px 0}
.phone-confirmed>span:not(.phone-confirm-icon){font-size:10px;margin-top:4px}
.phone-confirm-icon{display:grid;place-items:center;width:22px;height:22px;background:#d5ebdd;border-radius:50%}
.phone-confirm-icon svg{width:14px;height:14px}
.phone-compose{position:absolute;bottom:18px;left:12px;right:12px;height:29px;border:1px solid #dfe5eb;border-radius:18px;color:#687586;font-size:10px;padding:5px 6px 5px 13px;display:flex;justify-content:space-between;align-items:center;background:#fff;z-index:3}
.phone-compose svg{background:#e8edf4;border-radius:50%;width:20px;height:20px;padding:3px;color:#405473}
.phone-home{position:absolute;bottom:7px;left:35%;width:30%;height:3px;background:#17263b;border-radius:2px;z-index:5}
.booking-calendar{position:absolute;z-index:5;left:50%;bottom:33px;transform:translateX(-50%);background:#fff;box-shadow:0 18px 46px -24px #1d365d60;border-radius:13px;padding:18px;display:flex;align-items:center;gap:13px;width:355px;max-width:calc(100% - 28px);transition:opacity 500ms ease,transform 700ms var(--ease-out)}
.booking-calendar-date{display:grid;place-items:center;background:#edf2ff;color:#2f56b8;border-radius:8px;min-width:43px;padding:4px 7px;line-height:1.4}
.booking-calendar-date small{font-size:8px;letter-spacing:.04em}
.booking-calendar-date b{font-size:25px;font-weight:600}
.booking-calendar>div{display:flex;flex-direction:column;gap:4px}
.booking-calendar>div small{font-size:7px;color:var(--soft);letter-spacing:.04em}
.booking-calendar>div strong{font-size:11px;letter-spacing:-.025em}
.booking-calendar>div span{font-size:9px;color:var(--soft)}
.booking-calendar>svg{width:16px;height:16px;color:#297552;margin-left:auto}
.booking-image-caption{position:absolute;bottom:5px;left:0;right:0;font-size:8px;text-align:center;color:#657186}
.booking-motion.motion-ready[data-phase="0"] .phone-lock{opacity:1;transform:none}
.booking-motion.motion-ready[data-phase="0"] .phone-conversation{opacity:0}
.booking-motion.motion-ready:is([data-phase="0"],[data-phase="1"],[data-phase="2"]) .phone-chat-track{transform:none}
.booking-motion.motion-ready[data-phase="3"] .phone-chat-track{transform:translateY(-132px)}
.booking-motion.motion-ready:is([data-phase="0"],[data-phase="1"]) :is(.phone-choice,.phone-address,.phone-yes,.phone-confirmed),
.booking-motion.motion-ready[data-phase="2"] :is(.phone-address,.phone-yes,.phone-confirmed),
.booking-motion.motion-ready[data-phase="3"] .phone-confirmed{opacity:0;transform:translateY(14px)}
.booking-motion.motion-ready:not([data-phase="4"]) .booking-calendar{opacity:0;transform:translate(-50%,24px)}
.booking-motion.motion-ready[data-phase="3"] .phone-yes{transition-delay:1000ms}
.booking-motion.motion-ready[data-phase="0"] .phone-notification{animation:message-arrival .65s var(--ease-out) both;animation-play-state:paused}
.booking-motion.motion-playing[data-phase="0"] .phone-notification{animation-play-state:running}
@keyframes message-arrival{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.optional-workspace{margin:0 auto 26px;width:min(1120px,calc(100% - 112px));border-block:1px solid var(--line)}
.optional-workspace+ .optional-workspace{border-top:0;margin-top:-26px}
.optional-workspace>summary{font-size:13px;padding:23px 4px;color:var(--ink)}
.optional-workspace>summary>svg{width:18px;height:18px;transition:transform .15s ease}
.optional-workspace[open]>summary>svg{transform:rotate(90deg)}
.optional-workspace .content-wrap{width:100%}
.optional-workspace .booking-example{max-width:580px;margin:0 auto;padding:10px 0 32px}
.optional-workspace .consult-section{padding:20px 0 40px}
.optional-workspace .consult-heading{display:none}
.optional-workspace .scribe-section{padding:28px 0 40px}
.optional-workspace .finish-section{margin-bottom:24px;border-radius:12px;padding:35px}
.optional-workspace .finish-copy h2{font-size:32px}
.optional-workspace .finish-copy p{font-size:13px}
.workflow-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:24px 0 36px;list-style:none;margin-block:0;color:var(--soft);font-size:12px;font-weight:600}
.workflow-strip a{display:flex;align-items:center;gap:12px;min-height:44px}
.workflow-strip svg{width:17px;height:17px;color:#8796ac}
.primary-nav{display:flex;gap:26px;align-items:center;font-size:12px;font-weight:600}
.primary-nav .nav-trial{color:var(--blue)}
.referral-chapter .referral-act{height:auto!important}
.referral-chapter .referral-stage{position:relative;height:auto;min-height:0;overflow:visible;padding:70px 60px 30px}
.referral-chapter .extraction-scene{height:470px;min-height:470px}
.referral-chapter .extraction-caption{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.referral-chapter .extraction-caption .motion-controls{margin:0;min-width:230px}
.referral-chapter .travelling-field{display:flex}
.referral-chapter .motion-step-label{margin-top:0;min-height:0}
.site-footer .contact-links{display:flex;flex-wrap:wrap;gap:16px;width:100%;font-size:11px;padding-top:8px}
.closing .closing-action>p{max-width:30ch}
@media (max-width:900px){
 .booking-motion{grid-template-columns:1fr 1.1fr;gap:8px;width:calc(100% - 56px)}
 .booking-motion-copy h2{font-size:37px}.booking-motion-copy>p:not(.motion-step-label){font-size:13px}
 .booking-theatre{height:700px}.booking-motion-copy p.booking-payoff{font-size:21px}
 .primary-nav{gap:18px}.workflow-strip{font-size:11px}
 .referral-chapter .referral-stage{padding-inline:30px}.referral-chapter .extraction-scene{height:435px;min-height:435px}
}
@media (max-width:650px){
 .primary-nav{gap:18px;font-size:11px}.primary-nav a:first-child{display:none}
 .workflow-strip{flex-wrap:wrap;gap:0;padding:18px 0 30px;justify-content:center;font-size:10px}.workflow-strip a{gap:6px;padding:0 8px}.workflow-strip svg{width:13px;height:13px}
 .booking-motion{grid-template-columns:1fr;gap:0;width:100%;padding-top:40px;padding-bottom:8px}
 .booking-motion-copy{padding:12px 24px 0}.booking-motion-copy h2{font-size:38px}
 .booking-motion-copy>p:not(.motion-step-label){font-size:14px;max-width:42ch;margin-top:18px}
 .booking-story-steps{display:flex;flex-wrap:wrap;gap:10px 16px;margin:20px 0;font-size:10px}.booking-story-steps li{gap:7px}.booking-story-steps li>span{width:20px;height:20px}
 .booking-motion-copy p.booking-payoff{font-size:22px;margin-top:20px}.booking-payoff br{display:none}.booking-payoff strong{display:block}
 .booking-motion-copy p.booking-setting{font-size:11px;margin-top:14px}
 .booking-motion .motion-controls{margin-top:14px}.booking-motion .motion-step-label{min-height:0;font-size:11px}
 .booking-theatre{height:710px;margin-top:5px;width:100%;overflow:hidden}
 .booking-calendar{bottom:30px;width:330px}.booking-image-caption{bottom:3px;font-size:7px}
 .optional-workspace{width:calc(100% - 40px)}.optional-workspace>summary{font-size:12px}.optional-workspace .finish-section{padding:24px 18px}
 .referral-chapter .referral-stage{padding:36px 20px 22px}
 .referral-chapter .extraction-scene{height:620px;min-height:620px;display:block;overflow:visible;flex:none}
 .referral-chapter .document-stack{position:absolute;left:15%;top:0;width:72%;height:340px}
 .referral-chapter .organised-record{position:absolute;left:3%;top:310px;width:94%;max-width:none}
 .referral-chapter .organised-body{padding:18px}.referral-chapter .organised-body h3{font-size:25px;margin-bottom:16px}
 .referral-chapter .extracted-row{min-height:52px;padding:8px}.referral-chapter .record-review{margin-top:14px}
 .referral-chapter .extraction-caption{justify-content:flex-start;font-size:11px;gap:6px}
 .referral-chapter .extraction-caption .motion-controls{width:100%;margin:4px 0 0}
 .referral-chapter .extraction-bridge{display:none}
}
@media(prefers-reduced-motion:reduce){.booking-motion *,[data-motion-demo] *{animation:none!important;transition:none!important}}
.motion-reduced .booking-motion *,.motion-reduced [data-motion-demo] *{animation:none!important;transition:none!important}
.motion-initializing *{animation:none!important;transition:none!important}