:root {
  --blueglow: rgba(43, 127, 255, .18);
  --free: #43e97b;
  --t1: #4a9eff;
  --t2: #2b7fff;
}

.nav-right { display: flex; align-items: center; }
.page-header.hero { min-height: 340px; padding-right: max(5vw, calc((100vw - 1320px) / 2)); padding-bottom: 38px; padding-left: max(5vw, calc((100vw - 1320px) / 2)); border-bottom: 1px solid var(--border); background: var(--black); }
.header-inner { position: relative; max-width: 830px; }
.page-eyebrow { margin-bottom: 8px; color: var(--blue2); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .34em; text-transform: uppercase; }
.page-title, .vault-heading, .video-title, .upgrade-title { font-family: 'Barlow', sans-serif; font-weight: 700; line-height: 1.06; text-transform: uppercase; }
.page-title { margin-bottom: 10px; color: var(--white); font-size: clamp(32px, 3.7vw, 54px); letter-spacing: -.015em; }
.page-desc { max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.page-formats { max-width: none; }
.patreon-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 1px solid var(--blue); border-radius: 100px; background: var(--blue); color: var(--white); font-size: 12px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background .2s, transform .2s; }
.patreon-cta:hover { background: var(--blue2); border-color: var(--blue2); transform: translateY(-2px); }
.patreon-cta svg { width: 14px; height: 14px; fill: currentColor; }

.vault-section { padding: 38px max(5vw, calc((100vw - 1320px) / 2)); }
.vault-section.alt { background: linear-gradient(120deg, #080d13, var(--deep)); }
.vault-section.free-section { background: var(--black); border-bottom: 1px solid var(--border); }
.vault-heading { margin-bottom: 20px; color: var(--white); font-size: clamp(27px, 2.9vw, 39px); letter-spacing: -.01em; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.video-grid > .video-card, .video-rail > .video-card { display: flex; flex-direction: column; }
.video-card .format-downloads { margin-top: auto; }

.rail-wrap { position: relative; }
.video-rail { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--blue) var(--deep); }
.video-rail::-webkit-scrollbar { height: 6px; }
.video-rail::-webkit-scrollbar-track { background: var(--deep); }
.video-rail::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 100px; }
.video-rail:focus-visible { outline: 2px solid var(--blue2); outline-offset: 5px; }
.video-rail.dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; scroll-snap-type: none; }
.video-rail.dragging a { pointer-events: none; }
.video-rail > .video-card { flex: 0 0 340px; max-width: 100%; scroll-snap-align: start; }
.rail-btn { position: absolute; top: calc(50% - 7px); transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 40px; height: 56px; border: 1px solid var(--border2); border-radius: 100px; background: #0a0d0fed; color: var(--blue2); cursor: pointer; transition: background .2s, color .2s; backdrop-filter: blur(6px); }
.rail-btn:hover { background: var(--blue); color: var(--white); }
.rail-btn svg { width: 16px; height: 16px; }
.rail-btn.prev { left: -14px; }
.rail-btn.next { right: -14px; }
.rail-btn[disabled] { opacity: 0; pointer-events: none; }
.rail-wrap.no-overflow .rail-btn { display: none; }
.rail-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.rail-hint svg { width: 13px; height: 13px; }

.video-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); transition: background .2s, border-color .2s; }
.video-card:hover { border-color: var(--blue2); background: var(--panel); }
.video-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.thumb-bg { width: 100%; height: 100%; }
.thumb-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-tier-badge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 100px; background: #0a0d0fe6; color: var(--blue2); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.tier-free .thumb-tier-badge { color: var(--free); }
.tier-1 .thumb-tier-badge { color: var(--t1); }
.tier-2 .thumb-tier-badge { color: var(--t2); }
.video-info { padding: 20px 24px; }
.video-title { margin-bottom: 10px; color: var(--white); font-size: 22px; overflow-wrap: anywhere; }
.video-desc { color: var(--muted); font-size: 13px; line-height: 1.65; }
.format-downloads { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 24px; border-top: 1px solid var(--border); }
.dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid var(--border2); border-radius: 100px; background: transparent; color: var(--blue2); font-size: 12px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.dl-btn.single { width: 100%; }
.dl-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.dl-btn:hover { background: var(--blueglow); color: var(--white); transform: translateY(-2px); }
.dl-btn.free-dl { color: var(--free); border-color: rgba(67, 233, 123, .35); }
.dl-btn.free-dl:hover { background: rgba(67, 233, 123, .08); color: var(--white); }
.dl-btn.free-dl:disabled { cursor: not-allowed; }
.dl-btn.free-dl:disabled:hover { background: transparent; color: var(--free); transform: none; }

.upgrade-wall { margin: 0 max(5vw, calc((100vw - 1320px) / 2)) 38px; padding: 38px 28px; border: 1px solid var(--border2); border-radius: 9px; background: var(--surface); text-align: center; }
.upgrade-icon { margin-bottom: 16px; color: var(--blue2); font-size: 36px; }
.upgrade-title { margin-bottom: 16px; color: var(--white); font-size: clamp(27px, 2.9vw, 39px); letter-spacing: -.01em; }
.upgrade-text { max-width: 520px; margin: 0 auto 24px; color: var(--muted); }

@media (max-width: 480px) {
  .page-header.hero { min-height: 320px; padding-top: 120px; padding-bottom: 30px; }
  .page-eyebrow { font-size: 9px; letter-spacing: .25em; }
  .video-info { padding: 20px; }
  .format-downloads { padding: 16px 20px 20px; }
  .upgrade-wall { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-rail { scroll-behavior: auto; }
}