/* Fora's What-you-get frame and type metrics, with Acadex content.
   Original imagery is preserved in assets/benefits; text-free landscape
   derivatives allow the interface to remain live, sharp HTML. */
#how-it-works .benefit-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:8px;border:0;border-radius:16px;background:rgba(15,15,15,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);isolation:isolate}
#how-it-works .benefit-card:before{content:'';position:absolute;inset:1px;border-radius:15px;background:rgba(15,15,15,.85);z-index:-1;pointer-events:none}
/* Keep the 1px glow inside the clipped frame. Source: proximity 490,
   radius 735, white at 25%, smoothing .05 in the shared pointer driver. */
#how-it-works .benefit-card[data-glow]:after{inset:0;border:1px solid transparent;background:radial-gradient(var(--glow-radius,735px) circle at var(--glow-x,0px) var(--glow-y,0px),rgba(255,255,255,.25),transparent) border-box;opacity:var(--glow-opacity,0)}
#how-it-works .benefit-copy{padding:40px;gap:48px;justify-content:flex-start;align-items:flex-start;min-width:0;height:100%;overflow:clip;font-family:Inter,sans-serif}
#how-it-works .benefit-copy .eyebrow{display:inline-flex;align-items:center;gap:12px;height:30px;flex:none;padding:0;margin:0;background:none;border:0;font:400 14px/21px Inter,sans-serif;letter-spacing:-.28px;color:rgba(255,255,255,.65);text-transform:none}
#how-it-works .benefit-copy .eyebrow:before{content:'';width:7px;height:7px;flex:none;border:0;border-radius:50%;background:#fff3f0;box-shadow:none;animation:benefit-chip-pulse 1s linear infinite alternate}
@keyframes benefit-chip-pulse{from{opacity:1}to{opacity:0}}
#how-it-works .benefit-message{display:flex;flex-direction:column;gap:24px;flex:1;min-height:0;width:100%;padding-right:24px}
#how-it-works .benefit-copy h3{font:400 28px/1.35 Inter,sans-serif;letter-spacing:-.03em;color:#fff3f0;margin:0}
#how-it-works .benefit-copy p{font:400 14px/21px Inter,sans-serif;letter-spacing:-.28px;color:rgba(255,255,255,.8);max-width:none;margin:0}
#how-it-works .benefit-foot{display:flex;align-items:center;gap:8px;margin:0;font:400 14px/21px Inter,sans-serif;letter-spacing:-.28px;color:rgba(255,255,255,.8);flex:none}
#how-it-works .benefit-cross{width:21px;height:21px;flex:none;color:rgba(255,255,255,.65)}
#how-it-works .benefit-media{position:relative;overflow:hidden;min-width:0;height:100%;border-radius:4px 8px 8px 4px;background:#000;isolation:isolate}
#how-it-works .benefit-media:after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);border-radius:inherit;pointer-events:none;z-index:3}
#how-it-works .reverse .benefit-media{order:-1;border-radius:8px 4px 4px 8px}
#how-it-works .reverse .benefit-copy{order:0}
#how-it-works .benefit-visual{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0;background:none;overflow:hidden;container-type:inline-size}
#how-it-works .benefit-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;pointer-events:none}
#how-it-works :is(.collection-card,.review-card,.library-card){position:relative;width:84.6%;max-width:none;padding:6cqw;border:1px solid rgba(255,255,255,.06);border-radius:3cqw;background:rgba(255,255,255,.085);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:none;transform:none;color:#fff3f0;font-family:Inter,sans-serif}
#how-it-works .collection-card{min-height:74%;display:flex;flex-direction:column;justify-content:center}
#how-it-works .collection-card:hover{transform:none}
#how-it-works .small-brand{font:500 3cqw/1.5 Inter,sans-serif;letter-spacing:.06em;color:#fff3f0;justify-content:flex-end}
#how-it-works .small-brand span{font:400 2cqw/1.5 Inter,sans-serif;letter-spacing:0;color:rgba(255,255,255,.65)}
#how-it-works :is(.collection-card,.review-card,.library-card) h4{font:400 4.5cqw/1.3 Inter,sans-serif;letter-spacing:-.03em;color:#fff3f0;margin:5cqw 0}
#how-it-works .collection-row{padding:3.4cqw 0;border-color:rgba(255,255,255,.1);gap:2.6cqw;font-size:3cqw;line-height:1.5}
#how-it-works .collection-row small{font-size:2.4cqw;line-height:1.5;color:rgba(255,255,255,.65);margin-top:.4cqw}
#how-it-works .collection-row .icon{width:3.6cqw;height:3.6cqw;color:rgba(255,255,255,.8)}
#how-it-works .collection-card .button{min-height:10.5cqw;padding:2.8cqw 3cqw;border:0;border-radius:1.8cqw;background:#fff;color:#000;font:400 3cqw/1.5 Inter,sans-serif;margin-top:4cqw;box-shadow:none;transform:none;text-align:center;justify-content:center}
#how-it-works .demo-topbar{font:400 3cqw/1.5 Inter,sans-serif;color:rgba(255,255,255,.8);padding-bottom:3cqw;border-color:rgba(255,255,255,.1)}
#how-it-works .mini-badge{font:400 2.4cqw/1.5 Inter,sans-serif;padding:.8cqw 1.8cqw;color:rgba(255,255,255,.8);border:0;background:rgba(255,255,255,.1)}
#how-it-works .review-heading{gap:2.5cqw;margin:4.5cqw 0}
#how-it-works .review-heading h4{font-size:3.6cqw;margin:0 0 1.5cqw}
#how-it-works .review-heading p{font:400 2.6cqw/1.5 Inter,sans-serif;color:rgba(255,255,255,.65)}
#how-it-works .review-ring{width:8cqw;height:8cqw;flex:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff3f0}
#how-it-works .review-line{padding:4cqw 0;gap:2cqw;font:400 3cqw/1.5 Inter,sans-serif;border-color:rgba(255,255,255,.1)}
#how-it-works .review-line strong{font-size:2.7cqw;font-weight:400;color:rgba(255,255,255,.8)}
#how-it-works .review-insight{margin-top:4cqw;padding:3cqw;gap:2cqw;border:0;border-radius:2cqw;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
#how-it-works .review-insight p{font:400 2.7cqw/1.5 Inter,sans-serif;color:inherit}
#how-it-works .library-card{width:88%;background:rgba(255,255,255,.1)}
#how-it-works .library-entry{padding:4cqw 0;gap:2cqw;border-color:rgba(255,255,255,.1);font:400 3cqw/1.5 Inter,sans-serif}
#how-it-works .library-entry small{font:400 2.3cqw/1.5 Inter,sans-serif;margin-top:.8cqw;color:rgba(255,255,255,.65)}
#how-it-works .library-entry>span{font:400 2.2cqw/1.5 Inter,sans-serif;color:rgba(255,255,255,.8)}
#how-it-works .library-entry .icon{width:3.7cqw;height:3.7cqw;color:rgba(255,255,255,.8)}
@media(min-width:810px) and (max-width:1279px){
 #how-it-works .benefit-copy{padding:28px;gap:48px}
 #how-it-works .benefit-copy h3{font-size:24px}
 #how-it-works .benefit-message{padding-right:24px;gap:24px}
}
@media(max-width:809.98px){
 #how-it-works .benefit-card{grid-template-columns:minmax(0,1fr);padding:8px}
 #how-it-works .benefit-copy{padding:20px;gap:17px;height:auto}
 #how-it-works .benefit-message{flex:none;padding:0;gap:16px}
 #how-it-works .benefit-copy h3{font-size:22px;line-height:1.35}
 #how-it-works .benefit-media,#how-it-works .reverse .benefit-media{order:-1;width:100%;height:auto;aspect-ratio:532/612;border-radius:8px}
 #how-it-works .benefit-visual{min-height:0;height:100%}
}
@media(prefers-reduced-motion:reduce){#how-it-works .benefit-copy .eyebrow:before{animation:none}}