:root{
     --unu-black:#051931;
     --unu-black-2:#0a2544;
     --unu-gold:#d9b34a;
     --unu-gold-light:#f0c83c;
     --unu-gold-deep:#8a6a1f;
     --unu-cream:#f3ecd9;
     --unu-cream-dim:#cfc4a4;
}
 *{
     box-sizing:border-box;
}
 html,body{
     margin:0;
     padding:0;
}
 body{
     background:var(--unu-black);
     font-family:'Inter',sans-serif;
}
 .card-body ul li::before {
     content: "•";
     margin-right: 5px;
     color: #f0c83c;
     line-height: 30px;
     font-size: 20px;
}
 .card-body i {
     color: #f0c83c;
     font-size: 20px;
}
 .unu-hero{
     position:relative;
     min-height:50vh;
     width:100%;
     overflow:hidden;
     background:var(--unu-black);
     display:flex;
     flex-direction:column;
     justify-content:center;
     isolation:isolate;
}
/* ---- Background layers ---- */
 .unu-hero__photo{
     position:absolute;
     top:0;
     right:0;
     height:100%;
     width:clamp(300px, 36vw, 520px);
     z-index:0;
     -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 16%, #000 34%);
     mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 16%, #000 34%);
}
 .unu-hero__photo img{
     height:100%;
     width:100%;
     object-fit:cover;
     object-position:50% 14%;
     filter:grayscale(30%) contrast(1.1) brightness(0.82) sepia(10%);
     opacity:0.95;
}
 .unu-hero__scrim{
     position:absolute;
     inset:0;
     z-index:1;
     background: linear-gradient(100deg, rgba(5,25,49,1) 0%, rgba(5,25,49,0.94) 28%, rgba(5,25,49,0.55) 48%, rgba(5,25,49,0.42) 70%, rgba(5,25,49,0.6) 100%), linear-gradient(0deg, rgba(5,25,49,0.85) 0%, rgba(5,25,49,0.1) 22%, rgba(5,25,49,0.1) 72%, rgba(5,25,49,0.9) 100%);
}
 .unu-hero__watermark{
     position:absolute;
     z-index:1;
     top:50%;
     left:50%;
     width:min(1100px, 130vw);
     transform:translate(-50%,-50%);
     opacity:0.05;
     pointer-events:none;
     mix-blend-mode:screen;
     filter: saturate(0) brightness(3);
}
 .unu-hero__watermark img{
     width:100%;
     display:block;
}
 .unu-hero__vignette{
     position:absolute;
     inset:0;
     z-index:1;
     box-shadow: inset 0 0 18vw 2vw rgba(0,0,0,0.55);
     pointer-events:none;
}
/* ---- Frame ornament (signature element) ---- */
 .unu-hero__frame{
     position:absolute;
     inset:22px;
     z-index:2;
     border:1px solid rgba(217,179,74,0.28);
     pointer-events:none;
}
 .unu-hero__frame::before, .unu-hero__frame::after, .unu-hero__frame span::before, .unu-hero__frame span::after{
     content:"";
     position:absolute;
     width:34px;
     height:34px;
     border:1.5px solid var(--unu-gold);
}
 .unu-hero__frame::before{
     top:-1px;
     left:-1px;
     border-right:none;
     border-bottom:none;
}
 .unu-hero__frame::after{
     top:-1px;
     right:-1px;
     border-left:none;
     border-bottom:none;
}
 .unu-hero__frame span::before{
     bottom:-1px;
     left:-1px;
     border-right:none;
     border-top:none;
}
 .unu-hero__frame span::after{
     bottom:-1px;
     right:-1px;
     border-left:none;
     border-top:none;
}
/* ---- Content ---- */
 .unu-hero__content{
     position:relative;
     z-index:3;
     width:100%;
     max-width:1240px;
     margin:0 auto;
     padding:200px 56px 44px;
}
 @media (max-width: 767.98px) {
     .unu-hero__content{
         position:relative;
         z-index:3;
         width:100%;
         max-width:1240px;
         margin:0 auto;
         padding:40px 56px 44px;
    }
}
 .unu-hero__mark{
     display:flex;
     align-items:center;
     gap:14px;
     margin-bottom:22px;
}
 .unu-hero__mark img{
     height:38px;
     width:auto;
     filter:drop-shadow(0 0 10px rgba(217,179,74,0.25));
}
 .unu-hero__mark-text{
     font-family:'Cormorant Garamond', serif;
     color:var(--unu-cream);
     font-size:15px;
     letter-spacing:0.28em;
     text-transform:uppercase;
     line-height:1.4;
     border-left:1px solid rgba(217,179,74,0.4);
     padding-left:14px;
}
 .unu-hero__mark-text strong{
     display:block;
     color:var(--unu-gold-light);
     font-weight:600;
     font-size:16px;
     letter-spacing:0.22em;
}
 .unu-hero__eyebrow{
     display:flex;
     align-items:center;
     gap:16px;
     margin-bottom:14px;
}
 .unu-hero__eyebrow-line{
     height:1px;
     width:46px;
     background:linear-gradient(90deg, transparent, var(--unu-gold));
}
 .unu-hero__eyebrow-text{
     font-family:'Inter',sans-serif;
     font-size:12px;
     font-weight:600;
     letter-spacing:0.32em;
     text-transform:uppercase;
     color:var(--unu-gold);
}
 .unu-hero__heading{
     font-family:'Cormorant Garamond', serif;
     font-weight:600;
     color:var(--unu-cream);
     font-size:clamp(1.9rem, 3.6vw, 2.9rem);
     line-height:1.1;
     letter-spacing:0.005em;
     margin:0 0 14px;
     max-width:18ch;
}
 .unu-hero__heading em{
     font-style:italic;
     font-weight:500;
     color:var(--unu-gold-light);
}
 .unu-hero__subheading{
     font-family:'Inter',sans-serif;
     font-weight:400;
     font-size:clamp(1rem, 1.4vw, 1.2rem);
     line-height:1.75;
     color:var(--unu-cream-dim);
     max-width:46ch;
     margin:0 0 22px;
}
 .unu-hero__cta{
     display:flex;
     align-items:center;
     gap:28px;
     flex-wrap:wrap;
}
 .unu-hero__btn{
     display:inline-flex;
     align-items:center;
     gap:10px;
     padding:13px 28px;
     background:var(--unu-gold);
     color:var(--unu-black);
     font-family:'Inter',sans-serif;
     font-weight:600;
     font-size:13px;
     letter-spacing:0.14em;
     text-transform:uppercase;
     text-decoration:none;
     border:1px solid var(--unu-gold);
     transition:all 0.35s ease;
}
 .unu-hero__btn:hover{
     background:transparent;
     color:var(--unu-gold-light);
}
 .unu-hero__btn svg{
     width:14px;
     height:14px;
     transition:transform 0.35s ease;
}
 .unu-hero__btn:hover svg{
     transform:translateX(4px);
}
 .unu-hero__link{
     font-family:'Inter',sans-serif;
     font-weight:500;
     font-size:13px;
     letter-spacing:0.1em;
     text-transform:uppercase;
     color:var(--unu-cream-dim);
     text-decoration:none;
     border-bottom:1px solid rgba(207,196,164,0.35);
     padding-bottom:3px;
     transition:color 0.3s ease, border-color 0.3s ease;
}
 .unu-hero__link:hover{
     color:var(--unu-gold-light);
     border-color:var(--unu-gold-light);
}
 .unu-hero__motto{
     position:absolute;
     z-index:3;
     left:56px;
     bottom:44px;
     display:flex;
     align-items:center;
     gap:12px;
     font-family:'Inter',sans-serif;
     font-size:11px;
     font-weight:600;
     letter-spacing:0.32em;
     text-transform:uppercase;
     color:var(--unu-gold-deep);
}
 .unu-hero__motto span{
     color:var(--unu-gold);
}
 .unu-hero__motto::before{
     content:"";
     width:26px;
     height:1px;
     background:var(--unu-gold-deep);
}
 @media (max-width:900px){
     .unu-hero__photo{
         width:100%;
         -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, #000 100%);
         mask-image:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, #000 100%);
    }
     .unu-hero__photo img{
         object-position:56% 12%;
         opacity:0.65;
    }
     .unu-hero__scrim{
         background: linear-gradient(180deg, rgba(5,25,49,0.35) 0%, rgba(5,25,49,0.8) 45%, rgba(5,25,49,0.97) 100%);
    }
     .unu-hero__content{
         padding:44px 24px 48px;
    }
     .unu-hero__frame{
         inset:12px;
    }
     .unu-hero__motto{
         left:24px;
    }
     .unu-hero__heading{
         max-width:100%;
    }
}
 @media (max-width:900px){
     .unu-hero__mark img{
         height:38px;
    }
}
 .page{
     padding:clamp(1rem,4vw,1.5rem);
     font-family:"Inter",sans-serif 
}
 .pre-badge{
     display:inline-flex;
     align-items:center;
     gap:6px;
     margin-bottom:1.25rem 
}
 .pre-badge .dot{
     width:7px;
     height:7px;
     border-radius:50%;
     background:var(--secondary);
     display:inline-block;
     flex-shrink:0 
}
 .cdown-wrap{
     border-radius:10px;
     padding:clamp(8px,3vw,12px) clamp(10px,4vw,16px);
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:8px;
     margin-bottom:1.25rem;
     flex-wrap:wrap 
}
 .cdown-units{
     display:flex;
     gap:clamp(5px,2vw,10px);
     align-items:center 
}
 .cdown-unit{
     text-align:center 
}
 .cnum{
     font-size:clamp(14px,4vw,18px);
     font-weight:800;
     display:block;
     line-height:1 
}
 .ctag{
     font-size:clamp(7px,2vw,9px);
     text-transform:uppercase;
     letter-spacing:.4px;
     opacity:.6 
}
 .csep{
     font-size:clamp(12px,3vw,16px);
     font-weight:700;
     opacity:.35;
     margin-top:-2px 
}
 .book-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
     gap:14px 
}
 .book-card{
     border-radius:14px;
     overflow:hidden;
     display:flex;
     flex-direction:column;
     transition:border-color .25s 
}
 .book-card:hover{
     border-color:var(--primary)!important 
}
 @media(max-width:400px){
     .book-card{
         flex-direction:row 
    }
     .book-cover{
         width:110px;
         min-width:110px;
         aspect-ratio:unset;
         min-height:175px 
    }
}
 .book-cover{
     position:relative;
     aspect-ratio:3/2;
     display:flex;
     align-items:flex-end;
     padding:clamp(.75rem,3vw,1rem);
     overflow:hidden;
     flex-shrink:0 
}
 .book-cover .dc{
     position:absolute;
     border-radius:50%;
     background:rgba(255,255,255,.07) 
}
 .book-cover .top-strip{
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:3px 
}
 .cover-inner{
     position:relative;
     z-index:1 
}
 .book-body{
     padding:clamp(.75rem,3vw,1rem);
     display:flex;
     flex-direction:column;
     gap:9px;
     flex:1 
}
 .fmt-group{
     display:flex;
     gap:5px;
     flex-wrap:wrap 
}
 .fmt-btn{
     border-radius:6px;
     padding:4px 9px;
     cursor:pointer;
     font-size:clamp(10px,2.5vw,11px);
     font-weight:600;
     transition:all .2s;
     white-space:nowrap;
     border:1px solid var(--gray-200);
     background:var(--white);
     color:var(--gray-600) 
}
 .fmt-btn:hover,.fmt-btn.active{
     border:1.5px solid var(--primary);
     color:var(--primary);
     background:var(--primary-transparent) 
}
 .price-row{
     display:flex;
     align-items:center;
     gap:7px;
     flex-wrap:wrap 
}
 .price-now{
     font-size:clamp(17px,4vw,21px);
     font-weight:800;
     color:var(--gray-900) 
}
 .price-was{
     text-decoration:line-through 
}
 .card-actions{
     display:flex;
     gap:7px;
     margin-top:auto 
}
 .btn-wish{
     width:36px;
     min-width:36px;
     height:36px;
     display:flex;
     align-items:center;
     justify-content:center;
     border-radius:1.5rem;
     transition:all .25s;
     font-size:15px;
     cursor:pointer 
}
 .btn-wish.saved,.btn-wish:hover{
     border-color:var(--secondary)!important;
     color:var(--secondary)!important;
     background:#fff0f3!important 
}
 .dlv-note{
     display:flex;
     align-items:center;
     gap:5px 
}
 .bundle-strip{
     border-radius:12px;
     padding:clamp(10px,3vw,14px);
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:10px;
     flex-wrap:wrap;
     margin-top:14px 
}
 .bundle-info{
     display:flex;
     align-items:center;
     gap:10px 
}
 @media(max-width:400px){
     .bundle-strip{
         flex-direction:column;
         align-items:flex-start 
    }
     .btn-bundle-full{
         width:100% 
    }
}
 .cover-book-1{
     background:linear-gradient(150deg,#392C7D 0%,#1a1040 100%) 
}
 .cover-book-2{
     background:linear-gradient(150deg,#1a3a3a 0%,#0d2020 100%) 
}
 .cover-book-2 .top-strip{
     background:#03C95A 
}
 .book-cover-img{
     position:absolute;
     inset:0;
     width:100%;
     height:100%;
     object-fit:cover;
     opacity:.18;
     pointer-events:none;
     user-select:none 
}
/* Purchase Modal */
 .purchase-modal{
     display:none;
     position:fixed;
     inset:0;
     z-index:99999;
     align-items:center;
     justify-content:center;
     padding:20px;
     background:rgba(0,0,0,.75);
     backdrop-filter:blur(8px);
     -webkit-backdrop-filter:blur(8px);
}
 .purchase-modal-content{
     position:relative;
     width:100%;
     max-width:460px;
     background:var(--white);
     color:var(--dark);
     border:1px solid var(--gray-200);
     border-radius:18px;
     padding:30px;
     box-shadow:0 25px 60px rgba(0,0,0,.25);
     animation:purchaseModal .3s ease;
}
 .purchase-modal-content h4{
     color:var(--dark);
     font-weight:700;
     margin-bottom:8px;
}
 .purchase-modal-content p{
     color:var(--gray-500);
     margin-bottom:25px;
     line-height:1.6;
}
 .purchase-close{
     position:absolute;
     top:15px;
     right:15px;
     width:38px;
     height:38px;
     border:none;
     border-radius:50%;
     background:var(--gray-100);
     color:var(--gray-600);
     cursor:pointer;
     transition:.3s ease;
     font-size:20px;
}
 .purchase-close:hover{
     background:var(--secondary);
     color:#fff;
     transform:rotate(90deg);
}
/* Buttons */
 .purchase-modal .btn{
     display:flex;
     align-items:center;
     justify-content:center;
     gap:10px;
     font-weight:600;
     border-radius:12px;
     padding:14px 18px;
     transition:.3s ease;
}
 .purchase-modal .btn-outline-primary{
     background:transparent;
     color:var(--primary);
     border:2px solid var(--primary);
}
 .purchase-modal .btn-outline-primary:hover{
     background:var(--primary);
     color:#fff;
     border-color:var(--primary);
}
 .purchase-modal .btn-primary{
     background:var(--primary);
     border-color:var(--primary);
     color:#fff;
}
 .purchase-modal .btn-primary:hover{
     background:var(--secondary);
     border-color:var(--secondary);
     transform:translateY(-2px);
}
 .purchase-modal .btn i{
     font-size:18px;
}
/* Animation */
 @keyframes purchaseModal{
     from{
         opacity:0;
         transform:translateY(-20px) scale(.95);
    }
     to{
         opacity:1;
         transform:translateY(0) scale(1);
    }
}
/* Dark Mode */
 .dark-mode .purchase-modal-content{
     background:var(--gray-100);
     border-color:var(--gray-300);
     box-shadow:0 25px 60px rgba(0,0,0,.6);
}
 .dark-mode .purchase-modal-content h4{
     color:var(--dark);
}
 .dark-mode .purchase-modal-content p{
     color:var(--gray-400);
}
 .dark-mode .purchase-close{
     background:var(--gray-200);
     color:var(--gray-800);
}
 .dark-mode .purchase-close:hover{
     background:var(--secondary);
     color:#fff;
}
/* Mobile */
 @media (max-width:576px){
     .purchase-modal{
         padding:15px;
    }
     .purchase-modal-content{
         padding:24px 20px;
         border-radius:14px;
    }
     .purchase-modal .btn{
         padding:13px;
         font-size:15px;
    }
}
 .library-video-item .video-thumb {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
}
 .library-video-item .video-thumb img {
     width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;
}
 .library-video-item .play-icon {
     width: 56px;
     height: 56px;
     background-color: rgba(1, 1, 1, 0.4);
     border-radius: 50px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: var(--white);
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s ease;
}
 .library-video-item .play-icon:hover {
     background-color: var(--primary);
}
 .library-video-item .duration-badge {
     position: absolute;
     bottom: 10px;
     right: 10px;
     background: rgba(0, 0, 0, 0.7);
     color: var(--white);
     font-size: 12px;
     font-weight: 500;
     padding: 2px 8px;
     border-radius: 4px;
}
 .library-video-item .title {
     font-size: 16px;
     font-weight: 700;
     color: var(--gray-900);
}
 .library-video-item .video-meta {
     font-size: 13px;
     color: var(--gray-500);
}
 .library-video-item .video-meta .dot {
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: var(--gray-300);
     margin: 0 10px;
     display: inline-block;
}
/* ---- tabs ---- */
 .media-tabs {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 6px;
     width: fit-content;
     margin: 0 auto 40px !important;
     background: var(--gray-400);
     border: none;
     border-radius: 50px;
     padding: 8px;
}
 .media-tabs .nav-link {
     border: none;
     border-radius: 50px;
     padding: 10px 20px;
     font-weight: 600;
     color: var(--gray-700);
     background: transparent;
     transition: all 0.3s ease;
}
 .media-tabs .nav-link:hover {
     color: var(--gray-900);
}
 .media-tabs .nav-link.active {
     background: var(--white);
     color: var(--gray-900);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
 @media (max-width: 767.98px) {
     .media-tabs {
         width: 100%;
         border-radius: 16px;
    }
     .media-tabs .nav-link {
         padding: 8px 14px;
         font-size: 14px;
    }
}
/* ---- shared media card ---- */
 .media-card {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     height: 100%;
     min-height: 220px;
     cursor: pointer;
}
 .media-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     inset: 0;
}
 .media-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.35) 100%);
}
 .media-card .media-author-pill {
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 2;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--primary);
     color: #fff;
     border-radius: 50px;
     padding: 4px 14px 4px 4px;
     font-size: 13px;
     font-weight: 600;
}
 .media-card .media-author-pill img {
     position: static;
     width: 26px;
     height: 26px;
     border-radius: 50%;
}
 .media-card .media-bottom {
     position: absolute;
     bottom: 16px;
     left: 16px;
     right: 16px;
     z-index: 2;
}
 .media-card .media-meta {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     flex-wrap: wrap;
}
 .media-card .media-category-pill {
     border: 1px solid rgba(255, 255, 255, 0.6);
     color: #fff;
     border-radius: 50px;
     padding: 4px 14px;
     font-size: 12px;
     font-weight: 600;
}
 .media-card .media-date-pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #fff;
     font-size: 13px;
     font-weight: 500;
}
 .media-card .media-title {
     color: #fff;
     font-size: 16px;
     font-weight: 700;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}
 .media-card .media-play-icon {
     width: 56px;
     height: 56px;
     background-color: rgba(255, 255, 255, 0.25);
     border: 2px solid #fff;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     z-index: 2;
}
 .media-bento {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 260px);
     gap: 24px;
}
 .media-bento .bento-item:nth-child(1) {
     grid-column: 1;
     grid-row: 1 / span 2;
}
 .media-bento .bento-item:nth-child(2) {
     grid-column: 2;
     grid-row: 1;
}
 .media-bento .bento-item:nth-child(3) {
     grid-column: 2;
     grid-row: 2;
}
 .media-bento .bento-item:nth-child(4) {
     grid-column: 3;
     grid-row: 1 / span 2;
}
 .media-bento .bento-item:nth-child(5) {
     grid-column: 1;
     grid-row: 3 / span 2;
}
 .media-bento .bento-item:nth-child(6) {
     grid-column: 2;
     grid-row: 3;
}
 .media-bento .bento-item:nth-child(7) {
     grid-column: 2;
     grid-row: 4;
}
 .media-bento .bento-item:nth-child(8) {
     grid-column: 3;
     grid-row: 3;
}
 .media-bento .bento-item:nth-child(9) {
     grid-column: 3;
     grid-row: 4;
}
 .media-bento .bento-item {
     height: 100%;
}
 @media (max-width: 991.98px) {
     .media-bento {
         grid-template-columns: 1fr;
         grid-template-rows: none;
         gap: 20px;
    }
     .media-bento .bento-item {
         grid-column: 1 !important;
         grid-row: auto !important;
         height: 260px;
    }
}
/* ---- Acting & Television sizes ---- */
 .media-card-lg .media-card {
     min-height: 340px;
}
 .media-card-sm .media-card {
     min-height: 220px;
}
 @media (max-width: 991.98px) {
     .media-card-lg .media-card, .media-card-sm .media-card {
         min-height: 240px;
    }
}
/* ---- Interviews & Public Speaking masonry ---- */
 .media-masonry {
     column-count: 3;
     column-gap: 24px;
}
 .media-masonry .masonry-item {
     break-inside: avoid;
     margin-bottom: 24px;
}
 .media-masonry .masonry-item .media-card {
     min-height: 220px;
}
 .media-masonry .masonry-item-0 .media-card {
     min-height: 320px;
}
 .media-masonry .masonry-item-1 .media-card {
     min-height: 220px;
}
 .media-masonry .masonry-item-2 .media-card {
     min-height: 260px;
}
 @media (max-width: 991.98px) {
     .media-masonry {
         column-count: 2;
    }
}
 @media (max-width: 575.98px) {
     .media-masonry {
         column-count: 1;
    }
}
/* ---- Events hero + strip ---- */
 .media-card-hero .media-card {
     min-height: 380px;
}
 @media (max-width: 767.98px) {
     .media-card-hero .media-card {
         min-height: 240px;
    }
}
/* ---- foundation photo card ---- */
 .foundation-card {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     height: 100%;
     min-height: 220px;
     cursor: pointer;
}
 .foundation-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: absolute;
     inset: 0;
}
 .foundation-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0.35) 100%);
}
 .foundation-badge {
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 2;
     display: inline-flex;
     align-items: center;
}
 .foundation-badge .badge-avatar {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: var(--primary);
     color: #fff;
     font-weight: 700;
     font-size: 13px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     z-index: 2;
}
 .foundation-badge .badge-label {
     background: var(--secondary);
     color: var(--gray-900);
     font-weight: 700;
     font-size: 13px;
     padding: 6px 16px 6px 24px;
     border-radius: 50px;
     margin-left: -16px;
     position: relative;
     z-index: 1;
}
 .foundation-bottom {
     position: absolute;
     bottom: 16px;
     left: 16px;
     right: 16px;
     z-index: 2;
}
 .foundation-meta {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     flex-wrap: wrap;
}
 .foundation-category-pill {
     border: 1px solid rgba(255, 255, 255, 0.6);
     color: #fff;
     border-radius: 50px;
     padding: 4px 14px;
     font-size: 12px;
     font-weight: 600;
}
 .foundation-date-pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #fff;
     font-size: 13px;
     font-weight: 500;
}
 .foundation-title {
     color: #fff;
     font-size: 16px;
     font-weight: 700;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}
/* ---- bento grid, matches the reference layout ---- */
 .foundation-bento {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 260px);
     gap: 24px;
}
 .foundation-bento .bento-item:nth-child(1) {
     grid-column: 1;
     grid-row: 1 / span 2;
}
 .foundation-bento .bento-item:nth-child(2) {
     grid-column: 2;
     grid-row: 1;
}
 .foundation-bento .bento-item:nth-child(3) {
     grid-column: 2;
     grid-row: 2;
}
 .foundation-bento .bento-item:nth-child(4) {
     grid-column: 3;
     grid-row: 1;
}
 .foundation-bento .bento-item:nth-child(5) {
     grid-column: 3;
     grid-row: 2;
}
 .foundation-bento .bento-item {
     height: 100%;
}
 @media (max-width: 991.98px) {
     .foundation-bento {
         grid-template-columns: 1fr;
         grid-template-rows: none;
         gap: 20px;
    }
     .foundation-bento .bento-item {
         grid-column: 1 !important;
         grid-row: auto !important;
         height: 260px;
    }
}
 .foundation-play-icon {
     width: 56px;
     height: 56px;
     background-color: rgba(255, 255, 255, 0.25);
     border: 2px solid #fff;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     z-index: 2;
}
 .pricing-item-compact {
     padding: 16px;
     height: 100%;
     display: flex;
     flex-direction: column;
     border: 1px solid var(--gray-100);
     box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2509803922);
     border-radius: 10px;
}
 .pricing-item-compact h1 {
     font-size: 26px;
     margin-bottom: 4px;
}
 .pricing-item-compact h1 sub {
     font-size: 12px;
}
 .pricing-item-compact .benefit-list {
     list-style: none;
     padding: 0;
     margin: 10px 0 14px;
     flex-grow: 1;
}
 .pricing-item-compact .benefit-list li {
     display: flex;
     align-items: flex-start;
     gap: 6px;
     font-size: 12px;
     margin-bottom: 6px;
     line-height: 1.4;
}
 .pricing-item-compact .benefit-list li i {
     font-size: 6px;
     color: var(--secondary, #FF4667);
     margin-top: 5px;
     flex-shrink: 0;
}
/* Mobile-only collapsible sidebar toggle -- desktop is untouched */
 .sidebar-mobile-toggle {
     display: none;
}
 @media (max-width: 991.98px) {
     .sidebar-mobile-toggle {
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
         background: linear-gradient(90deg, #051931 0%, #f0c83c 51.39%, #051931 100%);
         border: 1px solid var(--gray-400, #e7e7e7);
         border-radius: 12px;
         padding: 14px 16px;
         margin-bottom: 12px;
         font-weight: 600;
         color: #F0C83C;
    }
     .sidebar-mobile-toggle .chevron {
         transition: transform 0.2s ease;
    }
     .sidebar-mobile-toggle[aria-expanded="true"] .chevron {
         transform: rotate(180deg);
    }
}
 @media (min-width: 992px) {
    /* Force the sidebar to stay visible on desktop regardless of the Bootstrap collapse's JS-tracked open/closed state. */
     #sidebarMobileCollapse {
         display: block !important;
         height: auto !important;
    }
}
/* ---- hero ---- */
 .dash-hero {
     border-radius: 20px;
     position: relative;
     overflow: hidden;
}
 .dash-hero::after {
     content: "";
     position: absolute;
     top: -70px;
     right: -70px;
     width: 240px;
     height: 240px;
     border-radius: 50%;
     background: rgba(240, 200, 60, 0.08);
}
 .dash-quote {
     position: relative;
     padding-left: 8px;
}
 .dash-quote::before {
     content: "\201C";
     font-size: 64px;
     font-family: Georgia, serif;
     color: rgba(240, 200, 60, 0.35);
     position: absolute;
     top: -30px;
     left: -10px;
     line-height: 1;
}
 .dash-badge-gold {
     background: #F0C83C;
     color: #051931;
     font-weight: 700;
}
/* ---- stat cards: forced visible shadow ---- */
 .dash-stat-card {
     border: none !important;
     box-shadow: 0px 4px 4px 0px rgba(212, 212, 212, 0.2);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 .dash-stat-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 14px 30px rgba(5, 25, 49, 0.16) !important;
}
 .dash-stat-link {
     font-size: 13px;
     font-weight: 600;
     color: var(--secondary);
     text-decoration: none;
}
 .icon-gold {
     background: rgba(240, 200, 60, 0.15);
     color: #B8860B;
}
 .icon-orange {
     background: rgba(248, 177, 2, 0.15);
     color: #C97A00;
}
 .icon-navy {
     background: rgba(5, 25, 49, 0.08);
     color: #051931;
}
 .icon-teal {
     background: rgba(21, 86, 88, 0.12);
     color: #155658;
}
/* ---- learning-item cards recolored to UNU palette ---- */
 .card-unu-navy {
     background: linear-gradient(135deg, #737b85 0%, #0F2A4A 100%);
}
 .card-unu-gold {
     background: linear-gradient(135deg, #F0C83C 0%, #F8B102 100%);
}
 .card-unu-teal {
     background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
 .card-unu-gold h3, .card-unu-gold p, .card-unu-gold small {
     color: #051931 !important;
}
 .card-unu-gold .badge {
     background: rgba(5, 25, 49, 0.12);
     color: #051931;
}
 .card-unu-gold .progress {
     background: rgba(5, 25, 49, 0.15);
}
 .card-unu-gold .progress-bar {
     background: #051931 !important;
}
/* ---- today's lesson ---- */
 .dash-lesson-card {
     border: none;
     border-radius: 16px;
     background: linear-gradient(120deg, var(--secondary) 0%, #051931 100%);
     color: #fff;
     overflow: hidden;
     position: relative;
}
 .dash-lesson-card::after {
     content: "";
     position: absolute;
     right: -40px;
     top: -40px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: rgba(240, 200, 60, 0.08);
}
 .dash-lesson-play {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: rgba(240, 200, 60, 0.2);
     border: 2px solid #F0C83C;
     color: #F0C83C;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     flex-shrink: 0;
}
 .dash-lesson-badge {
     background: #F0C83C;
     color: #051931;
     border-radius: 50px;
     padding: 4px 14px;
     font-size: 12px;
     font-weight: 700;
     display: inline-block;
}
 .btn-unu-gold {
     background: #F0C83C;
     color: #051931;
     font-weight: 700;
     border: none;
}
 .btn-unu-gold:hover {
     background: #F8B102;
     color: #051931;
}
/* ---- My Courses: status-pill rows ---- */
 .course-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 12px 0;
     border-bottom: 1px solid #eee;
}
 .course-row:last-child {
     border-bottom: none;
}
 .course-row-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: rgba(5, 25, 49, 0.08);
     color: #051931;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     flex-shrink: 0;
}
 .course-status-pill {
     background: rgba(21, 86, 88, 0.12);
     color: #155658;
     font-size: 11px;
     font-weight: 700;
     padding: 4px 10px;
     border-radius: 50px;
     white-space: nowrap;
}
/* ---- My Books: cover-style grid ---- */
 .book-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 14px 8px;
     border-radius: 12px;
     background: #F9F6EC;
     height: 100%;
}
 .book-cover {
     width: 56px;
     height: 72px;
     border-radius: 6px;
     background: linear-gradient(135deg, #051931 0%, #155658 100%);
     color: #F0C83C;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 10px;
     box-shadow: 0 6px 14px rgba(5, 25, 49, 0.25);
}
 .book-card p {
     font-size: 13px;
     font-weight: 600;
     margin: 0;
     line-height: 1.3;
}
/* ---- quick actions ---- */
 .dash-action {
     text-align: center;
     text-decoration: none;
     color: inherit;
     display: block;
     padding: 16px 8px;
     border-radius: 14px;
     transition: background 0.2s ease, transform 0.2s ease;
}
 .dash-action:hover {
     background: #F9F6EC;
     transform: translateY(-3px);
     color: inherit;
}
 .dash-action-icon {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin: 0 auto 10px;
}
 .dash-action p {
     font-size: 13px;
     font-weight: 500;
     margin: 0;
}

/* Profile Avatar */
.avatar.avatar-xxl {
    position: relative;
    display: inline-flex;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #F0C83C !important;
    background: #051931;
    box-shadow:
        0 10px 30px rgba(5, 25, 49, 0.15),
        0 0 0 6px rgba(240, 200, 60, 0.08);
    transition: all .35s ease;
    cursor: pointer;
}

.avatar.avatar-xxl:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 45px rgba(5, 25, 49, 0.22),
        0 0 0 8px rgba(240, 200, 60, 0.15);
}

.avatar.avatar-xxl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.avatar.avatar-xxl:hover img {
    transform: scale(1.08);
}

/* Upload Overlay */
.avatar .upload-new {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5, 25, 49, 0.95),
        rgba(5, 25, 49, 0.55)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .35s ease;
    backdrop-filter: blur(4px);
}

.avatar:hover .upload-new {
    opacity: 1;
    visibility: visible;
}

.avatar .upload-new a {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(240, 200, 60, 0.12);
    border: 1px solid rgba(240, 200, 60, 0.45);
    transition: all .3s ease;
}

.avatar .upload-new a:hover {
    background: #F0C83C;
    color: #051931;
    transform: scale(1.08);
}

.avatar .upload-new span {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .3px;
}

.avatar .upload-new i {
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
    transition: transform .3s ease;
}

.avatar .upload-new a:hover i {
    transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 576px) {
    .avatar.avatar-xxl {
        width: 80px;
        height: 80px;
    }

    .avatar .upload-new a {
        width: 95px;
        height: 95px;
    }

    .avatar .upload-new span {
        font-size: 12px;
    }

    .avatar .upload-new i {
        font-size: 22px;
    }
}