/* Portale paziente (home): soft entry/exit instead of a hard white→black edge,
   and a readable, uncropped phone on small screens. Loaded last. */

/* 1. Soft transitions at the top and bottom of the dark section */
.showcase.portal-showcase{display:flow-root;padding-bottom:var(--portal-fade,300px)}
.portal-showcase::after{position:absolute!important;left:0;right:0;bottom:0}
.portal-showcase::before,.portal-showcase::after{content:"";display:block;height:var(--portal-fade,300px);pointer-events:none;position:relative;z-index:0}
.portal-showcase::before{background:linear-gradient(180deg,#fff 0%,#f3f7f3 9%,#dce9df 20%,#b2cbb9 32%,#7a9d87 44%,#4a6f5b 56%,#2a4a3b 67%,#173027 78%,#0d1b16 89%,#070a0b 100%)}
.portal-showcase::after{background:linear-gradient(0deg,#fff 0%,#f3f7f3 9%,#dce9df 20%,#b2cbb9 32%,#7a9d87 44%,#4a6f5b 56%,#2a4a3b 67%,#173027 78%,#0d1b16 89%,#070a0b 100%)}
#prova-assistente{border-bottom:0}
/* Let the green halo bleed into the fade instead of being cut on a straight line */
.portal-showcase .showcase-sticky{overflow-x:clip;overflow-y:visible}
.portal-showcase .showcase-sticky::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 160px,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(180deg,transparent,#000 160px,#000 calc(100% - 160px),transparent)}
.portal-showcase .story-progress{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* The section that follows sits on white: give it room after the fade */
.portal-showcase+.portal-advantages{padding-top:20px}

/* Desktop/tablet: keep the whole phone inside the pinned frame */
@media(min-width:641px){
  .portal-showcase .showcase-sticky{padding-block:28px;box-sizing:border-box}
  .portal-showcase .portal-phone{--portal-frame-width:min(260px,calc((100svh - 94px - 120px)*9/19.5))}
}
@media(min-width:1200px) and (min-height:741px){.portal-showcase .portal-phone{--portal-frame-width:min(280px,calc((100svh - 94px - 120px)*9/19.5))}}

/* 2. Phones: the preview flows with the page (scene buttons switch the screen) */
@media(max-width:640px){
  .portal-showcase{--portal-fade:190px}
  .showcase.portal-showcase{height:auto;min-height:0;padding:0 0 var(--portal-fade)}
  .portal-showcase .showcase-sticky{position:relative;top:0;height:auto;min-height:0;max-height:none;padding:26px 0 34px;overflow-x:clip;overflow-y:visible}
  .portal-showcase .showcase-inner{width:calc(100% - 40px);gap:26px}
  .portal-showcase .showcase-copy{text-align:center}
  .portal-showcase .showcase-copy>.eyebrow{display:block;font-size:10px;letter-spacing:.12em;color:#9cc3a9;margin:0 0 12px}
  .portal-showcase .showcase-copy h2{font-size:36px;line-height:1.04;letter-spacing:-.045em;margin:0}
  .portal-showcase .story-intro{display:block;font-size:15px;line-height:1.6;color:#b5c8bb;max-width:330px;margin:14px auto 0}
  .portal-showcase .portal-network{display:inline-flex;font-size:11px;padding:7px 12px;margin-top:16px;color:#a9c6b1;border-color:#9abca04d}
  .portal-showcase .portal-story-description{max-width:340px;min-height:0;margin:24px auto 0}
  .portal-showcase .portal-story-description>span{display:block;font-size:11px;letter-spacing:.1em;color:#8fb39b;margin-bottom:8px}
  .portal-showcase .portal-story-description h3{font-size:23px;line-height:1.2}
  .portal-showcase .portal-story-description>p{font-size:14px;line-height:1.6;color:#b5c8bb;margin-top:8px;min-height:4.8em}
  .portal-showcase .showcase-controls{flex-wrap:wrap;gap:8px;margin-top:18px}
  .portal-showcase .showcase-controls button{font-size:13px;min-height:44px;padding:10px 16px}
  .portal-showcase .portal-device-wrap{padding-bottom:0}
  .portal-showcase .portal-phone{--portal-frame-width:min(262px,calc(100vw - 96px));scale:1;margin:0 auto;transform:none!important}
  .portal-showcase .portal-rings{width:min(360px,92vw);height:min(360px,92vw)}
  .portal-showcase .portal-phone-header{font-size:15px}
  .portal-showcase .portal-phone-header small{font-size:9px}
  .portal-showcase .portal-view>p:first-child{font-size:12px}
  .portal-showcase .portal-appointment>strong{font-size:22px}
  .portal-showcase .portal-action-preview{font-size:11px;padding:11px}
  .portal-showcase .portal-file strong{font-size:12px}
  .portal-showcase .portal-file small,.portal-showcase .portal-question p{font-size:10px}
  .portal-showcase .portal-question strong{font-size:13px}
  .portal-showcase .portal-phone-footer span{font-size:9px}
  .portal-showcase .portal-device-wrap>.story-caption{font-size:10px;margin-top:16px;color:#8fa99a}
  .portal-showcase .portal-waiting{display:block}.portal-showcase .portal-waiting strong{font-size:12px}.portal-showcase .portal-waiting p{font-size:10px}
  .portal-showcase .story-progress{display:none}
}
@media(max-width:350px){.portal-showcase .showcase-copy h2{font-size:31px}.portal-showcase .showcase-controls button{font-size:12px;padding:9px 12px}}