/* Customer stories + customer video carousels.
   Ported unchanged from start.rogalife.com (calm/f/top): base rules from _astro/stress.CU-pbaVn.css,
   then the page-level overrides. Only the variables they rely on are defined here. */
.roga-carousel{--bg:#FAF8F4;--text:#1a3b3c;--muted:#5b6b6b;--border-soft:rgba(26,59,60,.10);--accent:#1a3b3c;--accent-h:#0f2829;--text-on-dark:#fff;--font-system:ui-sans-serif,system-ui,sans-serif;--dur-sm:200ms;--ease-out:cubic-bezier(0.23,1,0.32,1)}
.roga-instance-images.roga-carousel--bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);position:relative;font-family:"Chillax",var(--font-system, ui-sans-serif);margin-bottom:24px;background:transparent}
.roga-instance-images .roga-viewport{overflow:hidden;padding:20px 40px;box-sizing:border-box;touch-action:pan-y}
.roga-instance-images .roga-track{display:flex;gap:0;will-change:transform}
.roga-instance-images .roga-slide{flex:0 0 30%;display:flex;flex-direction:column;box-sizing:border-box}
.roga-instance-images .roga-slide-inner-box{padding:8px;height:100%}
.roga-instance-images .roga-slide-card{background:var(--bg, #FAF8F4);border-radius:22px;padding:22px;display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1px solid var(--border-soft);box-shadow:0 10px 30px #1a3b3c0f}
.roga-instance-images .image-container{position:relative;width:100%;padding-top:90%;overflow:hidden;border-radius:14px;margin-bottom:22px;background:#f1ece6;flex-shrink:0}
.roga-instance-images .main-image{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.roga-instance-images .slide-content{display:flex;flex-direction:column;flex-grow:1}
.roga-instance-images .slide-title{font-size:18px;font-weight:600;line-height:1.35;margin:0 0 12px;color:var(--text);letter-spacing:-.01em}
.roga-instance-images .slide-text{font-size:15px;font-weight:400;line-height:1.6;color:var(--muted);margin:0 0 22px}
.roga-instance-images .profile-row{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border-soft)}
.roga-instance-images .profile-avatar{width:44px;height:44px;border-radius:50%;-o-object-fit:cover;object-fit:cover;flex-shrink:0}
.roga-instance-images .profile-info{display:flex;flex-direction:column;line-height:1.15}
.roga-instance-images .profile-name{font-weight:600;font-size:14px;margin:0;color:var(--text)}
.roga-instance-images .profile-handle{font-size:13px;color:var(--muted);margin:0}
.roga-instance-images .roga-nav-item{position:absolute;top:50%;transform:translateY(-50%);z-index:50;width:52px;height:52px;border-radius:999px;background:var(--accent);color:var(--text-on-dark);font-size:30px;line-height:1;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px #1a3b3c38;transition:transform .2s ease,background .2s ease}
.roga-instance-images .roga-nav-item:hover{background:var(--accent-h);transform:translateY(-50%) scale(1.05)}
.roga-instance-images .roga-arrow-prev{left:12px}
.roga-instance-images .roga-arrow-next{right:12px}
@media (max-width: 991px){.roga-instance-images .roga-slide{flex-basis:45%}}
@media (max-width: 600px){.roga-instance-images .roga-slide{flex-basis:90%}.roga-instance-images .slide-text{font-size:14px;line-height:1.55}}
.roga-instance-videos.roga-carousel--bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);position:relative}
.roga-instance-videos .roga-viewport{overflow:hidden;padding:0 50px;box-sizing:border-box;touch-action:pan-y}
.roga-instance-videos .roga-track{display:flex;gap:18px;will-change:transform}
.roga-instance-videos .roga-slide{flex:0 0 calc((100% - 72px)/5)}
.roga-instance-videos .roga-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:50;width:52px;height:52px;border-radius:999px;background:#ffffffeb;color:#1a3b3c;font-size:30px;line-height:1;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px #0000002e,inset 0 1px #ffffff80;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .2s ease,background .2s ease}
.roga-instance-videos .roga-btn:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.roga-instance-videos .roga-prev{left:12px}
.roga-instance-videos .roga-next{right:12px}
.roga-instance-videos .cf-video-wrapper{position:relative;padding-top:177.77%;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #1a3b3c1a}
.roga-instance-videos .cf-video{position:absolute;top:0;left:0;width:100%;height:100%;border:none;pointer-events:none}
.roga-instance-videos .cf-play-btn{position:absolute;inset:0;background:linear-gradient(180deg,#0000,#0003);border:none;cursor:pointer;z-index:2;display:grid;place-items:center;color:var(--accent);transition:background .25s ease,opacity .25s ease;-webkit-tap-highlight-color:transparent}
.roga-instance-videos .cf-play-btn .cf-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#ffffff2e;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:0 10px 28px #00000038,inset 0 1px #ffffff8c;color:#fff;transition:transform .25s ease,opacity .25s ease,background .25s ease}
.roga-instance-videos .cf-play-btn:hover .cf-icon{background:#ffffff4d}
.roga-instance-videos .cf-play-btn .cf-icon-play{padding-left:4px}
.roga-instance-videos .cf-play-btn .cf-icon-pause{display:none}
.roga-instance-videos .cf-play-btn:hover .cf-icon{transform:scale(1.07)}
.roga-instance-videos .cf-video-wrapper.is-playing .cf-play-btn{background:transparent;opacity:0}
.roga-instance-videos .cf-video-wrapper.is-playing .cf-play-btn .cf-icon{opacity:0}
@media (max-width: 991px){.roga-instance-videos .roga-slide{flex-basis:calc((100% - (18px * 2)) / 3)}}
@media (max-width: 767px){.roga-instance-videos .roga-slide{flex-basis:calc((100% - 18px)/2)}.roga-instance-videos .cf-play-btn .cf-icon{width:56px;height:56px}}
@media (max-width: 479px){.roga-instance-videos .roga-slide{flex-basis:100%}}
.roga-instance-images .roga-nav-item{background: rgba(255, 255, 255, 0.92) !important;
    color: #1a3b3c !important;
    border: 1px solid rgba(26, 59, 60, 0.12) !important;
    box-shadow: 0 12px 28px rgba(26, 59, 60, 0.18),
                inset 0 1px rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);}
.roga-instance-images .roga-nav-item:hover{background: #ffffff !important;}
@media (max-width: 1024px){
  .roga-instance-images .roga-nav-item{display: none !important;}
}
@media (min-width: 1025px){
  .roga-instance-images .roga-slide{flex: 0 0 22% !important;}
}
.roga-instance-images .roga-slide-card{background: rgba(22, 26, 33, 0.26) !important;
    border: 1px solid #ffffff38 !important;
    box-shadow: 0 14px 32px rgba(26, 59, 60, 0.10) !important;}
.roga-instance-images .roga-slide-card .slide-title,
  .roga-instance-images .roga-slide-card .profile-name{color: #ffffff !important;}
.roga-instance-images .roga-slide-card .slide-text,
  .roga-instance-images .roga-slide-card .profile-handle{color: rgba(255, 255, 255, 0.75) !important;}
.roga-instance-images .roga-slide-card .profile-row{border-top-color: rgba(255, 255, 255, 0.15) !important;}
@media (max-width: 1024px){
  .roga-instance-videos .roga-btn,
    .roga-instance-videos .roga-prev,
    .roga-instance-videos .roga-next{display: none !important;}
}
@media (min-width: 992px){
  .roga-instance-videos .roga-slide{flex: 0 0 calc((100% - 72px) / 5) !important;}
  .roga-instance-videos .roga-slide{background: #ffffff1a !important;
      border: 1px solid #ffffff38 !important;
      border-radius: 22px !important;
      padding: 10px !important;
      box-sizing: border-box;
      box-shadow: 0 14px 32px rgba(26, 59, 60, 0.10) !important;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);}
}
.roga-instance-videos .cf-video-wrapper{position: relative !important;
    cursor: pointer;}
.roga-instance-videos .cf-video-wrapper iframe.cf-video{pointer-events: none !important;}
.roga-instance-videos .cf-video-wrapper .cf-play-btn{position: absolute !important;
    left: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 4;
    
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    flex: 0 0 46px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.05) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.6) 100%),
      rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    color: #1a3b3c !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;}
.roga-instance-videos .cf-video-wrapper .cf-play-btn::before{content: "";
    position: absolute;
    top: 3px;
    left: 8%;
    right: 8%;
    height: 38%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.0) 100%);
    pointer-events: none;
    opacity: 0.9;}
.roga-instance-videos .cf-video-wrapper .cf-play-btn,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn .cf-icon,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn .cf-icon-play,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn .cf-icon-pause,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn svg{color: #000 !important;
    position: relative;
    z-index: 1;}
.roga-instance-videos .cf-video-wrapper .cf-play-btn svg,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn svg * ,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn svg path,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn svg rect{fill: #000 !important;
    stroke: none !important;}
.roga-instance-videos .cf-video-wrapper .cf-play-btn .cf-icon,
  .roga-instance-videos .cf-video-wrapper .cf-play-btn:hover .cf-icon{width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 !important;}
.roga-instance-videos .cf-video-wrapper:not(.is-playing) .cf-play-btn .cf-icon-play{display: inline-flex !important;}
.roga-instance-videos .cf-video-wrapper:not(.is-playing) .cf-play-btn .cf-icon-pause{display: none !important;}
.roga-instance-videos .cf-video-wrapper.is-playing .cf-play-btn .cf-icon-play{display: none !important;}
.roga-instance-videos .cf-video-wrapper.is-playing .cf-play-btn .cf-icon-pause{display: inline-flex !important;}
.roga-instance-videos .cf-video-wrapper.is-playing .cf-play-btn{background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.18) 70%, rgba(255,255,255,0.05) 100%),
      linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.6) 100%),
      rgba(255,255,255,0.45) !important;}
.roga-instance-videos .cf-video-wrapper.is-playing .cf-play-btn .cf-icon{opacity: 1 !important;}
.roga-instance-videos .cf-video-wrapper .cf-play-btn:hover{transform: scale(1.04) !important;
    transition: transform 0.2s ease;}
@media (min-width: 721px){
  .roga-instance-videos .cf-video-wrapper .cf-play-btn{opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;}
  .roga-instance-videos .cf-video-wrapper:hover .cf-play-btn,
    .roga-instance-videos .cf-video-wrapper:focus-within .cf-play-btn{opacity: 1;
      pointer-events: auto;}
}
@media (max-width: 720px){
  .roga-instance-videos .cf-video-wrapper .cf-play-btn{opacity: 1 !important;
      pointer-events: auto !important;}
}
@media (hover: none), (pointer: coarse){
  #hero-v2 .hv-trust:hover,
    #hero-v2 .hv-btn:hover,
    }
.roga-carousel .cf-video-wrapper,
  .roga-carousel .image-container,
  .roga-carousel .roga-slide-card{border-radius: 34px !important;
    overflow: hidden !important;
    -webkit-clip-path: inset(0 round 34px);
            clip-path: inset(0 round 34px);}
.roga-carousel .roga-slide-card{border-radius: 34px;
    -webkit-clip-path: inset(0 round 34px);
            clip-path: inset(0 round 34px);}
.roga-carousel .cf-video-wrapper iframe.cf-video,
  .roga-carousel .cf-video-wrapper video,
  .roga-carousel .image-container img{border-radius: 34px !important;}
.roga-carousel .cf-poster{position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 34px;
    z-index: 1;
    transition: opacity var(--dur-sm) var(--ease-out);}
.roga-carousel .cf-video-wrapper.has-video .cf-poster{opacity: 0;}
.roga-carousel .cf-video-wrapper iframe.cf-video{z-index: 0;}
.roga-carousel .cf-video-wrapper .cf-play-btn{z-index: 2;}
@media (prefers-reduced-motion: reduce){
  .roga-carousel .cf-poster{transition: none;}
}
.roga-instance-videos .roga-slide{border-radius: 44px !important;}
.roga-carousel .cf-video-wrapper,
  .roga-carousel .cf-poster,
  .roga-carousel .cf-video-wrapper iframe.cf-video,
  .roga-carousel .cf-video-wrapper video{border-radius: 34px !important;}
.roga-carousel .cf-video-wrapper{overflow: hidden !important;
    -webkit-clip-path: inset(0 round 34px);
            clip-path: inset(0 round 34px);}
@media (max-width: 767px){
  #reviews-video .roga-instance-videos .roga-viewport{padding: 0 max(22px, calc((100% - 360px) / 2));}
  #reviews-video .roga-instance-videos .roga-track{gap: 16px;}
  #reviews-video .roga-instance-videos .roga-slide{flex-basis: 100%;}
}