.soe-course-wrapper{--soe-accent:#ED884D;--soe-soft:rgba(237,136,77,.24);--soe-hero-mid:rgba(224,164,104,.747);--soe-hero-end:rgba(213,93,23,.9);--soe-hero-fade:rgba(237,136,77,.9);--soe-hero-circle:rgba(237,136,77,.9);max-width:1200px;margin:0 auto;padding:16px 0 48px;display:flex;flex-direction:column;gap:70px}
body.e1dp-election-mode .soe-course-wrapper{--soe-accent:var(--e1dp-election-base);--soe-soft:var(--e1dp-election-soft);--soe-hero-mid:rgba(var(--e1dp-election-base-rgb),.74);--soe-hero-end:rgba(var(--e1dp-election-base-rgb),.9);--soe-hero-fade:rgba(var(--e1dp-election-base-rgb),.86);--soe-hero-circle:rgba(var(--e1dp-election-base-rgb),.9)}
.soe-course-layout{display:flex;gap:57px;align-items:flex-start}

.soe-hero{position:relative;height:320px;border-radius:8px;overflow:hidden;background-image:linear-gradient(243.9deg,rgba(0,0,0,0) 12.2%,var(--soe-hero-mid) 44.3%,var(--soe-hero-end) 75.1%,var(--soe-hero-fade) 97.4%);color:#fff}
.soe-hero__decor{position:absolute;inset:0;pointer-events:none}
.soe-hero__circle{position:absolute;border-radius:9999px;display:block}
.soe-hero__circle--large{width:204px;height:204px;left:560px;top:72px;background:linear-gradient(270deg,rgba(237,136,77,0) 0%,var(--soe-hero-circle) 100%);opacity:.38}
.soe-hero__circle--small{width:85px;height:85px;left:525px;top:102px;background:rgba(255,255,255,.16)}
.soe-hero__image{position:absolute;top:0;right:0;bottom:0;width:40.7%;display:flex;align-items:stretch;justify-content:center;pointer-events:none}
.soe-hero__img,.soe-hero__fallback{height:102%;width:100%;object-fit:cover;object-position:center;display:block}
.soe-hero__content{position:relative;z-index:1;width:58%;max-width:560px;padding:48px 40px 32px}
.soe-hero__title{margin:0 0 16px;font-size:24px;font-weight:600;line-height:1.2;color:#fff}
.soe-hero__text{margin:0;font-size:16px;line-height:1.35;color:#fff}
.soe-hero__tags{position:absolute;z-index:1;left:40px;bottom:40px;display:flex;flex-wrap:wrap;gap:8px}
.soe-hero__tag{display:inline-flex;align-items:center;justify-content:center;height:40px;border:1px solid rgba(255,255,255,.83);border-radius:9999px;padding:0 16px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap}

.soe-info{width:375px;min-width:375px;max-width:375px;flex:0 0 375px;border:1px solid rgba(0,0,0,.2);border-radius:8px;background:#fff;padding:40px;display:flex;flex-direction:column;gap:24px;overflow:hidden}
.dark .soe-info{background:#1f2937;border-color:rgba(255,255,255,.2)}
.soe-info__title{margin:0;font-size:20px;font-weight:600;line-height:1.25;color:rgba(0,0,0,.8)}
.dark .soe-info__title{color:rgba(255,255,255,.86)}
.soe-info__badge{display:inline-flex;align-self:flex-start;align-items:center;gap:2px;min-height:31px;border-radius:9999px;background:rgba(255,191,0,.2);padding:6px 8px;font-size:12px;font-weight:600;color:rgba(0,0,0,.6);white-space:nowrap}
.dark .soe-info__badge{color:rgba(255,255,255,.75)}
.soe-info__badge .material-icons-outlined{font-size:21px;line-height:1;color:#FFBF00}
body.e1dp-election-mode .soe-info__badge{background:var(--e1dp-election-soft);color:var(--e1dp-election-base)}
body.e1dp-election-mode .soe-info__badge .material-icons-outlined{color:var(--e1dp-election-base)}
.soe-info__list{display:flex;flex-direction:column;gap:16px}
.soe-info__row{display:flex;align-items:center;gap:8px}
.soe-info__icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;color:var(--soe-accent);font-size:24px;line-height:1}
.soe-info__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.soe-info__label{font-size:16px;font-weight:600;line-height:1.25;color:rgba(0,0,0,.8)}
.dark .soe-info__label{color:rgba(255,255,255,.86)}
.soe-info__value{font-size:16px;line-height:1.25;color:rgba(0,0,0,.4)}
.dark .soe-info__value{color:rgba(255,255,255,.55)}

.soe-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:40px}
.soe-section{display:flex;flex-direction:column;gap:16px}
.soe-section__heading{display:flex;align-items:center;gap:8px}
.soe-section__title{margin:0;font-size:20px;font-weight:600;line-height:1.25;color:rgba(0,0,0,.8)}
.dark .soe-section__title{color:rgba(255,255,255,.86)}
.soe-section__arrow{width:46px;height:12px;display:inline-flex;flex:0 0 46px}
.soe-section__text{font-size:16px;line-height:1.45;color:rgba(0,0,0,.6)}
.dark .soe-section__text{color:rgba(255,255,255,.7)}
.soe-section__text p{margin:0 0 12px}
.soe-section__text p:last-child{margin-bottom:0}

.soe-boxes{display:flex;flex-direction:column;gap:16px}
.soe-box{width:100%;border-radius:8px;background:rgba(0,0,0,.03);padding:20px;display:flex;align-items:center;gap:20px;overflow:hidden}
.dark .soe-box{background:rgba(255,255,255,.06)}
.soe-box__icon{width:40px;height:40px;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex:0 0 40px;background:var(--soe-box-bg,var(--soe-soft));color:var(--soe-box-color,var(--soe-accent))}
body.e1dp-election-mode .soe-box__icon{background:var(--e1dp-election-soft)!important;color:var(--e1dp-election-base)!important}
.soe-box__icon .material-icons-outlined{font-size:22px;line-height:1}
.soe-box__content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.soe-box__title{margin:0;font-size:16px;font-weight:600;line-height:1.25;color:rgba(0,0,0,.8)}
.dark .soe-box__title{color:rgba(255,255,255,.86)}
.soe-box__text{font-size:16px;line-height:1.35;color:rgba(0,0,0,.4)}
.dark .soe-box__text{color:rgba(255,255,255,.56)}
.soe-box__text p{margin:0 0 8px}
.soe-box__text p:last-child{margin-bottom:0}

@media (max-width:960px){
  .soe-course-wrapper{gap:40px}
  .soe-hero{height:auto;min-height:320px;padding-bottom:96px}
  .soe-hero__image{left:0;width:100%;opacity:.28}
  .soe-hero__content{width:100%;max-width:none}
  .soe-hero__circle--large{left:calc(50% - 40px)}
  .soe-hero__circle--small{left:calc(50% - 75px)}
  .soe-course-layout{flex-direction:column;gap:32px}
  .soe-info{width:100%;min-width:0;max-width:none;flex:1 1 auto}
  .soe-main{width:100%}
}

@media (max-width:640px){
  .soe-course-wrapper{padding:24px 0 32px}
  .soe-hero__content{padding:32px 20px}
  .soe-hero__tags{left:20px;right:20px;bottom:28px}
  .soe-hero__title{font-size:22px}
  .soe-info{padding:28px 24px}
  .soe-box{align-items:flex-start}
}