#welcomeHero {
    position: relative;
    max-width: 900px;
    min-width: 500px;
    margin: 40px auto 0px auto; /* remove large gap so chains can meet headers */
    overflow: visible; /* allow bolt chains to extend below */
}

#welcomeHero .banner {
    background-color: #1f3c88;
    color: #fff;
    font-family: 'bronic', sans-serif;
    font-size: 80px;
    letter-spacing: 3px;
    text-align: center;
    padding: 10px 40px 12px 40px;
    border-radius: 55px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
    text-shadow: -1px 0 1px #000, 0 1px 1px #000, 1px 0 1px #000, 0 -1px 1px #000;
    position: relative; /* anchor blue underline */
}

#welcomeHero .banner::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    width: 62%;
    height: 6px;
    background-color: #4d7fe7; /* small blue line underline */
    border-radius: 3px;
    opacity: 0.9;
}

#welcomeHero .plate {
    position: absolute;
    bottom: -16px;
    width: 92px;
    height: 28px;
    background-color: #393e48;
    border: 1px solid #151515;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#welcomeHero .plate.left { left: 65px; }
#welcomeHero .plate.right { right: 65px; }

#welcomeHero .plate .bolt {
    position: absolute;
    top: 11px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 40% 40%, #222 0 4px, #0f0f0f 5px 10px);
    border-radius: 50%;
}

#welcomeHero .plate.left .bolt.outer { left: 10px; }
#welcomeHero .plate.left .bolt.inner { right: 10px; }
#welcomeHero .plate.right .bolt.inner { left: 10px; }
#welcomeHero .plate.right .bolt.outer { right: 10px; }

#welcomeHero .plate .bolt::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 21px;
    width: 13px;
    height: 140px;
    background-image: url("../../assets/images/chain.png");
    background-repeat: repeat-y;
    background-size: 13px auto;
    z-index: 0;
    pointer-events: none;
}

#welcomeHero .plate .bolt.inner::after { height: var(--chain-inner-h, 140px); }
#welcomeHero .plate .bolt.outer::after { height: var(--chain-outer-h, 280px); }

.page-about {
    --chain-inner-h: 229px;  /* bolts → Stream Content top */
    --chain-outer-h: 390px;  /* bolts → Who is Xogue top */
    --chain-attach-offset: 217px; /* small tuck under pill tops */
}

#aboutContent {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-width: 500px;
    margin: 0 auto 60px auto;
    z-index: 0;
}

#aboutContent .amp {
    color: #2b67d644;
    font-family: 'britanic', sans-serif;
    font-size: 178px;
    position: absolute;
    left: 23%;
    top: -32px;
    z-index: 1; /* sits beneath overlapping day text */
}

.scheduleLines {
    display: flex;              /* robust centering of items */
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    margin-top: 20px;
    gap: 20px;               /* space between days and times */
}

.scheduleLines .days {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;                /* space between days */
    text-align: right;
    position: relative;
    font-family: 'bronic', sans-serif;
    font-size: 42px;
    color: #fff;
    z-index: 2; /* render above the ampersand */
}

.scheduleLines .times {
    color: #5b97ec;
    display: flex;
    flex-direction: column;
    gap: 0;                /* space between times */
    font-family: 'britanic', sans-serif;
    font-size: 50px;
    text-align: left;
}

.scheduleLines .times .time {
    letter-spacing: -1.5px;
    margin: -5px auto;
}

.scheduleLines .tz { 
    letter-spacing: 2px; 
    font-size: 25px;
    color: #97c1fc;
    margin-left: -8px;
}

.ctaLine {
    margin: 16px auto 28px auto;
    width: 70%;
    min-width: 640px;
    text-align: center;
    color: #c1d3ea;
    font-size: 25px;
    font-family: 'fr-bold', sans-serif;
    line-height: 25px;
}

.sectionHang { 
    position: relative; 
    padding-top: calc(var(--chain-inner-h) - var(--chain-attach-offset)); 
    margin: 0 0 28px 0;
}

.sectionHang .sectionPill {
    width: 75%; /* sits between the outer chains */
    margin: 0 auto;
    height: 44px;
    border-radius: 22px / 22px;
    background-color: #252525;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    display: grid;
    place-items: center;
    position: relative;
    /* Lift pill to meet inner chains without altering chain lengths */
    top: calc(-1 * (var(--chain-inner-h) - var(--chain-attach-offset)));
    z-index: 1;
}

.sectionHang .sectionPill > span {
    color: #4d7fe7;
    font-family: 'bronic', sans-serif;
    font-size: 40px;
    letter-spacing: 2px;
}

.sectionHang .sectionDescription {
    width: 65%; /* fits between the outer chains comfortably */
    margin: 8px auto 0 auto;
    color: #c1d3ea;
    font-family: 'fr-bold', sans-serif;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}

.dividerHang { 
    position: relative; 
    padding-top: calc(var(--chain-outer-h) - var(--chain-attach-offset)); 
    margin: 0; 
}

.dividerHang .dividerPill {
    width: 100%;
    max-width: 900px;
    min-width: 500px;
    margin: 0 auto;
    height: 44px;
    border-radius: 22px;
    background-color: #252525;
    color: #4d7fe7;
    display: grid;
    grid-template-columns: auto auto auto; /* arrows hug title */
    justify-content: center; /* center the trio as a unit */
    column-gap: 50px; /* arrows ~50px from title */
    align-items: center;
    text-align: center;
    font-family: 'bronic', sans-serif;
    font-size: 40px;
    letter-spacing: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    position: relative;
    z-index: 3;
    top: calc(-1 * (var(--chain-outer-h) - var(--chain-attach-offset)));
}

.dividerHang .dividerPill .arrows {
    display: inline-block;
    width: 90px;
    height: 20px;
    background-image: url("../../assets/images/arrowHeaderDeco.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    overflow: hidden;
}

.dividerHang .dividerPill .arrows.left { transform: scaleX(-1); }

#versionHeader { 
    position: relative; 
    width: 100%; 
    max-width: 900px; 
    min-width: 500px; 
    margin: 12px auto 0 auto;
}

#versionHeader .versionHeaderPill { 
    width: 100%; 
    max-width: 900px;
    min-width: 500px; 
    height: 48px; 
    background: #252525; 
    border-radius: 24px; 
    display: grid; 
    place-items: center; 
    color: #e6eeff; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.35); 
}

#versionHeader .versionTitle { 
    font-family: 'bronic', sans-serif; 
    font-size: 44px; 
    letter-spacing: 2px; 
}

#versionBody { 
    width: 65%; 
    margin: 10px auto 40px auto; 
    text-align: center;
    font-family: 'fr-bold', sans-serif;
}

.versionTabs {
    width: 70%;
    min-width: 500px;
    max-width: 900px;
    margin: 0 auto; 
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    top: calc(-1 * (var(--chain-outer-h) - var(--chain-attach-offset)) + 6px); 
    --link-chain-h: 4px; 
}

.version_link {
    width: 300px;
    height: 30px;
    border: 1px solid #151515;
    border-radius: 24px;
    background-color: #252525;
    color: #e6eeff;
    font-family: 'britanic', sans-serif;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    --link-offset: 20px;
    margin-top: var(--link-offset);
    transition: margin-top 0.5s ease;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.version_link::before,
.version_link::after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 13px;
    height: calc(var(--link-chain-h) + var(--link-offset));
    background-image: url("../../assets/images/chain.png");
    background-repeat: repeat-y;
    background-size: 13px auto;
    background-position: top center;
    transition: height 0.5s ease, background-position 0.5s ease;
    z-index: 0; 
    pointer-events: none;
}

.version_link::before { left: 20%; transform: translateX(-50%); }
.version_link::after  { left: 80%; transform: translateX(-50%); }

.version_link.active {
    background-color: #e6eeff;
    color: #252525;
    --link-offset: 30px;
    margin-top: var(--link-offset);
}

.version_link.active::before,
.version_link.active::after { height: calc(var(--link-chain-h) + var(--link-offset)); }

.version_link:not(.active):hover {
    background-color: #a9a9a9;
    color: #252525;
    --link-offset: 25px;
    margin-top: var(--link-offset);
}

.version_link:not(.active):hover::before,
.version_link:not(.active):hover::after { height: calc(var(--link-chain-h) + var(--link-offset)); }

#versionHeader { 
    position: relative; 
    width: 100%; 
    max-width: 900px; 
    min-width: 500px; 
    margin: 0 auto; 
}

.versionHeaderPill {
    width: 100%;
    max-width: 900px;
    min-width: 500px;
    /* Pull header up to follow tabs closely despite divider container padding */
    margin: calc(-1 * (var(--chain-outer-h) - var(--chain-attach-offset)) + 80px) auto 10px auto;
    height: 48px;
    border-radius: 24px;
    background-color: #393e48;
    color: #e6eeff;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.versionHeaderPill .versionTitle {
    font-family: 'bronic', sans-serif;
    font-size: 42px;
    letter-spacing: 2px;
}

#versionHeader .plate {
    position: absolute;
    bottom: -16px;
    width: 92px;
    height: 28px;
    background-color: #393e48;
    border: 1px solid #151515;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

#versionHeader .plate.left { left: calc(10% - 46px); }
#versionHeader .plate.right { right: calc(10% - 46px); }

#versionHeader .plate .bolt {
    position: absolute;
    top: 11px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 40% 40%, #222 0 4px, #0f0f0f 5px 10px);
    border-radius: 50%;
}

#versionHeader .plate .bolt.one { left: 10px; }
#versionHeader .plate .bolt.two { right: 10px; }

#versionHeader .plate .bolt::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 21px; /* just below plate */
    width: 13px;
    background-image: url("../../assets/images/chain.png");
    background-repeat: repeat-y;
    background-size: 13px auto;
    pointer-events: none;
}


#versionHeader .plate.left .bolt.one::after { height: 68px; }
#versionHeader .plate.left .bolt.two::after { height: 96px; }
#versionHeader .plate.right .bolt.one::after { height: 74px; }
#versionHeader .plate.right .bolt.two::after { height: 52px; }

.versionBody {
    width: 66%;
    max-width: 1000px;
    margin: 6px auto 40px auto;
    color: #e6eeff;
    font-family: 'fr-bold', sans-serif;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
}

.dividerHang .dividerPill .arrows { color: #6b90ea; font-size: 22px; }
.dividerHang .dividerPill .arrows.left { text-align: left; padding-left: 18px; }
.dividerHang .dividerPill .arrows.right { text-align: right; padding-right: 18px; }
.dividerHang .dividerPill .title { text-transform: uppercase; }