/* TM CMS page */
/* Page-specific: the 75% content panel. It occupies the same slot the
   /subscribe page fills with its YouTube embed (same .sub-hero shell, same
   75/25 split); the signup panel beside it is the SUBSCRIBE-FORM component.
   The gap share is subtracted from the column width (see --sub-gap in the
   component CSS); without it 75% + 25% + gap overflows the row.
   Shortcode names are written without their dashes in these comments — the
   live renderer substitutes them wherever they appear. */
.promo-panel{position:relative;flex:0 0 calc(75% - var(--sub-gap,44px) * .75);width:calc(75% - var(--sub-gap,44px) * .75);max-width:calc(75% - var(--sub-gap,44px) * .75);aspect-ratio:16/9;display:flex;align-items:center;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#101410 0%,#0a0a0a 55%,#0d1a12 100%);border:1px solid var(--line,#242424);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.promo-panel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green,#19e783)}
.promo-inner{padding:clamp(24px,4vw,64px);max-width:760px}

.promo-eyebrow{color:var(--green,#19e783);text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:clamp(11px,1vw,13px);margin-bottom:12px}
.promo-title{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;color:#fff;font-size:clamp(24px,3.2vw,46px);line-height:1.06;letter-spacing:-.01em;margin:0 0 clamp(14px,1.6vw,22px)}
.promo-lead{color:#d4dad5;font-size:clamp(15px,1.35vw,20px);line-height:1.6;margin:0 0 clamp(12px,1.4vw,18px)}
.promo-body{color:#a7a7a7;font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.8;margin:0 0 clamp(18px,2vw,28px)}

.promo-live{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-top:clamp(14px,1.6vw,20px);border-top:1px solid var(--line,#242424)}
.promo-live-tag{flex:none;background:var(--green,#19e783);color:#06210f;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:11px;padding:6px 10px;border-radius:999px}
.promo-live-copy{color:#a7a7a7;font-size:clamp(13.5px,1vw,15.5px);line-height:1.5}
.promo-live-copy a{color:#fff;border-bottom:1px solid rgba(25,231,131,.5);transition:color .15s,border-color .15s}
.promo-live-copy a:hover{color:var(--green,#19e783);border-color:var(--green,#19e783)}

/* Below the two-column breakpoint the panel stops being a 16:9 tile and just
   grows to fit its copy. */
@media(max-width:768px){
  .promo-panel{flex:none;width:min(880px,100%);max-width:100%;aspect-ratio:auto}
}
@media(max-width:600px){.promo-panel{border-radius:12px}}