/* The story on the demo page (Rob, 25 October 2026): TaskForceCO2's design (taskforceco2.buildova.io) for every
   business. Night band, a serif story, a cliffhanger button, page 2 with the turn, the one sentence and the steps, and
   the phone button that rings their own receptionist. Shown only when the introducer app has written a story; the
   plain demo page is the fallback. Classes are st- so nothing clashes with the demo page's own. */
.st{--blue:var(--st-accent,#1A4FFF);--night:color-mix(in srgb,var(--blue) 18%,#02131F);--night2:color-mix(in srgb,var(--blue) 24%,#0B2233);--glow:color-mix(in srgb,var(--blue) 55%,#fff);--blue-deep:color-mix(in srgb,var(--blue) 70%,#000);--warm:#F28C38;--paper:#F6F8FB;--ink:#14202B;--muted:#5A6878;--line:#DCE3EA;
  --head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--tell:"Source Serif 4",Georgia,"Times New Roman",serif;--ui:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);font:20px/1.65 var(--tell);min-height:100vh}
body.has-story{background:#F6F8FB;--blue:var(--st-accent,#1A4FFF);--night2:color-mix(in srgb,var(--blue) 24%,#0B2233);--glow:color-mix(in srgb,var(--blue) 55%,#fff);--head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--ui:"Segoe UI",system-ui,-apple-system,sans-serif}
body.has-story .try-foot,body.has-story #share-wait,body.has-story:not(.story-call) #demo-bad{display:none}
/* The demo card stays hidden on a story page, but its call window (a child of it) must be able to show over the story. */
body.has-story #demo-main{display:block!important;visibility:visible!important;opacity:1!important;padding:0;margin:0}
body.has-story #demo-main > :not(#callbox):not(#try-after):not(#try-book):not(#try-done){display:none!important}
body.has-story.story-call #demo-main{display:block}
body.has-story.story-call .st{min-height:0}
.st *{box-sizing:border-box}
.st .st-col{max-width:680px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.st h1,.st h2{font-family:var(--head);margin:0;line-height:1.12;text-wrap:balance}
.st p{margin:0}
.st-top{background:var(--night);color:#fff}
.st-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:18px;font:600 15px var(--ui)}
.st-logo{font:700 20px var(--head);color:#fff;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.st-hero{padding-block:28px 0}
.st-eyebrow{font:600 13px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--warm)}
.st-hero h1{margin-top:16px;font-size:clamp(32px,6vw,52px);font-weight:700;letter-spacing:-.02em}
.st-hero h1 .st-h-b{display:block;color:var(--glow)}
.st-hero#st-p2-hero{padding-bottom:44px}
.st-phone{margin-top:30px;background:var(--night2);border-radius:12px 12px 0 0;padding:20px 20px 0;display:grid;gap:10px}
.st-ring{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--night2);border-radius:10px;padding:14px 16px;font:600 15px var(--ui);color:#C9D5E2}
.st-ring b{color:#fff;font-weight:600}
.st-ring i{font-style:normal;color:var(--warm);white-space:nowrap}
.st-ring.last{border-radius:10px 10px 0 0}
.st-pic{margin:30px 0 0;border-radius:12px 12px 0 0;overflow:hidden;background:var(--night2);aspect-ratio:3/2}
.st-pic img{display:block;width:100%;height:100%;object-fit:cover}
.st-pic figcaption{position:absolute;right:10px;bottom:8px;font:12px var(--ui);color:#fff;opacity:.75;background:rgba(2,19,31,.55);padding:3px 8px;border-radius:6px}
.st-pic figcaption:empty{display:none}
.st-story{padding-block:52px 24px;display:grid;gap:24px}
.st-beat{font:700 25px/1.3 var(--head);letter-spacing:-.01em}
.st-say{font-style:italic}
.st-cliff{padding-block:12px 64px;display:grid;gap:14px;justify-items:start}
.st-btn{display:inline-flex;align-items:center;gap:12px;font:700 18px/1 var(--head);padding:20px 28px;border-radius:8px;border:0;cursor:pointer;text-decoration:none;background:var(--blue);color:#fff;box-shadow:0 6px 0 var(--blue-deep)}
.st-small{font:15px var(--ui);color:var(--muted)}
.st-back{font:600 15px var(--ui);color:var(--blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.st-sub{font:18px/1.5 var(--ui);color:#C9D5E2;margin-top:12px}
.st-turn{background:var(--night);color:#fff;margin-block:36px}
.st-turn p{font:700 clamp(23px,3.4vw,30px)/1.3 var(--head);padding-block:48px}
.st-kid{border:3px solid var(--blue);background:color-mix(in srgb,var(--blue) 8%,#fff);border-radius:14px;padding:22px 24px;display:grid;gap:10px}
.st-kid .st-lab{font:600 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.st-kid p+p{font:700 22px/1.35 var(--head);color:var(--ink)}
.st-steps{display:grid;gap:14px}
.st-steps p{padding-left:22px;border-left:4px solid var(--line)}
.st-won{font:700 clamp(28px,4.4vw,40px)/1.1 var(--head);color:var(--blue)}
.st-close{background:var(--night);color:#fff;margin-top:52px}
.st-close .st-col{padding-block:60px;display:grid;gap:18px}
.st-note{font:italic 19px/1.5 var(--tell);color:#B9C7D6}
.st-close h2{font-size:clamp(30px,5vw,44px);font-weight:700}
.st-p{font:17px/1.55 var(--ui);color:#C9D5E2}
.st-p b{color:#fff}
.st-foot{padding-block:22px;font:13px var(--ui);color:var(--muted)}
.st-callnow{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--head);color:#fff;background:var(--blue);border:0;border-radius:999px;padding:11px 16px 11px 14px;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 0 0 0 rgba(26,79,255,.6);animation:st-pulse 2.4s ease-out infinite}
.st-callnow svg{width:17px;height:17px;fill:#fff}
.st-callnow.big{font-size:18px;padding:16px 24px 16px 20px}
.st-callnow.big svg{width:21px;height:21px}
@keyframes st-pulse{0%{box-shadow:0 0 0 0 rgba(26,79,255,.55)}70%{box-shadow:0 0 0 14px rgba(26,79,255,0)}100%{box-shadow:0 0 0 0 rgba(26,79,255,0)}}
@media (prefers-reduced-motion:reduce){.st-callnow{animation:none}}
@media (max-width:520px){.st-callnow .st-cl-long{display:none}}

/* The receptionist page header once the FX mark went (25 October). */
.pdf-logo-text{font:800 16px/1 var(--head,"Bricolage Grotesque",system-ui,sans-serif);color:#111418;letter-spacing:-.01em}

/* The owner's panel under the customer-facing page (25 October): the one bit of the page that talks to the business. */
.st-owner{background:#fff;border-top:4px solid var(--blue)}
.st-owner .st-col{padding-block:44px 48px;display:grid;gap:14px}
.st-owner .st-lab{font:600 13px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.st-owner h2{font-size:clamp(26px,4vw,36px)}
.st-owner p{font:18px/1.55 var(--ui);color:var(--ink)}
.st-owner p b{color:var(--blue)}
.st-close h2 .st-h-b{color:var(--glow)}

/* On a story page the old receptionist card's price plans never show after a call (25 October: no price on the page). */
body.has-story #buy,body.has-story .buy-toggle,body.has-story .buy-fine,body.has-story [data-buy-err]{display:none!important}
/* The building screen, wider on a laptop (Rob, 25 October): the name made the heading long. */
@media (min-width:700px){.share-wait-h{max-width:22ch;font-size:clamp(36px,4.4vw,54px)}.share-wait-lede{max-width:52ch;font-size:21px}}

/* Call us on a story page: the demo's call window becomes a modal over the story (25 October), in the story's colours.
   body.has-story keeps #demo-main hidden; the window is its own fixed layer. */
body.has-story #callbox:not([hidden]){display:grid;place-items:center;position:fixed;inset:0;z-index:60;background:rgba(2,19,31,.72);padding:20px}
body.has-story #callbox .dx-phone{width:min(380px,100%);background:var(--night2,#0B2233);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:20px;padding:28px 24px;display:grid;gap:12px;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,.4);font-family:var(--ui,"Segoe UI",system-ui,sans-serif)}
body.has-story #callbox .dx-who{display:grid;justify-items:center;gap:8px}
/* The same window as Jackie's, in the business's colour (Rob, 26 October): no avatar circle, her name at the top, the pad from the start. */
body.has-story #callbox .dx-avatar{display:none}
body.has-story #callbox .dx-avatar i{display:none}
body.has-story #callbox .dx-who-t{display:grid;gap:4px}
body.has-story #callbox #dx-who-name{font:700 30px/1.1 var(--head,system-ui);letter-spacing:-.01em}
body.has-story #callbox .dx-role{display:block;font:14px var(--ui,system-ui);color:var(--glow,#7FB2FF)}
body.has-story #callbox .dx-status{display:inline-flex;align-items:center;gap:8px;justify-self:center;margin-top:4px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);font:600 14px var(--ui,system-ui);color:#C9D5E2}
body.has-story #callbox .cb-state.oncall{color:#7FE3B4}
body.has-story #callbox .cb-state.oncall::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3DD68C;margin-right:7px;vertical-align:middle}
body.has-story #callbox #dx-timer{font-variant-numeric:tabular-nums;color:#C9D5E2}
body.has-story #callbox #dx-timer:empty{display:none}
/* No sound wave on a customer's demo call, as on our own site (Rob, 26 October). */
body.has-story #callbox .dx-voice{display:none}
body.has-story #callbox .dx-voice canvas{width:100%;height:40px}
body.has-story #callbox .dx-demo-note{font:14px/1.45 var(--ui,system-ui);color:#C9D5E2;margin:0;max-width:30ch;justify-self:center}
/* The pad on a story page is in the business's colour (oc.js draws it; --pad-c is its accent). */
body.has-story #callbox .cb-pad{--pad-c:var(--blue,#1A4FFF);--pad-ink:#14202B;margin-top:6px;text-align:left}
body.has-story #callbox .cb-pad-h{color:var(--blue,#1A4FFF)}
body.has-story #callbox .cb-note{font:14px/1.45 var(--ui,system-ui);color:#C9D5E2;margin:0;max-width:32ch;justify-self:center}
body.has-story #callbox .cb-mic{display:grid;gap:6px;font:600 13px var(--ui,system-ui);color:#8FA3B8;text-align:left}
body.has-story #callbox .cb-mic select{width:100%;font:15px var(--ui,system-ui);padding:9px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:#0E2A3D;color:#fff}
body.has-story #callbox .dx-live-actions{display:flex;justify-content:center;align-items:flex-start;gap:10px;margin-top:6px}
body.has-story #callbox .dx-end-w{display:grid;justify-items:center;gap:6px}
body.has-story #callbox .dx-end{width:60px;height:60px;padding:0;margin:0;border-radius:50%;border:0;background:#D93A2B;color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(217,58,43,.35)}
body.has-story #callbox .dx-end svg{width:26px;height:26px;transform:rotate(135deg)}
body.has-story #callbox .dx-end .dx-end-t{display:none}
body.has-story #callbox .dx-end-l{font:600 13px var(--ui,system-ui);color:rgba(255,255,255,.75)}
body.has-story #callbox .dx-close~.dx-end-l,body.has-story #callbox .dx-end[hidden]+.dx-end-l{display:none}
body.has-story #callbox .dx-close{font:600 15px var(--ui,system-ui);background:#fff;color:#14202B;border:0;border-radius:10px;padding:12px 22px;cursor:pointer}
body.has-story #callbox [hidden]{display:none!important}

/* After the call (Rob, 25 October: "we want to see this after the call has ended"): the demo card's after-call card,
   the meeting form and the thank-you come up over the story as a card, like the call window, in the story's colours. */
body.has-story:has(#try-after:not([hidden]))::after,body.has-story:has(#try-book:not([hidden]))::after,body.has-story:has(#try-done:not([hidden]))::after{content:"";position:fixed;inset:0;z-index:58;background:rgba(2,19,31,.72)}
body.has-story #try-after:not([hidden]),body.has-story #try-book:not([hidden]),body.has-story #try-done:not([hidden]){display:grid;gap:14px;position:fixed;z-index:59;left:50%;top:28px;transform:translateX(-50%);width:min(560px,calc(100% - 32px));max-height:calc(100vh - 56px);overflow:auto;background:var(--night2,#0B2233);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:28px 26px;box-shadow:0 30px 60px rgba(0,0,0,.4);font-family:var(--ui,system-ui)}
body.has-story #try-after .try-h,body.has-story #try-book .try-h,body.has-story #try-done .try-h{color:#fff;font:700 clamp(24px,4vw,30px)/1.1 var(--head,system-ui);margin:0}
body.has-story #try-after .try-lede,body.has-story #try-book .try-lede,body.has-story #try-done .try-lede,body.has-story #try-book .try-fine{color:#C9D5E2;font:16px/1.5 var(--ui,system-ui);margin:0}
body.has-story #try-after .try-fine{display:none}
body.has-story #try-after .try-after-top,body.has-story #try-done .try-after-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
body.has-story #try-after .try-x,body.has-story #try-done .try-x{flex:none;width:44px;height:44px;margin:-8px -10px 0 0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}
body.has-story #try-after .try-x svg,body.has-story #try-done .try-x svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
body.has-story #try-after .try-want{color:#fff;font-weight:600}
body.has-story #try-after .try-small{margin:4px 0 0;font:13px/1.45 var(--ui,system-ui);color:#8FA3B8}
body.has-story #try-after .try-actions,body.has-story #try-book .try-actions{display:grid;gap:10px;margin:0}
body.has-story #try-after .try-yes,body.has-story #try-book .try-yes{background:var(--blue,#1A4FFF);color:#fff;border:0;border-radius:10px;padding:14px 18px;font:700 16px var(--ui,system-ui);cursor:pointer}
body.has-story #try-after .try-no,body.has-story #try-book .try-no{background:#fff;color:#14202B;border:0;border-radius:10px;padding:12px 18px;font:600 15px var(--ui,system-ui);cursor:pointer}
body.has-story #try-book .try-field{color:#C9D5E2;display:grid;gap:4px;font:600 13px var(--ui,system-ui)}
body.has-story #try-book .try-field input{background:#fff;color:#14202B;border:0;border-radius:8px;padding:10px 12px;font:15px var(--ui,system-ui)}