/* Storetasker /become-an-expert, benefits section: three graphics. Every class is prefixed be. */
/* one graphic: Alice's photo, evenly blurred, with one piece of UI in the lower half */
.be{position:relative;width:100%;aspect-ratio:838/880;container-type:inline-size;overflow:hidden;font-family:inherit;text-align:left;background:#4a443c url('/assets/images/become-expert-alice.jpg') center / cover no-repeat}
.be *{box-sizing:border-box}
.be-b1,.be-b2,.be-sh{position:absolute;inset:0;background:center / cover no-repeat}
.be-b1{background-image:url('/assets/images/become-expert-alice-b1.jpg');-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 36%, #000 66%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 36%, #000 66%)}
.be-b2{background-image:url('/assets/images/become-expert-alice-b2.jpg');-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 56%, #000 92%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 56%, #000 92%)}
.be-sh{background:linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.38) 100%)}
/* the blur starts almost at the top of the photo and deepens downward, in all three columns */
.be .be-b1{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 2%, #000 22%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 2%, #000 22%)}
.be .be-b2{-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 10%, #000 62%);mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 10%, #000 62%)}
.be-in{position:absolute;inset:0;font-size:calc(100cqw / 26);display:flex;align-items:flex-end;justify-content:center;padding:1.5em;color:#fff;line-height:1.2}
.be-in [data-k="card"]{opacity:0}
.be-cap{font-size:.62em;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);line-height:1}
.be-tag{display:inline-flex;align-items:center;height:2em;padding:0 .85em;border-radius:9em;font-size:.72em;font-weight:500;line-height:1;white-space:nowrap}
.be-tag.lilac{background:#E5E3F7;color:#2E2B5F;opacity:0;transform-origin:left center}
/* 1: the introduction message, in the white chat style from how-it-works step 01 */
.be-msg{width:100%;background:#fff;color:#1B1C1B;border-radius:0;padding:1em 1.15em 1.05em;display:flex;flex-direction:column;gap:.7em;box-shadow:0 .5em 2em rgba(0,0,0,.2)}
.be-to{display:flex;align-items:center;gap:.45em;line-height:1}
.be-to span{font-size:.62em;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#62635D;margin-right:.2em}
.be-to b{font-size:.72em;font-weight:500;padding:.42em .6em;background:#E6E6E0;color:#1B1C1B}
.be-text{position:relative;font-size:1.02em;line-height:1.35}
.be-ghost{visibility:hidden}
.be-typed{position:absolute;left:0;top:0;right:0}
.be-caret{display:inline-block;width:.09em;height:1em;background:#1B1C1B;vertical-align:-.14em;margin-left:.06em;animation:beBlink 1s steps(1) infinite}
@keyframes beBlink{50%{opacity:0}}
/* 2: the quote, on a square glass card */
.be-quote{width:100%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(.9em);backdrop-filter:blur(.9em);padding:1.1em 1.2em 1.15em;display:flex;flex-direction:column;gap:.75em}
.be-title{font-size:1.3em;font-weight:500;letter-spacing:-.02em;margin-top:-.15em}
.be-rows{display:flex;flex-direction:column;gap:.75em;padding:.75em 0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}
.be-row{display:grid;grid-template-columns:5.2em minmax(0,1fr);align-items:center}
.be-bar{display:block;height:.42em;border-radius:9em;background:rgba(255,255,255,.75);transform-origin:left}
.be-foot{display:flex;justify-content:flex-end}
.be-btn{position:relative;height:2.5em;min-width:9.2em;padding:0 1.2em;border-radius:9em;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;font-size:.8em;font-weight:600;line-height:1;white-space:nowrap}
.be-ok{position:absolute;inset:0;border-radius:9em;background:#DDF0D8;color:#17591F;display:flex;align-items:center;justify-content:center;gap:.45em;opacity:0}
.be-ok svg{display:block;width:1em;height:1em}
.be-cursor{position:absolute;left:0;top:0;width:1.25em;height:1.4em;opacity:0;z-index:5}
/* 3: the calendar, straight on the photo as on the pricing page */
.be-cal{width:100%;padding:0 1.1em .5em;display:flex;flex-direction:column;gap:.7em}
.be-head,.be-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));justify-items:center}
.be-head span{font-size:.62em;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.82);line-height:1}
.be-grid{row-gap:.4em}
.be-grid i{position:relative;display:block;width:1.12em;height:1.12em}
.be-grid i::before{content:"";position:absolute;left:50%;top:50%;width:.34em;height:.34em;margin:-.17em;border-radius:50%;background:rgba(255,255,255,.5)}
.be-grid i.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fff;opacity:var(--o,0);transform:scale(var(--s,.4))}
@media (prefers-reduced-motion: reduce){.be-caret{animation:none}}