/* ThinkCTA: same banner as the SME one (80px, stippled photo, black and white), links to the blog post on how we use AI.
   The title sits over the bright centre of the picture and flips colour with what is under it (difference blend). Only the arrow circle changes colour on hover. */
.thinkcta{padding:0 0 var(--cta-gap)}
.think{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;height:80px;padding:0 18px 0 32px;border-radius:var(--r-card);background:var(--card);overflow:hidden;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.03),0 12px 28px -22px rgba(0,0,0,.25)}
.think::before{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat;filter:invert(var(--inv));-webkit-mask-image:linear-gradient(to right,#000 82%,transparent 94%);mask-image:linear-gradient(to right,#000 82%,transparent 94%)}
.think.lz::before{background-image:url(../assets/stipple-think.png)}
.think .ct{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font:600 clamp(18px,2.2vw,22px)/1.15 var(--head);letter-spacing:-.02em;color:#fff;mix-blend-mode:difference}
.think .go{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center}
.think:hover .go,.think:focus-visible .go{background:var(--orange);color:#0a0a0a}
.think:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (max-width:700px){.think{padding:0 16px 0 20px}.think::before{background-size:175% 100%;background-position:50% 50%}.think .ct{font-size:16px}}