/* Native, explicit dark backgrounds: never sample a transparent section in JS.
   Paint the section itself; SVG masks are limited to its short decorative joins. */
.courses-site main.joined-surfaces>#programs{
 --native-top:#303030;
 --native-bottom:#5b5d68;
 background:linear-gradient(180deg,#303030,#5b5d68) 0 0/100% calc(100% - var(--join-height)) no-repeat!important;
}
.courses-site main.joined-surfaces>#faq{
 --native-top:#282d35;
 --native-bottom:#282d35;
 background:linear-gradient(#282d35,#282d35) 0 0/100% calc(100% - var(--join-height)) no-repeat!important;
}
.courses-site main.joined-surfaces>#programs,
.courses-site main.joined-surfaces>#faq{position:relative;isolation:isolate}
.courses-site #programs>.section-surface,
.courses-site #faq>.section-surface{display:none!important}
/* Only the short joins are masked; their colors match each native section edge. */
.courses-site #programs::before,.courses-site #faq::before,
.courses-site #programs::after,.courses-site #faq::after{
 content:"";
 display:block;
 position:absolute;
 left:0;
 right:0;
 height:calc(var(--join-height) + 1px);
 z-index:0;
 opacity:1;
 pointer-events:none;
 -webkit-mask-size:100% 100%;
 mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
}
.courses-site #programs::before,.courses-site #faq::before{
 top:calc(-1 * var(--join-height));
 background:var(--native-top);
 -webkit-mask-image:var(--join-top);
 mask-image:var(--join-top);
}
.courses-site #programs::after,.courses-site #faq::after{
 /* Reset .tech-grid::after's inherited top:0 from inset:0. */
 top:auto;
 bottom:0;
 background:var(--native-bottom);
 -webkit-mask-image:var(--join-bottom);
 mask-image:var(--join-bottom);
}
.courses-site #faq>.shell{position:relative;z-index:1}

.courses-site #contacts .course-contact-steps{margin-bottom:64px;scroll-margin-top:110px}
.courses-site #contacts .course-contact-steps .course-section-head{margin-bottom:30px}
.courses-site #contacts .course-contact-steps h2{font-size:28px;line-height:1.2}

/* Catalogue contacts: keep portraits beside the text on phones as well. */
@media(max-width:700px){
 .courses-site #contacts .course-contact-steps{margin-bottom:44px;scroll-margin-top:85px}
 .courses-site #contacts .course-contact-steps h2{font-size:25px}
 .courses-site #contacts .contact-grid article{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  column-gap:14px;
  row-gap:9px;
  padding:26px 18px;
  align-content:center;
 }
 .courses-site #contacts .contact-grid .contact-person-photo{
  grid-column:1;
  grid-row:1/span 4;
  align-self:center;
  width:88px;
  height:88px;
  margin:0;
 }
 .courses-site #contacts .contact-grid article>:not(.contact-person-photo):not(.accent-tab){grid-column:2;min-width:0}
 .courses-site #contacts .contact-grid .tag{font-size:10px}
 .courses-site #contacts .contact-grid h3{font-size:21px;line-height:1.15;margin:0}
 .courses-site #contacts .contact-grid a{font-size:14px;line-height:1.35;margin:0;overflow-wrap:anywhere}
}