/* User reference: names above heads, copy over the torso photograph. */
#product.product{display:block;min-height:0;padding:150px 0 96px}
#product>.split-bg{display:none}
#product .p-head{margin-bottom:64px}
#product .p-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:0;max-width:none;padding:0}
#product .p-col{--portrait-width:50vw;--portrait-head:clamp(96px,8.5vw,150px);--portrait-lift:clamp(18px,2vw,32px);--portrait-fade-rise:calc(var(--portrait-head) * .20);--portrait-fade-height:calc(var(--portrait-head) * 1.20);--copy-start:38vw;position:relative;isolation:isolate;display:block;grid-row:auto;min-width:0;padding:var(--copy-start) clamp(40px,5.7vw,110px) 48px;overflow:visible;background:var(--night);border:0;border-radius:0}
/* Group, 18:50: repeat the 10% step, for a total upper dissolve extension of 20%. */
#product .product-portrait{position:absolute;inset:calc(0px - var(--portrait-fade-rise)) 0 0;z-index:-1;margin:0}
#product .product-portrait picture{position:absolute;inset:0;display:block;overflow:hidden;border-radius:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.008) calc(var(--portrait-fade-height) * .10),rgba(0,0,0,.045) calc(var(--portrait-fade-height) * .22),rgba(0,0,0,.14) calc(var(--portrait-fade-height) * .36),rgba(0,0,0,.31) calc(var(--portrait-fade-height) * .50),rgba(0,0,0,.55) calc(var(--portrait-fade-height) * .64),rgba(0,0,0,.78) calc(var(--portrait-fade-height) * .78),rgba(0,0,0,.94) calc(var(--portrait-fade-height) * .90),#000 var(--portrait-fade-height));mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.008) calc(var(--portrait-fade-height) * .10),rgba(0,0,0,.045) calc(var(--portrait-fade-height) * .22),rgba(0,0,0,.14) calc(var(--portrait-fade-height) * .36),rgba(0,0,0,.31) calc(var(--portrait-fade-height) * .50),rgba(0,0,0,.55) calc(var(--portrait-fade-height) * .64),rgba(0,0,0,.78) calc(var(--portrait-fade-height) * .78),rgba(0,0,0,.94) calc(var(--portrait-fade-height) * .90),#000 var(--portrait-fade-height))}
/* Blur the upper background only; the effect reaches zero before the face. */
#product .product-portrait::after{content:"";position:absolute;inset:0 0 auto;height:calc(var(--portrait-head) - var(--portrait-lift) + var(--portrait-fade-rise));z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.85) 25%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.15) 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.85) 25%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.15) 80%,transparent 100%)}
/* Keep the approved 28% enlargement; lift the portraits away from the copy. */
#product .product-portrait img{position:absolute;top:calc(var(--portrait-head) - var(--portrait-width) * .763 - var(--portrait-lift) + var(--portrait-fade-rise));left:-14%;display:block;width:128%;max-width:none;height:auto;object-fit:contain;filter:none;transform:none;mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,transparent 100%)}
/* Ivan, 24 October: extend the lower fade over the photograph before the text. */
#product .product-portrait picture::before{content:"";position:absolute;inset:var(--portrait-fade-rise) 0 0;z-index:1;background:linear-gradient(180deg,transparent 0,transparent calc(var(--copy-start) * .64),rgba(29,22,18,.14) calc(var(--copy-start) * .78),rgba(29,22,18,.50) calc(var(--copy-start) * .90),rgba(29,22,18,.84) var(--copy-start),rgba(29,22,18,.96) calc(var(--copy-start) + 56px),var(--night) calc(var(--copy-start) + 140px));pointer-events:none}
/* Keep faces clear and retain the soft lower blur behind the fade. */
#product .product-portrait picture::after{content:"";position:absolute;inset:var(--portrait-fade-rise) 0 0;background:var(--portrait-edge,linear-gradient(transparent,transparent));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--portrait-width) * .60),rgba(0,0,0,.10) var(--copy-start),rgba(0,0,0,.38) calc(var(--portrait-width) * .96),rgba(0,0,0,.74) calc(var(--portrait-width) * 1.18),#000 calc(var(--portrait-width) * 1.42));mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--portrait-width) * .60),rgba(0,0,0,.10) var(--copy-start),rgba(0,0,0,.38) calc(var(--portrait-width) * .96),rgba(0,0,0,.74) calc(var(--portrait-width) * 1.18),#000 calc(var(--portrait-width) * 1.42))}
#product .ph-name{position:absolute;top:calc(24px + var(--portrait-fade-rise));left:20px;right:20px;z-index:2;display:block;margin:0;text-align:center;font-size:clamp(13px,1.2vw,18px);line-height:1.5;color:rgba(255,255,255,.70);text-shadow:0 1px 5px rgba(29,22,18,.25)}
#product .ph-name b{display:block;font-size:clamp(18px,1.6vw,25px);font-weight:600;color:rgba(255,255,255,.88)}
#product .p-col h3{margin-top:0;max-width:none}
#product .p-col h3,#product .p-col .ticks{text-shadow:none}
#product .p-end{margin-top:70px;text-align:center}
#product .p-end-accent{color:var(--accent)}
.research .journal{opacity:.56;filter:saturate(.5);box-shadow:none;transition:opacity .25s,filter .25s,transform .4s}
.research .journal:hover,.research .journal:focus-visible{opacity:1;filter:none}
/* Mirror only the image: ambulance left, medical manager right. */
#urgent>section>.pbg img{transform:scaleX(-1)!important;filter:none;object-position:100% 50%!important}
/* Server reference: the offer stays over one team photograph, without distortion. */
#pricing>.pbg{height:100%}
#pricing>.pbg img{filter:none;transform:none;object-position:50% 40%}
#application>.xfade{display:none}
/* Ivan, circle 13:26: one blurred team photograph with soft top/bottom edges. */
#application>.pbg{mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 72%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 72%,transparent 100%)}
#application>.pbg img{filter:blur(8px) saturate(.9);transform:scale(1.06)}
/* Blur only the lower edge of the offer photo, then fade into the form background. */
@media(min-width:901px){
 /* Keep the closing sentence on two balanced desktop lines. */
 #product .p-end-h{max-width:1120px;font-size:clamp(24px,2.15vw,30px);line-height:1.22;text-wrap:balance}
 #product .p-end-accent{white-space:nowrap}
 /* Let adjacent portraits meet through the same dark background. */
 #product .p-col:first-child{--portrait-edge:linear-gradient(90deg,transparent calc(100% - clamp(24px,4vw,72px)),var(--night) 100%)}
 #product .p-col:last-child{--portrait-edge:linear-gradient(90deg,var(--night) 0,transparent clamp(24px,4vw,72px))}
 #pricing>.pbg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 170px,#000 calc(100% - 180px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 170px,#000 calc(100% - 180px),transparent 100%)}
 #pricing>.pbg::after{content:"";position:absolute;inset:auto 0 0;height:220px;clip-path:inset(0);pointer-events:none;-webkit-backdrop-filter:blur(8px) saturate(.9);backdrop-filter:blur(8px) saturate(.9);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 75%);mask-image:linear-gradient(180deg,transparent 0,#000 75%)}
}
@media(max-width:900px){
 #product.product{padding:60px 0 20px}
 #product .p-cols{grid-template-columns:minmax(0,1fr);row-gap:0;margin:32px auto 0}
 #product .p-col{--portrait-width:100vw;--portrait-head:clamp(86px,22vw,160px);--portrait-lift:clamp(16px,5vw,44px);--copy-start:76vw;padding:var(--copy-start) 24px 40px}
 #product .ph-name{top:calc(12px + var(--portrait-fade-rise));font-size:13px}
 #product .ph-name b{font-size:18px}
 #product .p-head{margin-bottom:0}
 #product .p-end{text-align:left;margin-top:40px}
 #pricing>.pbg{height:var(--ph)}
 /* Keep the mobile application focused on the heading and form. */
 #application{padding-top:40px}
 #application>.pbg{display:none}
 #application>.wrap{padding-top:0}
}
