.wrap { max-width: 1100px; }

/* Hero */
#hero { padding:calc(var(--nav-h) + var(--promo-h) + 72px) 0 64px; text-align:center; position:relative; overflow:hidden; }
@media(max-width:720px) { #hero { padding:calc(var(--promo-h) + var(--nav-h) + 48px) 20px 60px; } }

/* Cap section */
#cap-section { padding:64px 0 var(--section); }

/* Toggle pill */
.cap-toggle-wrap { display:flex; justify-content:center; margin-bottom:56px; }
.cap-toggle { display:inline-flex; background:var(--bg-1); border:1px solid var(--border-1); border-radius:100px; padding:5px; gap:4px; }
.cap-tab { padding:12px 32px; border-radius:100px; font-size:16px; font-weight:500; color:var(--text-2); background:transparent; border:1px solid transparent; cursor:pointer; font-family:var(--font); transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.cap-tab.active { background:var(--bg-2); color:var(--text-1); border-color:var(--border-2); box-shadow:0 1px 4px rgba(0,0,0,.5); }
@media(max-width:480px) { .cap-tab { padding:11px 20px; font-size:15px; } }

/* Panels */
.cap-panel { display:none; }
.cap-panel.active { display:block; animation:fadeInUp .28s ease both; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Video area */
.cap-video-area { display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; }
@media(max-width:900px) { .cap-video-area { grid-template-columns:1fr; } }

.cap-video-main { border-radius:var(--r2); overflow:hidden; border:1px solid var(--border-1); aspect-ratio:16/9; position:relative; background:#000; }
.cap-video-main iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }

/* Playlist */
.cap-playlist { display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) rgba(255,255,255,.05); }
.cap-playlist::-webkit-scrollbar { width:6px; }
.cap-playlist::-webkit-scrollbar-track { background:rgba(255,255,255,.04); border-radius:3px; }
.cap-playlist::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:3px; }
.cap-playlist:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,.38); }
.cap-playlist::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.55); }

.cap-playlist-item { display:flex; align-items:flex-start; gap:14px; padding:14px 12px; border-radius:var(--r1); border:1px solid transparent; cursor:pointer; transition:background .15s,border-color .15s; text-align:left; background:none; font-family:var(--font); width:100%; }
.cap-playlist-item:hover { background:var(--bg-1); border-color:var(--border-1); }
.cap-soon-badge { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.04em; background:rgba(255,202,27,.1); border:1px solid rgba(255,202,27,.25); color:rgba(255,202,27,.7); border-radius:4px; padding:2px 7px; margin-left:6px; vertical-align:middle; }
.cap-soon-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(6,6,9,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.cap-soon-overlay.visible { opacity:1; }
.cap-soon-text { font-size:15px; font-weight:600; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; background:rgba(255,202,27,.12); border:1.5px solid rgba(255,202,27,.55); border-radius:8px; padding:10px 22px; }
.cap-playlist-item.active { background:var(--bg-1); border-color:var(--border-2); }
.cap-playlist-num { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:var(--text-3); flex-shrink:0; transition:background .15s,color .15s,box-shadow .25s; }
.cap-playlist-item.active .cap-playlist-num { background:var(--accent); color:#000; box-shadow:0 0 12px rgba(255,202,27,.5),0 0 24px rgba(255,202,27,.18); }
.cap-playlist-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cap-playlist-title { font-size:15px; font-weight:500; color:var(--text-1); line-height:1.35; }
.cap-playlist-desc { font-size:13px; color:var(--text-2); font-weight:300; line-height:1.4; }

/* Video footer */
.cap-video-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; flex-wrap:wrap; }
.cap-video-meta { display:flex; flex-direction:column; gap:4px; }
.cap-video-title { font-size:20px; font-weight:500; color:var(--text-1); letter-spacing:-.02em; }
.cap-video-desc { font-size:15px; color:var(--text-2); font-weight:300; }

/* Resource cards */
.cap-resources-header { margin-bottom:40px; text-align:center; }
.cap-resources-header h2 { margin-bottom:12px; }
.cap-resources-header p { max-width:520px; margin:0 auto; }

.cap-resources { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:720px) { .cap-resources { grid-template-columns:1fr; } }

.cap-resource-card { display:flex; flex-direction:column; gap:20px; padding:32px; background:var(--bg-1); border:1px solid var(--border-1); border-radius:16px; text-decoration:none; transition:border-color .2s ease,transform .2s ease; }
.cap-resource-card:hover { border-color:var(--border-2); transform:translateY(-3px); }
.cap-resource-card.accent { border-color:rgba(255,202,27,.18); background:rgba(255,202,27,.025); }
.cap-resource-card.accent:hover { border-color:rgba(255,202,27,.35); }

.cap-card-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); flex-shrink:0; }
.cap-resource-card.accent .cap-card-icon { background:rgba(255,202,27,.1); }
.cap-card-body { display:flex; flex-direction:column; gap:8px; flex:1; }
.cap-card-title { font-size:20px; font-weight:500; color:var(--text-1); letter-spacing:-.02em; line-height:1.2; }
.cap-card-desc { font-size:15px; color:var(--text-2); font-weight:300; line-height:1.6; }
.cap-card-cta { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--text-3); margin-top:auto; transition:color .15s; }
.cap-resource-card:hover .cap-card-cta { color:var(--text-2); }
.cap-resource-card.accent .cap-card-cta { color:rgba(255,202,27,.7); }
.cap-resource-card.accent:hover .cap-card-cta { color:var(--accent); }