/* Blog B11: AI / SI agents in CRM (.pb11-) */
.pb11-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pb11-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 18px 0 0; font: 500 14px/1.4 var(--f-body); color: #64748B; }
.pb11-meta span:not(:last-child)::after { content: "/"; margin: 0 12px; color: #CBD5E1; }

/* hero: agent proposal card */
.pb11-prop { position: relative; margin: 0; justify-self: center; width: min(100%, 410px); padding: 20px; border-radius: 24px; background: linear-gradient(160deg, #061A2E, #0A3A63 58%, #07605E); color: #CFE0EC; box-shadow: 0 50px 90px -50px rgba(8,34,56,.85); font-family: var(--f-body); }
.pb11-prop__top { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.pb11-prop__top b { font: 700 16px/1.2 var(--f-display); color: #fff; }
.pb11-prop__top em { margin-left: auto; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.12); font: 600 11px/1.3 var(--f-body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #CFE6F2; }
.pb11-prop__dot { width: 12px; height: 12px; border-radius: 50%; background: #3FB97A; box-shadow: 0 0 0 0 rgba(63,185,122,.55); animation: pb11Pulse 2.2s infinite; }
@keyframes pb11Pulse { 70% { box-shadow: 0 0 0 10px rgba(63,185,122,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,122,0); } }
.pb11-prop small { display: block; margin-bottom: 4px; font: 700 11px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #7FD3EE; }
.pb11-prop__rec { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); font-size: 14.5px; line-height: 1.45; color: #fff; }
.pb11-prop__note { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #fff; color: #334155; opacity: 0; transform: translateY(8px); animation: pb11In .55s calc(.5s + var(--d) * .5s) cubic-bezier(.2,.8,.2,1) forwards; }
.pb11-prop__note small { color: #0A6FA8; }
.pb11-prop__note p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.pb11-prop__acts { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pb11-prop__acts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); font-size: 14.5px; line-height: 1.4; color: #fff; opacity: 0; transform: translateY(8px); animation: pb11In .5s calc(.6s + var(--d) * .45s) cubic-bezier(.2,.8,.2,1) forwards; }
.pb11-prop__acts i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #FFB81C; color: #082238; font: 700 12.5px/1 var(--f-body); font-style: normal; }
.pb11-prop__acts span { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: rgba(63,185,122,.2); font-size: 12px; color: #9BE3BD; white-space: nowrap; }
@keyframes pb11In { to { opacity: 1; transform: none; } }
.pb11-prop__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.2); opacity: 0; animation: pb11In .5s 2.6s forwards; }
.pb11-prop__wait { margin-right: auto; font-size: 13px; color: #BFD3E2; }
.pb11-prop__btn { padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); font: 600 13.5px/1.2 var(--f-body); color: #fff; }
.pb11-prop__btn--ok { border-color: #FFB81C; background: #FFB81C; color: #082238; animation: pb11Glow 2.4s 3.2s infinite; }
@keyframes pb11Glow { 50% { box-shadow: 0 0 0 6px rgba(255,184,28,.25); } }

/* article */
.pb11-art { padding-top: clamp(24px, 4vw, 48px); }
.pb11-art__wrap { display: flex; justify-content: center; }
.pb11-body { width: 100%; max-width: 820px; font-size: 17.5px; line-height: 1.72; color: #334155; }
.pb11-body > p { margin: 0 0 18px; }
.pb11-body a { color: #0A6FA8; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pb11-h2 { margin: 58px 0 0; font: 700 clamp(25px, 1rem + 1.2vw, 33px)/1.25 var(--f-display); letter-spacing: -.02em; color: #082238; scroll-margin-top: 100px; text-wrap: balance; }
.pb11-h2:first-child { margin-top: 0; }
.pb11-body > .pb11-answer { margin: 20px 0 22px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(180deg, #F3FAFD, #fff); border: 1px solid #D7EBF4; font-weight: 500; color: #082238; }
.pb11-answer::before { content: "In short"; display: block; margin-bottom: 6px; font: 700 11.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #00A3D9; }

/* inline visual: agent loop */
.pb11-loop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; margin: 10px 0 26px; padding: clamp(18px, 3vw, 28px); border-radius: 24px; background: #F3F7F9; border: 1px solid #E2E8F0; }
.pb11-loop__ring { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.pb11-loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pb11-loop__track { fill: none; stroke: #D5E3EC; stroke-width: 6; stroke-dasharray: 3 9; }
.pb11-loop__prog { fill: none; stroke: #00A3D9; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 942.48; stroke-dashoffset: 942.48; transition: stroke-dashoffset 700ms cubic-bezier(.3,.7,.2,1); }
.pb11-loop__core { position: absolute; left: 50%; top: 50%; width: 46%; margin: 0; transform: translate(-50%, -50%); text-align: center; font: 700 clamp(14px, 4.4cqw, 17px)/1.3 var(--f-display); color: #082238; }
.pb11-loop__core small { display: block; margin-bottom: 4px; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #64748B; }
.pb11-loop__nodes { margin: 0; padding: 0; list-style: none; }
.pb11-loop__nodes li { --a: calc(var(--i) * 60deg); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-37.5cqw) rotate(calc(var(--a) * -1)); }
.pb11-loop__nodes button { display: grid; place-items: center; gap: 2px; width: clamp(64px, 22cqw, 84px); aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid #CFE0EA; background: #fff; font: 700 clamp(12px, 3.6cqw, 14px)/1.1 var(--f-body); color: #082238; cursor: pointer; box-shadow: 0 12px 24px -18px rgba(8,34,56,.6); transition: background 250ms, color 250ms, border-color 250ms, transform 250ms; }
.pb11-loop__nodes button b { font: 800 clamp(15px, 5cqw, 19px)/1 var(--f-display); color: #00A3D9; }
.pb11-loop__nodes li.is-human button { border-style: dashed; border-color: #FFB81C; }
.pb11-loop__nodes li.is-human button b { color: #B07800; }
.pb11-loop__nodes button.is-done { border-color: #00A3D9; }
.pb11-loop__nodes button[aria-pressed="true"] { background: #082238; border-color: #082238; color: #fff; transform: scale(1.08); }
.pb11-loop__nodes button[aria-pressed="true"] b { color: #FFB81C; }
.pb11-loop__nodes button:focus-visible { outline: 3px solid #00A3D9; outline-offset: 3px; }
.pb11-loop__panel { display: grid; min-width: 0; }
.pb11-loop__step { grid-area: 1 / 1; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 350ms, transform 350ms, visibility 0s 350ms; }
.pb11-loop__step.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 350ms, transform 350ms, visibility 0s; }
.pb11-loop__k { margin: 0 0 6px; font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #00A3D9; }
.pb11-loop__step h3 { margin: 0 0 8px; font: 700 19px/1.35 var(--f-display); color: #082238; }
.pb11-loop__step p:last-child { margin: 0; font-size: 15.5px; line-height: 1.6; color: #334155; }

/* jobs list */
.pb11-jobs { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: j; }
.pb11-jobs li { position: relative; padding: 14px 16px 14px 54px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0; font-size: 16.5px; line-height: 1.6; counter-increment: j; }
.pb11-jobs li::before { content: counter(j); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #E8F5FC; color: #0A6FA8; font: 700 14px/1 var(--f-display); }
.pb11-jobs b { color: #082238; }

/* where things fit */
.pb11-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 20px; }
.pb11-fit__item { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 18px 30px -28px rgba(8,34,56,.6); }
.pb11-fit__item img { display: block; width: 36px; height: 36px; margin-bottom: 10px; }
.pb11-fit__item h3 { margin: 0 0 6px; font: 700 17px/1.3 var(--f-display); color: #082238; }
.pb11-fit__item p { margin: 0; font-size: 15px; line-height: 1.58; color: #334155; }

/* tug section */
.pb11-tug { margin-top: 30px; max-width: 980px; }

@media (max-width: 1000px) {
  .pb11-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pb11-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pb11-loop { grid-template-columns: minmax(0, 1fr); }
  .pb11-loop__ring { width: min(100%, 320px); }
}
@media (max-width: 640px) {
  .pb11-body { font-size: 16.5px; }
  .pb11-prop { padding: 16px; }
  .pb11-loop__step { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pb11-prop__note, .pb11-prop__acts li, .pb11-prop__foot { animation: none; opacity: 1; transform: none; }
  .pb11-prop__dot, .pb11-prop__btn--ok { animation: none; }
  .pb11-loop__prog, .pb11-loop__step, .pb11-loop__nodes button { transition: none; }
}