/* Events v4: portrait, device-accurate mockups in the hero and employee flow. */

/* Use the same content gutter as the homepage and remove the oversized hero wordmark. */
.ep-shell{width:min(1180px,calc(100vw - 48px))}
.ep-hero:before{content:none!important;display:none!important}

/* Hero device composition */
.ep-app-stage{
  height:760px;
  perspective:1800px;
}
.ep-app-window,
.ep-app-companion{
  border:8px solid #111a17;
  border-radius:52px;
  background:#f7faf7;
  box-shadow:0 48px 95px #17382b38,0 0 0 1px #ffffff,inset 0 0 0 1px #26312d;
}
.ep-app-window{
  left:34%;
  top:34px;
  width:374px;
  height:704px;
  transform:translateX(-50%) rotateY(4deg) rotateZ(-4deg);
  animation:events-phone-primary 7s ease-in-out infinite;
}
.ep-app-companion{
  z-index:5;
  right:0;
  top:112px;
  width:344px;
  height:648px;
  transform:rotateY(-3deg) rotateZ(4deg);
  animation:events-phone-secondary 7s ease-in-out infinite;
}
.ep-app-window:before,
.ep-app-companion:before{
  top:7px;
  width:92px;
  height:24px;
  border-radius:0 0 15px 15px;
  background:#111a17;
}
.ep-app-window:after,
.ep-app-companion:after{
  content:"";
  position:absolute;
  z-index:35;
  left:50%;
  bottom:7px;
  width:104px;
  height:4px;
  border-radius:99px;
  background:#18231f;
  transform:translateX(-50%);
  opacity:.78;
}
.ep-app-top,
.ep-app-companion>header{
  padding-top:12px;
}
.ep-app-top span,
.ep-app-companion>header span{
  font-weight:800;
}
.ep-app-top>i,
.ep-app-companion>header>i{
  width:34px;
  height:9px;
  overflow:hidden;
  color:transparent;
  background:linear-gradient(90deg,#14211c 0 12%,transparent 12% 19%,#14211c 19% 36%,transparent 36% 43%,#14211c 43% 61%,transparent 61% 69%,#14211c 69% 100%);
  border-radius:2px;
}
.ep-app-tabs{
  padding:10px 13px 12px;
  border-bottom:1px solid #e3ebe6;
}
.ep-app-tabs button{
  height:35px;
  border-radius:11px;
  font-size:14px;
}
.ep-feature-event{border-radius:22px}
.ep-event-art{height:178px}
.ep-event-content{padding:18px}
.ep-event-content h3{font-size:24px}
.ep-event-content>button{height:45px;margin-top:15px}
.ep-app-nav{height:62px;padding-bottom:7px}
.ep-app-nav i{font-size:14px}
.ep-app-nav i:before{width:15px;height:15px;border-radius:5px}
.ep-companion-cover{height:205px}
.ep-companion-body{padding:23px}
.ep-companion-body h3{font-size:24px}
.ep-status-toast{z-index:8;left:11%;bottom:4px}
.ep-tap{left:calc(34% + 88px);top:500px}

@keyframes events-phone-primary{
  50%{transform:translateX(-50%) translateY(-10px) rotateY(2deg) rotateZ(-2.5deg)}
}
@keyframes events-phone-secondary{
  50%{transform:translateY(11px) rotateY(-1deg) rotateZ(2.5deg)}
}

/* Employee flow: keep the interface a portrait phone, never a wide browser card. */
.ep-flow-console{
  grid-template-columns:190px minmax(340px,390px) minmax(240px,315px);
  justify-content:center;
  gap:34px;
  padding:46px 42px;
}
.ep-live-app{
  justify-self:center;
  width:390px;
  min-height:0;
  height:706px;
  border:9px solid #071b15;
  border-radius:51px;
  background:#fff;
  box-shadow:0 45px 90px #00160f99,0 0 0 1px #78b79d55;
  transform:rotate(-1deg);
}
.ep-live-app:before{
  content:"";
  position:absolute;
  z-index:12;
  left:50%;
  top:6px;
  width:92px;
  height:24px;
  border-radius:0 0 15px 15px;
  background:#071b15;
  transform:translateX(-50%);
}
.ep-live-app:after{
  content:"";
  position:absolute;
  z-index:12;
  left:50%;
  bottom:8px;
  width:105px;
  height:4px;
  border-radius:99px;
  background:#173d2f;
  transform:translateX(-50%);
  opacity:.72;
}
.ep-live-header{
  height:68px;
  padding:15px 22px 0;
  border-bottom:1px solid #e1eae4;
  background:#fff;
  font-size:14px;
}
.ep-live-header>span{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid #d8e6de;
  border-radius:50%;
}
.ep-live-header>i{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid #d8e6de;
  border-radius:50%;
  color:#456457;
}
.ep-live-cover{
  height:205px;
  padding:30px 27px;
}
.ep-live-cover>span{font-size:39px}
.ep-live-cover>i{right:24px;bottom:22px;padding:10px 12px}
.ep-live-body{padding:24px 25px 30px}
.ep-live-body h3{font-size:28px}
.ep-live-body>p{font-size:17px}
.ep-live-agenda{margin-top:18px}
.ep-live-agenda span{padding:11px 0}
.ep-live-body>button{height:48px;margin-top:17px}
.ep-cursor{right:39px;bottom:42px}

@media(max-width:1120px){
  .ep-app-stage{width:min(100%,800px)}
  .ep-flow-console{grid-template-columns:175px minmax(330px,380px);gap:28px}
  .ep-flow-copy{grid-column:1/3;padding:20px 26px 5px}
  .ep-live-app{width:380px}
}

/* Shared Arabic treatment for the same renderer and component structure. */
.ep-ar .ep-page,
.ep-ar .ep-page h1,
.ep-ar .ep-page h2,
.ep-ar .ep-page h3,
.ep-ar .ep-page h4{font-family:"Alexandria","IBM Plex Sans Arabic",sans-serif}
.ep-ar .ep-back,.ep-ar .ep-kicker,.ep-ar .ep-heading,.ep-ar .ep-hero-copy,.ep-ar .ep-event-content,.ep-ar .ep-companion-body,.ep-ar .ep-flow-copy,.ep-ar .ep-life-copy,.ep-ar .ep-faq-list{text-align:right}

/* Arabic Events employee-flow introduction is an intentional centered composition. */
.ep-ar .ep-flow .ep-heading.ep-center{
  margin-inline:auto;
  text-align:center;
}
.ep-ar .ep-flow .ep-heading.ep-center>span{
  justify-content:center;
}
.ep-ar .ep-flow .ep-heading.ep-center>p{
  margin-inline:auto;
  text-align:center;
}
.ep-ar .ep-flow-rail button{text-align:right}
.ep-ar .ep-hero-proof span{padding-right:0;margin-right:0;padding-left:28px;margin-left:28px;border-right:0;border-left:1px solid #17352b1d}
.ep-ar .ep-hero-proof span:last-child{padding-left:0;margin-left:0;border-left:0}
.ep-ar .ep-speakers i{margin-right:0;margin-left:-7px}
.ep-ar .ep-speakers span{margin-left:0;margin-right:14px}
.ep-ar .ep-flow-rail button.active{transform:translateX(-8px)}
.ep-ar .ep-live-cover>i{right:auto;left:24px}
.ep-ar .ep-cursor{right:auto;left:39px;transform:scaleX(-1)}
.ep-ar .ep-actions b,.ep-ar .ep-mini-event>i{display:inline-block;transform:scaleX(-1)}

@media(max-width:980px){.ep-shell{width:min(820px,calc(100vw - 34px))}}

@media(max-width:760px){
  .ep-shell{width:calc(100vw - 28px);margin-inline:auto}
  .ep-app-stage{height:690px;margin-top:38px}
  .ep-app-window{
    left:36%;
    top:28px;
    width:292px;
    height:606px;
    border-width:7px;
    border-radius:43px;
    transform:translateX(-50%) rotateZ(-3deg);
  }
  .ep-app-companion{
    right:-96px;
    top:126px;
    width:244px;
    height:498px;
    border-width:7px;
    border-radius:41px;
    transform:rotateZ(4deg);
  }
  .ep-app-window:before,.ep-app-companion:before{width:72px;height:20px;top:5px}
  .ep-app-window:after,.ep-app-companion:after{width:82px;bottom:6px}
  .ep-app-top{height:58px}
  .ep-app-tabs{padding:7px 9px 9px}
  .ep-app-tabs button{height:31px;font-size:14px}
  .ep-app-scroll{padding:10px 11px 72px}
  .ep-event-art{height:148px}
  .ep-event-content{padding:14px}
  .ep-event-content h3{font-size:20px}
  .ep-event-content>button{height:42px}
  .ep-app-nav{height:55px}
  .ep-companion-cover{height:154px}
  .ep-companion-body{padding:15px}
  .ep-status-toast{left:0;bottom:7px}
  .ep-tap{left:calc(36% + 63px);top:435px}

  .ep-flow-console{display:flex;padding:15px 12px 26px}
  .ep-live-app{
    order:2;
    width:min(100%,350px);
    height:650px;
    border-width:8px;
    border-radius:45px;
    transform:none;
  }
  .ep-flow-rail{order:1}
  .ep-flow-copy{order:3;width:100%;padding:20px 9px 5px}
  .ep-live-app:before{width:80px;height:21px;top:5px}
  .ep-live-app:after{width:88px;bottom:7px}
  .ep-live-header{height:62px;padding-top:14px}
  .ep-live-cover{height:184px;padding:26px 22px}
  .ep-live-cover>span{font-size:34px}
  .ep-live-body{padding:21px}
  .ep-live-body h3{font-size:25px}
  .ep-live-agenda span{padding:10px 0}
  .ep-cursor{right:32px;bottom:36px}
  .ep-ar .ep-cursor{right:auto;left:32px}
  .ep-ar .ep-hero-proof span{padding-left:12px;margin-left:12px}
}

@media(prefers-reduced-motion:reduce){
  .ep-app-window,.ep-app-companion{animation:none}
}