/* "Meet CBI" demo: a phone (field app, by voice) and a browser (web app CBI panel)
   playing a day of real exchanges. Used on /features/cbi/ and the home page. */
.cbd{--n:#0f1a2e;--n2:#17263d;--n3:#22344f;--a:#F59E0B;--ai:#1a1300;--p:#fbfaf6;--ink:#18212e;--mut:#5b6574;--ln:#e2e0d8;
  container:cbd/inline-size;position:relative;background:var(--n);color:#f3f1ea;border-radius:14px;padding:clamp(12px,2.2cqw,22px);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45;overflow:hidden;
  background-image:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.03) 46px 48px)}
.cbd *{box-sizing:border-box}
.cbd-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px}
.cbd-clock{font:700 12px/1.3 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--a);min-height:1.3em}
.cbd-ctrls{display:flex;gap:6px;flex-shrink:0}
.cbd-ctrls button{font-family:inherit;font-weight:600;font-size:13px;line-height:1;color:#f3f1ea;background:var(--n2);border:1px solid #33465f;border-radius:999px;padding:7px 12px;cursor:pointer}
.cbd-ctrls button:hover{border-color:var(--a)}
.cbd-ctrls button:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.cbd-stage{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(12px,3cqw,32px);align-items:start}
.cbd:not(.on) .cbd-stage,.cbd:not(.on) .cbd-bar,.cbd:not(.on) .cbd-cap{display:none}
.cbd-dev{position:relative;transition:opacity .4s,transform .4s;opacity:.55}
.cbd-dev.act{opacity:1}
.cbd-tag{display:block;text-align:center;margin-top:8px;font:700 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#9fb0c6}
.cbd-dev.act .cbd-tag{color:var(--a)}
/* phone */
.cbd-phone-in{position:relative;aspect-ratio:9/17.5;max-height:560px;margin:0 auto;background:#0a1222;border:3px solid #33465f;border-radius:28px;padding:30px 10px 10px;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cbd-phone-in::before{content:"";position:absolute;top:9px;left:50%;width:34%;height:12px;margin-left:-17%;background:#1b2a42;border-radius:8px}
.cbd-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:#9fb0c6;padding:0 4px 6px}
.cbd-wake{color:var(--a);opacity:0;transition:opacity .3s}
.cbd-phone.listening .cbd-wake{opacity:1}
.cbd-voice{display:flex;align-items:center;gap:8px;padding:8px 4px 2px;border-top:1px solid #1d2c44}
.cbd-wave{flex:1;display:flex;align-items:center;gap:3px;height:26px}
.cbd-wave i{flex:1;height:3px;border-radius:2px;background:#33465f;transition:height .15s}
.cbd-phone.speaking .cbd-wave i{background:var(--a);animation:cbdw .9s ease-in-out infinite}
.cbd-phone.listening .cbd-wave i{background:#9fb0c6;animation:cbdw 1.2s ease-in-out infinite}
.cbd-wave i:nth-child(3n){animation-delay:-.3s}.cbd-wave i:nth-child(3n+1){animation-delay:-.6s}.cbd-wave i:nth-child(4n){animation-delay:-.45s}
@keyframes cbdw{0%,100%{height:3px}50%{height:22px}}
.cbd-mic{width:40px;height:40px;border-radius:50%;background:var(--a);color:var(--ai);display:grid;place-items:center;flex-shrink:0}
.cbd-phone.listening .cbd-mic{animation:cbdp 1.1s ease-out infinite}
@keyframes cbdp{0%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}100%{box-shadow:0 0 0 14px rgba(245,158,11,0)}}
/* web */
.cbd-chrome{display:flex;align-items:center;gap:6px;background:#1b2a42;border-radius:10px 10px 0 0;padding:8px 12px}
.cbd-chrome i{width:9px;height:9px;border-radius:50%;background:#33465f}
.cbd-chrome span{margin-left:10px;font:500 11px "JetBrains Mono",ui-monospace,monospace;color:#9fb0c6;background:#0f1a2e;border-radius:6px;padding:3px 10px}
.cbd-web-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);background:#eef0f3;border-radius:0 0 10px 10px;min-height:min(500px,62cqw);box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.cbd-app{padding:14px;display:grid;gap:8px;align-content:start}
.cbd-app b{display:block;height:34px;border-radius:6px;background:#dde2e9}
.cbd-app b:nth-child(2n){width:70%;background:#e6e9ee}
.cbd-app b:first-child{height:18px;width:45%;background:#cfd6e1}
.cbd-panel{background:#fff;border-left:1px solid #d9dee6;display:flex;flex-direction:column;min-width:0}
.cbd-panel-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #e5e8ee;font-size:13px;font-weight:700;color:var(--ink)}
.cbd-badge{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--a);color:#0B1220;font-size:10px;font-weight:900;letter-spacing:.04em}
.cbd-input{margin:8px 10px 10px;border:1.5px solid #d9dee6;border-radius:8px;padding:8px 10px;min-height:36px;font-size:13px;color:var(--ink);display:flex;align-items:center}
.cbd-web.typing .cbd-input{border-color:var(--a)}
.cbd-caret{width:2px;height:15px;background:var(--a);margin-left:1px;opacity:0}
.cbd-web.typing .cbd-caret{opacity:1;animation:cbdc 1s steps(1) infinite}
@keyframes cbdc{50%{opacity:0}}
/* logs and bubbles */
.cbd-log{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:8px 6px;min-height:0;font-size:13px}
.cbd-web .cbd-log{padding:10px 12px;height:min(400px,48cqw)}
.cbd-phone .cbd-log{height:100%}
.cbd-q,.cbd-r{max-width:92%;padding:8px 11px;border-radius:12px;animation:cbdi .35s ease-out both}
.cbd-log .old{opacity:.4}
.cbd-q{align-self:flex-end;background:var(--a);color:var(--ai);border-bottom-right-radius:4px;font-weight:600}
.cbd-r{align-self:flex-start;border-bottom-left-radius:4px}
.cbd-phone .cbd-r{background:var(--n2);color:#f3f1ea}
.cbd-web .cbd-r{background:#f2f4f7;color:var(--ink)}
.cbd-think{display:inline-flex;gap:4px}
.cbd-think i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:cbdt 1s infinite}
.cbd-think i:nth-child(2){animation-delay:.15s}.cbd-think i:nth-child(3){animation-delay:.3s}
@keyframes cbdt{50%{opacity:1}}
@keyframes cbdi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* cards */
.cbd-card{margin-top:7px;border-radius:9px;padding:9px 10px;font-size:12px;animation:cbdi .35s ease-out both}
.cbd-phone .cbd-card{background:#0f1a2e;border:1px solid #2b3c55}
.cbd-web .cbd-card{background:#fff;border:1px solid #e1e5ec}
.cbd-card h5{margin:0 0 6px;font:700 10.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--a)}
.cbd-web .cbd-card h5{color:#8a5a00}
.cbd-row{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;padding:4px 0;border-top:1px dashed rgba(127,140,160,.35)}
.cbd-row:first-of-type{border-top:0}
.cbd-row b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;grid-row:span 2;min-width:3.2em}
.cbd-row small{color:#8d99aa;font-size:11px}
.cbd-phone .cbd-row small{display:none}
.cbd-phone .cbd-row b{grid-row:auto}
.cbd-pin{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center}
.cbd-map{height:48px;border-radius:7px;background:#1b2a42;background-image:linear-gradient(90deg,transparent 45%,#33465f 45% 55%,transparent 55%),linear-gradient(0deg,transparent 60%,#33465f 60% 68%,transparent 68%);position:relative}
.cbd-map::after{content:"";position:absolute;left:50%;top:30%;width:12px;height:12px;margin:-6px;background:var(--a);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 0 0 3px rgba(245,158,11,.3)}
.cbd-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cbd-tiles div{background:#f6f5f1;border-radius:7px;padding:7px}
.cbd-tiles small{display:block;color:var(--mut);font-size:10.5px}
.cbd-tiles strong{font:800 15px "Big Shoulders Display","Arial Narrow",sans-serif;font-size:17px;color:var(--ink)}
.cbd-body{white-space:normal}
/* a briefing: time and customer, the work, and what they said on the call */
.cbd-bi{padding:5px 0;border-top:1px dashed rgba(127,140,160,.35)}
.cbd-bi:first-of-type{border-top:0}
.cbd-bi>div:first-child{display:flex;gap:8px;align-items:baseline}
.cbd-bi b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;min-width:3.2em}
.cbd-bi span{font-weight:700}
.cbd-bi-d{margin-left:calc(3.2em + 8px)}
.cbd-bi-q{margin:3px 0 0 calc(3.2em + 8px);display:inline-block;border-radius:7px;padding:2px 7px;background:rgba(245,158,11,.14);color:inherit;font-size:11px;line-height:1.35}
.cbd-bi-q small{display:block;font:700 9px/1.3 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#b07400}
.cbd-phone .cbd-bi-q small{color:var(--a)}
.cbd-bi-w{display:none;font-style:normal}
/* on the phone the briefing stays small, so the question stays in view:
   one line a job, and the caller's words on one line under it */
.cbd-phone .cbd-card:has(.cbd-bi){padding:7px 8px}
.cbd-phone .cbd-bi{padding:3px 0;font-size:11px;line-height:1.3}
.cbd-phone .cbd-bi>div:first-child{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbd-phone .cbd-bi b{font-size:10.5px;margin-right:5px}
.cbd-phone .cbd-bi-w{display:inline;opacity:.8}
.cbd-phone .cbd-bi-d{display:none}
.cbd-phone .cbd-bi-q{display:block;margin:2px 0 0;padding:1px 6px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbd-phone .cbd-bi-q small{display:inline;margin-right:4px;font-size:0}
.cbd-phone .cbd-bi-q small::before{content:"call";font-size:8.5px}
.cbd-phone .cbd-bi~.cbd-hint{display:none}
.cbd-btns{display:flex;gap:6px;margin-top:8px}
.cbd-btns span{border-radius:6px;padding:4px 10px;font-weight:700;font-size:11.5px;border:1px solid #c9d0db}
.cbd-btns .ok{background:var(--a);border-color:var(--a);color:var(--ai)}
.cbd-btns .ok.press{animation:cbdk .6s ease-out}
@keyframes cbdk{0%{transform:scale(1)}40%{transform:scale(.9);box-shadow:0 0 0 6px rgba(245,158,11,.35)}100%{transform:scale(1)}}
.cbd-done{color:#1f8a5b;font-weight:700}
.cbd-phone .cbd-done{color:#4cc38a}
.cbd-hint{font-size:11px;color:#8d99aa;margin-top:6px}
.cbd-cap{margin:12px 0 0;min-height:2.9em;font-size:14px;color:#cfd6e1}
.cbd-cap b{color:var(--a)}
/* one device at a time when there isn't room, and always in the mini version */
@container cbd (max-width: 720px){
  .cbd-stage{grid-template-columns:minmax(0,1fr)}
  .cbd-dev:not(.act){display:none}
  .cbd-phone-in{max-width:300px;max-height:520px}
  .cbd-web-in{grid-template-columns:minmax(0,1fr);min-height:0}
  .cbd-app{display:none}
  .cbd-web .cbd-log{height:330px}
}
.cbd-mini .cbd-stage{grid-template-columns:minmax(0,1fr)}
.cbd-mini .cbd-dev:not(.act){display:none}
.cbd-mini .cbd-phone-in{max-width:280px;max-height:470px}
.cbd-mini .cbd-web-in{grid-template-columns:minmax(0,1fr);min-height:0}
.cbd-mini .cbd-app{display:none}
.cbd-mini .cbd-web .cbd-log{height:330px}
@media (prefers-reduced-motion: reduce){
  .cbd *,.cbd *::before,.cbd *::after{animation:none!important;transition:none!important}
  .cbd-phone.speaking .cbd-wave i{height:12px}
}
/* the transcript under the demo */
.cbd-transcript{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;counter-reset:cx}
.cbd-transcript li{counter-increment:cx;border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:12px 14px 12px 50px;position:relative;margin:0}
.cbd-transcript li::before{content:counter(cx);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:#F59E0B;color:#1a1300;font:800 12px/24px system-ui,sans-serif;text-align:center}
.cbd-transcript p{margin:0}
.cbd-transcript .who{font-size:.85rem;opacity:.72}
.cbd-transcript .q{font-weight:700;margin-top:2px}
.cbd-transcript .a{margin-top:4px}
.cbd-transcript .card-text{font-size:.92rem;opacity:.75;margin-top:4px}
.cbd-transcript .step{display:block}
/* on the CBI page the demo is wider than the reading column */
.cbi-demo-wrap{position:relative;width:min(1100px,calc(100vw - 32px));left:50%;transform:translateX(-50%);margin:28px 0 8px}
.cbi-demo-wrap .cbi-note{font-size:.9rem;color:#64748b;margin:10px 4px 0}